Selenium – IDE Managing User Interface Controls

In this topic we will understand test automation fundamentals of how a recorded script is replayed and how automation tools recognize objects on the application.

How Does Selenium IDE Replay Scripts?

While recording, Selenium stores object property information somewhere in the script.
When we replay the script, Selenium will pick up the object properties and try to find the object in the application by matching properties.
Once it finds the object, it will perform the operation (Click, Select etc.) on that object.

This is the basic automation fundamental required to understand how functional automation tools work. The key point to remember is that the selenium script is not a video recording of functionality but a step by step execution of actions recorded in the script.

Locate the Elements on a Web page

Every web page is nothing but a set of different UI Web elements or objects. Before we work with an element on a page, we need Selenium to locate that element. The elements on the web page can be located by various locator types.

To understand the various locators one needs to have a basic understanding of HTML. Id, name, input, type etc., are HTML tags/attributes. Using these HTML tags, attributes like “xpath” can be constructed. We can use tags or attributes to identify elements.

Given below is the list of locators which are supported by selenium

id
name
xpath
tag name
class name
link text
DOM
CSS

Locating by Name – The name locator type will locate the first element with a matching name attribute, For instance to recognize username web element we can use:

name = username

If multiple elements have same value for a name attribute, then you can use filters to further refine your location strategy.

Location by ID – The ID locator type will locate the first element with a matching id attribute. Use this when you know an element’s id attribute.

id=username

Locating by XPath – XPath is the language used for locating nodes in an XML documents. As HTML can be an implementation of XML (XHTML), Selenium users can leverage this powerful language to target elements in their web application. XPath extends beyond the simple methods of locating by id or name attribute and opens up all sorts of new possibilities such as locating the third checkbox on the page.

Absolute Xpaths contain the location of all elements from root and are likely to change with only the slightest adjustment to the user interface of the web application.

xpath=.//*[@id=’username’]

Locating Hyperlinks by Link Text – This is a simple method of locating a hyperlink in your web page by using the text of the link. For e.g., we can identify Logout link by using –

Link=Forgot Password?

Locating Elements by Class – The class locator type will locate the first element with a matching class attribute. For instance, to recognize class name attribute

Class=login_forgot

Locating by DOM – The Document Object Model represents an HTML document that can be accessed using JavaScript. This location strategy uses a JavaScript that evaluates the location of an element on the page using the hierarchical dotted notation.

<html>

<body>

</form>

</body>

</html>

Possible DOM locators for above html code –

document.forms[0].username

document.forms[0].elements[‘username’]

document.forms[0].elements[0]

Locating by CSS – CSS (Cascading Style sheets) is a language for describing the rendering of HTML and XML documents. CSS uses selectors for binding style properties to elements in the documents. These selectors can be used by selenium as another locating strategy. Let see how we can locate the input field element in the following page source.

Possible CSS locators –

css = input[class=’select_txt’]

css = input.Select_text[type=’text’]

css=#item

css=input#item