Web element locator strategies

If you are moving from Manual testing to Automation testing, then this is specially for you.

When it comes to UI automation, web element locators play a big role.

Why?

Because locators provide the ability to interact with a page through its elements in a number of various ways. Since I am working with Selenium, I’ll continue the rest using Selenium.

There are different types of locators such as;
Identifier, Id, Name, Link, DOM, XPath, CSS etc.

Tester should be always smart to find the simplest and the most convenient locator for the code.Which locator do you think is the best among all? Let’s have a look.In my opinion, there is no such perfect locator. The Tester should be thoughtful enough and, be able to find the best locator according to the test.

The identifiers that are being used to locate the DOM elements depend on the build, as they could have changed from one build to the other.

ID :

If I am to choose one, I would prefer using the ID, as it is one of the safest and efficient ways to locate an element on a web page.

This can be counted as the fastest option too. Most of the time ID is unique and independent from the other locators. Since the IDs are often used for the client-side logic in the JavaScript, developers very rarely change the ID of an element. It is great if the developers could be asked to add extra unique IDs to the elements, which will make life easier for testers.

Example:

<input id = “Username” type=”text”>
Driver.findelemnet (By.id(“Username”));

Name :

When ID is not present, the next best option is the Name. But the tester should first check whether the name is unique or not.

Example:

<input name = “Username” type=”text”>

Webelement ele = driver.findElement(By.name(“username”));

CSS :

If both of the above-mentioned options are not available, the next best solution is the CSS.CSS Selector is a combination of an element selector and a selector value which will identify a web element within a web page.

CSS class selector matches elements based on the content of its class attribute.

Example:

primary-btn is a class attribute value.

<button class=”submit btn primary-btn flex-table-btn js-submit” type=”submit”;”>

WebElement ele = driver.findElement(By.cssSelector(“.primary-btn”));

When it comes to selenium there are different types of CSS selectors;

1) ID — “#” sign symbolizes this attribute
Ex: #firstname

2) Class — “.” sign symbolizes this attribute
Ex: .intro

3)Attribute — The selector [target] in the below example matches all elements that has the target attribute.
Ex: a[target] {background-color: yellow;}

4) Sub string — This is used to correspond to the String, with the help of a matching Substring.
Ex: css=input#Passwd[name$=’wd’]

5) Inner-String — This helps to identify and create a CSS Selector using a string pattern that the HTML Tag manifests on the web page.

For more info refer: https://www.w3schools.com/cssref/css_selectors.asp

XPATH :

Xpath is also a good option. XPath is defined as XML path, and is a syntax or a language that can be used to find any element on the web page using its XML path expression.

Xpath = //tagname [@Attribute = ‘value’]

There are two types of Xpath;

Absolute Xpath — It uses Complete path from the Root Element to the desired element.
Ex: /html/body/div[5]/div[2]/div/div[2]/div[2]/h2[1]

Relative Xpath: This can simply be started by referencing the element that you want and go from there.

Xpath = //tag name [@attribute = attribute’s value]
Ex: — //*[@id=’answers’]/h2[1]/a[1]

When there is no exact Xpath, the xpath parent child traverse could be used.

1. Normalize-space — This function ignores the leading, trailing, and repeating white spaces. That means after applying the normalize-space the text become normalized with no line breaks, and give a proper sentence.

2. contains () — By this function in XPath, all the elements that matches a particular text value could be extracted.
Ex: “//h4/a[contains(text(),’SAP M’)]”

3. Start-with() — By this function, you can find the element whose attribute dynamically changes on refresh or other operations like click, submit, etc.
Ex: Xpath=//label[starts-with(@id,’message’)]

4. Parent,child — By Using Parent, the parent node of the current node in the web page could be found.
Xpath=//*[@id=’rt-feature’]//parent::div

5. Following sibling — Using sibling keyword, a web element which is related to some other element, could be fetched.
Ex:- “//div[@class=’canvas- graph’]//a[@href=’/accounting.html’][i[@class=’icon-usd’]]/following-sibling::h4”

But, when comparing CSS and Xpath, CSS is a better option.

Why?

* CSS selector is simpler and faster than the Xpath.
* Xpath engines are different in each browser, hence make it inconsistent.
* IE does not have a native Xpath engine, therefore selenium has to make its own Xpath engine to be compatible with its API.

Apart from the above, there’s class name, Link text, Tag name, DOM and many more, that can be used as locators.

You can use the developer tools to see how different identifiers are used to identify specific elements in the DOM.

The tip is to use the “Find” functionality in the Chromes’ Developer tools. A Search box will appear once you press the short cut keys, Ctrl + F. Make sure you click on the Elements tab on the Developer tools window before you press the short cut keys (Ctrl + F).

Once the Developer Tools window is opened, click anywhere in the code, and see what gets highlighted on the web page. There is a selection tool as well. Once that is applied, select anywhere on the page and the corresponding HTML code will get highlighted.

Chropath is a development tool which can be used to find the unique Xpath and CSS selector values for the selected elements.
Currently it supports Chrome, Firefox, Edge, and Opera browsers.

If you have a helpful development team, they will create unique identifiers for each element you might want to test because, they are writing the same tests themselves.
As testers you also can share your ideas with them and, make it more efficient and convenient.

That will also be a great opportunity for you to get connected with the development team and, to get an idea about the overall code since, you are going to start a new chapter as an Automation engineer.

References:
1.Web Element Locator Strategies [A Student’s Experience] : https://applitools.com/blog/web-element-locator-tau/#:~:text=Web%20Element%20Locators%20provide%20software,page%20and%20measure%20its%20response.
2. Locator Strategies in Selenium WebDriver : https://blog.thedigitalgroup.com/locator-strategies-in-selenium-webdriver
3. Selenium Tutorial: Locators : https://www.protechtraining.com/content/selenium_tutorial-locators
4. XPath Contains, Sibling, Ancestor, AND OR, Parent, Start with, Axes in Selenium Webdriver : https://www.guru99.com/using-contains-sbiling-ancestor-to-find-element-in-selenium.html

About the Author

Achini Rathnayake works as a Associate Quality Assurance Engineer at 99X Technology.