If you have experience with UI testing, you probably know a thing or two about web element locator strategies.
Web element locator strategies are a fundamental piece of the automated testing puzzle. In order to run tests, find bugs, and fix errors, you need to be able to pinpoint the problem. In this blog, we’ll explore several top locator strategies as well as their specific benefits and potential drawbacks.
But before we go any further, let’s break down what a web element is.
Web Elements
A web element is any live HTML rendering displayed on a web page. This could be anything a user experiences and interacts with when they visit a site—buttons, labels, images, and text are all web elements.
When working in the Document Object Model (DOM), elements are specified by a tag name, attributes, and contents. These elements could also nest other child elements, such as a dropdown menu with rows, and Cascading Style Sheets (CSS) can be added to give elements color or shape. What you’re left with in the DOM is usually a long list of parent and child elements, represented as HTML.
So, what if you need to find a specific element or group of elements, fast? This is where locator strategies come in.
Locator Strategies
In order to interact with these web elements, actions need to be taken within an app’s UI. And if you’re using a test automation tool like Selenium or Appium, you’ll need to be able to quickly recall web elements using a locator strategy.
A locator is an object that finds and returns elements on a web page using a specific query. A good locator strategy will enable you to find elements on a page by attribute and run quick, accurate UI tests. Let’s look at some of the most common locator strategies.
ID
The id attribute is a commonly used locator strategy that specifies a unique identifier for a web element. Because of its ease of use and accuracy in returning specific elements, id is often thought of as the best locator strategy.
Id elements are completely unique from one another, meaning there can only be one HTML element per id attribute. They are also used in JavaScript to access and manipulate an element, so developers rarely change ids in the build. The id locator strategy is one of the fastest ways to run UI tests—if they are available.
Name
When id is not available, name is your best bet.
If it’s unique, the name attribute will return your desired results quickly and easily. But, unlike IDs, the same name can be used to denote multiple elements, so make sure to scan the page for duplicates.
Class Name
If neither of the locator strategies above is available to you, try using the class name attribute.
As the name suggests, class names are used to identify a class for a specific web element. However, it should be noted that web elements can—and often do—share a common class name. This makes this locator strategy useful for recalling similar groups of elements, but not as helpful for finding a unique element.
CSS
The strategies listed above are generally going to be the easiest way to locate web elements. But, depending on the build, script, or automation tool, these locators might not always be available to you. Enter CSS selectors.
CSS selectors are used to find elements in which a set of specified CSS rules apply. These selectors are primarily used to locate an element you wish to style, but with the right attributes entered in the search bar, CSS selectors can help you locate nearly any element. CSS selectors are a good locator strategy to use when trying to connect parent-child relationships, although they do take more time than the strategies listed above.
XPath
Another way you can find elements is by using XPath selectors. XPath is a unique syntax that can identify any element on a web page and can be used for HTML or XML.
XPath selectors use XML path expression to locate elements and attributes and are good for exploring parent-child traverse paths. Although XPaths are regarded by many as the most powerful locator, XPath selectors can be problematic. Because they have higher complexity, XPaths are notoriously brittle and can take a long time to navigate.
Which Web Element Locator Strategy Should You Use?
There are plenty of other web element locator strategies not listed here such as link text, partial link text, tag name, image, accessibility id, and various platform-specific locators. With all these options, you might be wondering which strategy is right for you.
Unfortunately, there is no such thing as the ‘perfect’ locator strategy. Although the ones listed above are a great place to start in terms of speed and reliability, all locators have their use. Try familiarizing yourself with a handful of strategies and work with your developers to make web elements easier to locate.
If you’re looking for a way to make UI testing faster to catch bugs earlier, Appsurify’s TestBrain tool can help. TestBrain plugs ML into existing software testing practices enabling your team to test 10x faster, find bugs much sooner, quarantine a flaky test so it doesn’t create a false alert, and help fast-track deployments. Plus, it works with any testing tool controlled by the CI/CD pipeline. Connect with our team to try it for free.