How to Select the Selenium locators for Web Elements

In the previous blog post, we’ve walked you through the eight essential Selenium locators and explained with some of the best examples for understanding the locators. Today, we are going to discuss the core ingredients of a successful Selenium automation project. We’ll focus on certain ways to select the right Selenium locators for web elements.

Now the question is why do we need to choose among the multiple locators available in Selenium?

The simple answer to this query is first the Selenium gives us options to choose from many locators. Secondly, we have to select the locators on case by case basis. Sometimes, ID/Name don’t work, but the CSS does. In some cases, XPath is left as the only choice that we’ve to make. So, we can’t ignore the ability of the different types of Selenium locators. We need to use them wisely as the situation demands.

Apart from all we said above, we can’t undermine the scenario when the application UI gets changed. This change directly impacts our test automation and the usage of locators. The changes would undoubtedly lead to breaking some of the locators used in the project. Hence, it is eminent for us to decide upon a locator strategy which has the potential to minimize the locator seepage during changes in the application.

Here are some key points which you should consider while you select a good element locator.

  1. Concise and Compact Locators.
  2. Resilient to the Web UI Changes.
  3. Independent to the Changes in Element Properties.

Let’s now open up the topic and start to review the solution we are proposing.

How to Select the Selenium locators for Web Elements?

1- Concise and Compact Locators.

You must keep a Selenium locator as short as possible. It would make your code cleaner, reduce complexity and help in the long-term maintenance of the project. Additionally, it would lower the chances where your locators could fail from the continuous changes happening in the application.

Check out the following Html code.

<div id=”selenium” class=”tutorials”>



Now, there are three possibilities you can explore for a good element locator in Selenium.

Three possible Selenium locators are:“selenium”)





Now, let’s consider a case of an ongoing customer project where you are responsible for its automation. The requirement is like to have a div id which gets changed with every build. And the developer adds a timestamp to the div id. You can verify this from the below HTML example. The Html contains a fixed class, but the id here is dynamic and bears the timestamp of the build. So, we’d to select a locator that can manage the variable part of the id.

The sample Html code is as follows.

<div id=”selenium-04102016″ class=”tutorials”>



In the next statement, you would figure out the real power of the XPath locator. The proposed solution to access the element with variable id is available below.

Proposed solution:


By.xpath(“//div[contains(@id, ‘selenium’)]”)


2- Resilient to the Web UI Changes.

Let’s consider that you are facing a relatively complex scenario in your Selenium projects. For example, you need to find the locator of an element which doesn’t have an Html id. In such a case, you tend to use the ‘copy XPath’ option available in the browser developer tools. But you should only follow this option when the Html ids are present in the page source. If that’s not the case, the ‘copy XPath’ option will leave you with something like the below locator.

Complex Selenium locators:



There is no second thought about the degraded quality of the above locator. Any minor change in the chain of its elements is sufficient to lead to an incorrect result.

Being a Selenium expert, you must learn to tackle such situations.

The HTML code given below would help to understand more about the problem.

How to handle the chain of locators?


<div class=”tutorials”>

<div class=”selenium”>

<div role=”locators”>Test1</div>


<div class=”tutorials”>

<div class=”selenium”>

<div role=”locators”>Test2</div>


As an illustration, let’s assume you’ve to locate the div containing the “locators” role. You can’t directly lead to the div with the “locators” role because there exist two divs in between. Instead, you can do it by first locating the “tutorials” div and then descending to the div having the “locators” role.

Check out the below two answers to the above problem.

By.xpath(“//div[contains(@class, ‘tutorials’)]/div/div”)


By.xpath(“//div[contains(@class, ‘tutorials’)]//div[@role=’locators’]”)


3- Independent to the Changes in Element Properties.

HTML elements use to have many properties or attributes. What would you do to make your locators work when an Html element losses one of its properties. You need to devise a locator strategy which is independent of the locator attributes. Let’s see how can you do it with the help of the below example.

Let’s demonstrate the scenario using the following code.

<div class=”tutorials selenium locators”>

<div class=”post”>

<div role=”author”>List</div>



Now, let’s assume you are searching for the class “selenium.” For this, it is sufficient to look for the class of type “selenium”. You should exclude the “tutorials” and “locators” classes. It is because checking for the additional classes would yield you no benefit. Instead, your code would break when any of these two properties gets changed.

So, don’t search for the below element locator.

XPath expression – Not recommended.


By.xpath(“//div/[@class=’tutorials selenium locators’]”)

We suggest you use the XPATH expression as given below.

XPath expression – Recommended.


By.xpath(“//div/[contains(@class, ‘selenium’)]”)


Final Word.

We wish that our readers should not only have the bookish knowledge of Selenium, but they should also be able to use it live in their workplace. We hope that this Selenium tutorial would have helped you in doing that. And you would be able to use the Selenium locators more efficiently in your projects.


Wish you All the Best,



  1. Paedru Reply

Leave a Reply