Choosing the best locator is an important skill for QA engineers. QAs can use locators to instruct the Selenium IDE to operate on certain GUI elements – a required step before creating automation scripts. Picking the right locator can improve the maintainability and reusability of the test automation framework and help reduce test flakiness. In this article, we’ll break down what you need to consider when choosing a locator.
Application DOM Structure
Ensure you are checking the application’s DOM structure, and that you know which strategy does not rely on the structure of the page and will work even if it changes. The locator should also be unique or match the desired element.
Inconclusive Locators
If the locator is not unique and is inconclusive or ambiguous, find multiple elements and parse the array or check the index for your appropriate element.
public static async getAllTexts(elements: ElementArrayFinder, toWait = true) {
const allTexts = [];
const allItems = await elements.asElementFinders_();
for (const elem of allItems) {
const elementText = await PageHelper.getText(elem, toWait);
allTexts.push(elementText); }
return allTexts; }
Avoiding Dependencies
Avoid depending on the information that can be changed. For example, if the element has a tag name h3, or its direct parent is div, its direct parent is the 2nd div child of the grandparent h3 element, and its grandparent has an attribute with a value PP_6258. Avoid depending on auto-generated ids/values. A locator should not be affected by changes to its parents. The locator is supposed to be unique for each element if located by ID/Name.
Removing Duplication
When selecting the best locator, you should keep in mind that there should not be any duplication. But what should you do to remove the duplication? For this, extract the common part of the XPath into a constant string or parameterize getter to get different locators with the same static method.
static productAdded(name: string) {
return element(By.xpath(`//p/a[contains(text(),'${name}']`))}
Alternatively, search for the panel element first and then look for each of the inner elements by invoking FindElement on the WebElement object of the panel.
Using XPath
When should you use XPath? XPath can be used to form complex locators by traversing the DOM structure (i.e. Following Ancestor, Preceding: Following-sibling).
//div[@class='Mammal']/following-sibling::div //div[@class='Other']/preceding::div
A huge benefit of using XPath is to match easily on text content. XPath should be used relative instead of absolute with contains, AND, OR, starts-with.
driver.findElement(By.xpath("//input[@name= ’email’]"))
driver.findElement(By.xpath("//tagname[contains(@attribute, ‘partial value of attribute’)]
driver.findElement(By.xpath("//input[@id='login_1' AND @name='login’]
driver.findElement(By.xpath("//p[@text()=’ SIGN UP’]"))
CSS Selectors
Why should we use CSS Selectors? CSS selectors provide a good balance between structure and attributes in terms of readability. Moreover, they provide a bit higher performance in cross-browser testing and support wildcard characters (i.e. “^”, “$”,” *”).
link = @driver.find_element(css: 'a').attribute('href')
img[title='English'][alt='United States']
img[title^='En']
Managing Locators
Locators should be managed into different page objects/modules as recommended in “Page Object Model” for better maintainability. Keep your comments meaningful and concise whenever handling complex locators.
This post was published under the Quality Assurance Community of Experts. Communities of Experts are specialized groups at Modus that consolidate knowledge, document standards, reduce delivery times for clients, and open up growth opportunities for team members. Learn more about the Modus Community of Experts program in the article Building a Community of Experts.
