Selector Strategies for Automated Browser Testing

In test automation, we have differents forms of selecting a WebElement in Selenium. A selector is a pattern used to locate a WebElement on a given webpage so we can interact with it. Examples of elements are buttons, text fields and input fields. Examples of actions are clicking on a given element or completing a password text field.

One of the challenges of automated testing, specially with end to end testing, is to mitigate the effect of changes in an ever changing application. E2E tests interact with the application through the UI.

Selectors strategies were born when people started thinking not only on delivering high quality code, but also delivering faster automation solutions.

The following image is a simplified version of the 'Agile Test Automation Pyramid', first proposed by Mike Cohn in his book 'Succeeding With Agile':

It is useful to know which selectors are faster under certain situations so we can make smarter decisions. They can impact on reliability, usability, performance and maintainability. That’s why it’s so important that we choose our selectors wisely.

You could check here the differents ways of locating an element

Some common strategies are:

1. ID
2. Name
3. Class
4. CSS Selectors
5. Xpath

ID/name/class

When using these, you can target specific elements instead of relying on page structure. 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. But most elements don't have the ID attribute. This would require a combined work between developers and QA team members: work with developers and decide on the locators’ strategy together.

When ID is not present, the next best option is the name. You should check whether the name is unique or not.

PROS:

1. Very simple to use.
2. They don't rely on the structure of the page and will work even if it changes.

CSS Selectors

If the above-mentioned options are not available, the next best solution is CSS selector: is a string pattern used to identify elements based on combination of HTML tags, Ids, classes and attributes. CSS selectors have the same implementation across all browsers.

PROS:

1. Much faster than XPath
2. Widely used
3. Provides a good balance between structure and attributes
4. Allows for selection of elements by their surrounding context

CONS:

1. They tend to be more complex and require a steeper learning curve

Xpath

Allows to navigate through the HTML structure of a page. XPath allows the navigation through the XML structure of any document; it can be used both on HTML and XML. Provides an option to dynamically search for an element within a Web Page, giving the user flexibility.

There are two types of Xpath:

• Absolute Xpath: It uses a Complete path from the Root Element to the desired element.
• Relative Xpath: This can simply be started by referencing the element that you want and go from there.

CONS:

1. Is not recommended for cross-browser testing because it relies on browser’s XPath implementation which is not always complete

Helpful questions to ask yourself:

• Are you running cross-browser testing?
• Does your application have dynamic elements?
• How does the element that you want to select looks like?
• Does the locator strategy only match the desired element or elements?
• Is the locator depending on information that is likely to change?