In the previous blog post, we walked you through the eight essential Selenium locators and explained 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 Selenium gives us options to choose from many locators. Secondly, we have to select the locators on a case-by-case basis. Sometimes, ID/Name doesn’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 important for us to decide upon a locator strategy that has the potential to minimize the locator seepage during changes in the application.
How to Select the Selenium Locators?
Here are some key points that you should consider when you select a good element locator. Let’s open up the topic and start to review the solution we are proposing.
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 that your locators could fail from the continuous changes happening in the application.
Check out the following HTML code.
Now, there are three possibilities you can explore for a good element locator in Selenium. Three possible Selenium locators are as follows:
By.id(“selenium”) By.xpath(“//div[@id=’selenium’]”) By.xpath(“//*[@id=’selenium’]”)
Now, let’s consider a case of an ongoing customer project where you are responsible for its automation. The requirement is to have a div identifier 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 identifier here is dynamic and bears the timestamp of the build. So, we have 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”> </div>
In the next statement, you will figure out the real power of the XPath locator. The proposed solution to access the element with variable id is available below.
The proposed solution is as follows:
By.xpath("//div[contains(@id, 'selenium')]")
Resilient to 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 that 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.
The example of a complex Selenium locator is as follows:
/Html/body/div/div/div/div[3]/div/div/div[3]/div/span
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. Let’s see how to handle the chain of locators.
<div class="tutorials">
<div class="selenium">
<div role="locators">Test1</div>
</div>
<div class="tutorials">
<div class="selenium">
<div role="locators">Test2</div>
</div>
</div>
</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’]”)
Independent of the Changes in Element Properties
HTML elements used to have many properties or attributes. What would you do to make your locators work when an HTML element loses one of its properties? You need to devise a locator strategy that 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>
</div>
</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 get changed.
So, don’t search for the below element locator. Please also check out the XPath expression that we don’t recommend.
By.xpath("//div/[@class='tutorials selenium locators']")
Instead, we suggest you use the XPath expression as given below.
By.xpath("//div/[contains(@class, 'selenium')]")
Final Word: How to Select the Selenium Locators
We wish that our readers not only have the bookish knowledge of Selenium, but they should also be able to use it live in their workplace.
Subsequently, we believe that this Selenium tutorial will help you in doing that. And you would be able to use the Selenium locators more efficiently in your projects.
Best,
TechBeamers
