Locators Continued…

Previously (Locators) we discussed the role of locators in UI automation; also discussed few of the locators’ implementation, but it would not be able to help you out when elements don’t have enough attributes or behavior and properties of elements are dynamic when attempting to locate these elements. Now, we will see some of the techniques here to locate elements in such situations. Normally we use CSS and XPath technique to locate elements when elements do not have enough attributes to make it unique over the page. In this section we will be exploring XPath in detail.

As we already know that XPath is a language based on the representation of the XML document and it provides the ability to navigate around the tree, selecting nodes using a variety of criteria. With XPath we can search elements backward and forward in the DOM hierarchy. This means that with XPath we can locate a parent element using a child element.

Selenium Webdriver provides xpath() method to locate elements using XPath.

Syntax: driver.findElement(By.xpath(“html/body/form/input”));

Following are the various ways to use xpath:

•  Finding elements with absolute path
XPath absolute path refer to the very specific location of the element, considering it’s complete hierarchy in the DOM.

WebElement username = driver.findElement(By.xpath(“html/body/form/input”));

However, this strategy has limitations as it totally depends on the structure of the element on the page. If it changes, the locator will fail to locate the element.

•  Finding elements with relative path
With relative path we can locate an element directly irrespective of its structure or hierarchy on the page. If multiple input elements exist on the page it will locate to the first occurrence.

WebElement username = driver.findElement(By.xpath(“//input”));

•  Finding elements using index
In the previous example we used relative path to find the element on the page, but it has limitation of locating only the first occurrence. But combining the relative path strategy with index we can locate other occurrences of the element too.

WebElement password = driver.findElement(By.xpath(“//input[2[”));

In this example the index is locating the second occurrence of the input box which is password field on the login page.

•  Finding elements using attributes value
Now the question is why we are using XPath strategy to find an element when element do have attribute? You might come across the situation where one attribute is not sufficient to locate an element and you need to combine other attribute(s) to create a precise match for that element.

WebElement LoginButton = driver.findElement(By.xpath(“//input[@type=’sumbit’ and @value=’Login’]”));

Performing partial match on attribute values: This is very useful for testing applications where attribute values are dynamically assigned and changed every time a page is requested. The following table explains the use of these xpath methods:

Syntax	Example	Description
starts-with()	input[starts-with(@ id,'ctrl')]	Starting with: For example, if the ID of an element is ctrl_12, this will locate and return elements with ctrl at the beginning of the ID.
ends-with()	input[ends-with(@id,'_ userName')]	Ending with: For example, if the ID of an element is a_1_userName, this will locate and return elements with _userName at the end of the ID.
contains()	Input[contains(@ id,'userName')]	Containing: For example,if the ID for an element is panel_login_userName_textfield, this will use the userNamepart in the middle to match and locate the element.

•  Finding elements with xpath axis

XPath axis help to locate elements based on the elements’ relationship with other elements in a document. The following table explains the use of these xpath axis methods:

Axis	Example	Description
ancestor	//td[text()='Product 1']/ancestor::table	Selects all ancestors (parent, grandparent, and so on) of the current node.
Descendant	/table/ descendant::td/input	Selects all descendants (children, grandchildren, and so on) of the current node.
Following	//td[text()='Product 1']/following::tr	Selects everything in the document after the closing tag of the current node.
following-sibling	//td[text()='Product 1']/following-sibling::td	Selects all siblings after the current node.
Preceding	//td[text()='$150']/ preceding::tr	Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes, and namespace nodes
preceding-sibling	//td[text()='$150']/ preceding-sibling::td	Selects all siblings before the current node.

Locators (Basic)

The success of GUI automation depends on identifying and locating the GUI elements from the application and performing operations on them. As Selenium parses the DOM (Document Object Model) to get the property of the desired element while interacting to the element on the web page, and for that we need a mechanism to get those properties. Selenium provides different types of locators to accomplish this task. In this blog we will discuss about the basics of locators, types of locators, and how to use locators.

 

Before we start exploring locators, we need to analyse the page and elements to understand how these are structured in the application, what kind of properties or attributes are defined for the elements. Browsers render the elements of the application for the end users by hiding the HTML and other resources, and when we need to interact with the application using automation using Selenium Webdriver, we need to look very carefully to the background code that has been written to render elements in browsers.

 

We can view the code written for a page by right-clicking in the browser and selecting the View Page Source option. But the displayed code might look messy and difficult to understand, and for that we need some special tools that can display the code in a structured manner.

 

Different browsers have their in-built tool to inspect the element. Below are the various ways to inspect the element from the code:

1. Inspecting elements with Firefox:
The newer versions of Firefox provide in-built ways to analyse the page and elements, however it is recommended to use the plug-in available for Firefox, i.e. Firebug.

2. Inspecting elements with Google Chrome:
Google Chrome provides an in-built feature just like Firefox to inspect elements. Move the cursor to desired element on the page and right-click to open the pop-up menu, and then select inspect element option.

3. Inspecting element with Internet Explorer:
Internet Explorer also provides feature to inspect element same as the other browsers. Click F12 key to open the Developer Tool and select the arrow icon and hover over the desired element.

 

We can inspect elements on different browsers in similar fashion. For, this blog demonstration purpose we will use Firefox. Follow the steps mentioned below:

1. Install the Firebug plug-in. In addition also install the Firepath plug-in to find the CSS and XPath of element.

2. Launch the desired page in Firefox, right-click on desired element and select option Inspect Element with Firebug. It will highlight the elements code in lower part of your browser.

 

Now, see the code snippet prepared just for demo purpose.

 

 

In this HTML code snippet we can see that we have few elements on the page, such as UserName textfield, Password password field and a Submit button, and all have some attributes defined. We will use those attribute to find the element on the page to simulate user actions. Now, using this HTML code we will see how to use different Locators to find the elements.

 

Types of Locators:

1. Locate Element by ID : Using the ID attribute is the most preferable way to locate element on a page. The W3C standard recommends that developers should provide an id attribute for elements that are unique to each element. This is the fastest locator strategy.

In Selenium Webdriver, we use findElement() and findElements() method to locate the element on a page.

 

Eg: WebElement username = driver.findElement(By.id(“username”));

 

Here, WebElement is the type to store the element reference, driver is WebDriver object to facilitate the findElement() method.

 

2. Locate Element by Name : you might find situations where you cannot use the id attribute due to the following reasons:

• Not all elements on a page have the id attribute specified.
• The id attributes are not specified for the key elements on a page.
• The id attribute values are dynamically generated.

So, in these cases we need to use some other attributes to find the elements.

 

Eg: WebElement username = driver.findElement(By.name(“password”));

 

3. Locate Element by Class : The scenario added to previous point in which we need to use some other attributes to find elements on a page, we can also use Class attribute. The Class attribute is provided to apply CSS (Cascading Style Sheet) to an element.

 

Eg: WebElement username = driver.findElement(By.className(“login”));

 

4. Locate Element by CSS : CSS is a style sheet language used for describing the presentation semantics of a document written in a markup language such as HTML or XML. As mentioned earlier to install Firepath to find CSS or XPath easily. We can use Firepath to find CSS Path as well.

 

Finding by absolute CSS path
Eg: WebElement username = driver.findElement(By.cssSelector(“html body form input”));

 

Finding by relative CSS path
Eg: WebElement username = driver.findElement(By.cssSelector(“input”));

 

5. Locate Element by XPath : XPath, the XML path language is a query language for selecting nodes from an XML document. Use Firepth to find the XPath for any element.

 

Eg: WebElement username = driver.findElement(By.xpath(“html/body/form/input”));

 

As used in CSS example, we can also use absolute and relative path here for XPath.

 

In coming blogs we will discuss about more locators in detail.

Rules for automation

Test automation is increasing in popularity over the years because of increasing competition and less time and money to invest on large teams to make sure that application work as they are expected. But, automation can only be fruitful for quality and expected behaviour if they have been implemented in the right way. Below the rules we can apply to any form of automation testing but need to be adhered to especially when creating automation scripts for UI automation: 

Ø  Tests should always have a known starting point. In the context of Web UI automation, this could mean launching browser with a certain page to start.

Ø  Tests should not have to rely on any other tests to run. If a test is adding something, do not have a test to delete it. This is to ensure that if something goes wrong in one test case, it will not mean you to have lot of unnecessary failures to check.

Ø  Tests should only test one thing at a time.

Ø  Tests should clean up after themselves.