Selenium Locators

Table of Contents

Selenium needs to access the web elements for automating the tasks related to them. For finding web elements on the webpage, it uses the concept of Locators. Locators define different ways to reach to the web element on a webpage using some of its attributes. After finding the web elements, Selenium automates the operations like click, text entry, select the checkbox, etc.

There are many types of locators available. It is imperative to select the proper locator technique which makes the processing faster and is easier to maintain. This article talks about different types of locators and how to select the right locator for different scenarios.

Selenium locators:

ID
Name
Class
Link Text
Partial Link Text
CSS
XPath
Tag name

findElement() method

Selenium provides the findElement() method which helps with locating web elements on the webpage. This method uses different locator types like ID, name, XPath, etc to find the elements. The syntax of this method is

WebElement element = driver.findElement(By.locator technique(“locator value”));

For instance, driver.findElement(By.id(“username”));

Here, Selenium will find the element with the use of id locator having the value of id as “username”.

Types of Locators

There is a total of 8 types of Selenium locators. Each one of them makes use of a specific attribute of the HTML tag of web element.

ID

ID locator fetches the element with the help of id attribute. The developer provides value to id in his HTML code as shown below for a username input text box.

<input type=”text” id=”login” maxlength=”30″ value=””>

For this tag, the value of the ID attribute is “login”. So Selenium can use below code to access this web element.

driver.findElement(By.id(“login”));

The above Selenium code is using the findElement method to locate web element with the help of its ID’s value which is “login”. The Selenium will return the first element it finds with the matching ID value.

ID locator is an easy and fast way of finding the element on the webpage. Hence it is highly preferred by automation developers. Also, ID is mostly unique for the web element and hence the locator doesn’t require changes with time.

At times, there are no ids present for a particular element. Or at times developers write code in such a way that IDs keep changing. This these scenarios ID locator should not be used and it is better to find some other locator strategy instead of using ID.

Name

Name locator is next preferred Selenium locator which uses the name attribute. With name locator, Selenium returns the first web element it finds matching with the value of the name.

For example,

<input type=”text” name=”usernm” value=””>

In the above HTML code, there is no id attribute but the name attribute’s value is there. So we can fetch this element by using its name attribute

driver.findElement(By.name(“usernm”));

Here we are using the findElement Selenium method to find the web element with the help of value of its name attribute which is “usernm”.

Like id locator, the name is also an easy, fast and reliable way of locating the web element. But when there is no name attribute present or the value is not unique, it cannot be used.

Class

This locator finds the elements with their class name attribute. Consider following HTML code for a web element

<div class=”email-logo”></div>

So to locate this element we can use the class name as follows:-

driver.findElement(By.className(“email-logo”));

The class name is an easy and fast way of locating web element but it is not unique. One or more than one web element can have the same class name. In that case, Selenium will fetch the first match it finds.

linkText

This locator locates the links or hyperlinks on the webpage. It fetches the web element with the help of the value of text of the link.

For example, consider the following HTML code

<a href=”https://www.xyz.com”>Home</a>

To find this web element, we can write Selenium code as below

driver.findElement(By.linkText(“Home”));

It is an interesting locator formulated to find the links on the webpage.

Partial link text

Partial link text locator also finds the links on the webpage but it matches a part of the text of the link. Hence, its name is Partial link text. It checks whether or not the link text contains the matching text and then returns the first match with the text.

For example, consider the following HTML code

<a href=”//register.xyz.com/register/register.php?FormName=user_details”>Create a new account</a>

To fetch this web elemnt using partial link text we can write

driver.findElement(By.partialLinkText(“account”));

So in the above code , findElement method is finding the element using a portion of the value of link text which is “account”. It will again return the first match it finds.

CSS

CSS stands for Cascading Style Sheet which provides a way for formatting the webpage. Selenium uses CSS locators to find elements on the webpage using some attribute or property of it. Some of the common syntax formats for forming CSS locator are given below

Using tag and ID: tag#id
With tag and class: tag.class
Using tag and attribute: tag[attribute=’value’]

For example, for HTML tag

<input type=”submit” name=”proceed” value=”Go” tabindex=”4″>

Here,

tagName = input

attribute = value

value = proceed

So CSS to locate this element will be

input[value=’proceed’]

So the Selenium code for it would be

driver.findElement(By.cssSelector(“input[value=’proceed’]”));

XPath

XPath is a very useful locator when it comes to identifying elements which cannot be identified with other locators. For instance, elements which do not have unique IDs, name or class in their HTML code. XPath offers flexibility in searching element through various available attributes and tag name.

A simple formula for forming Xpath of the element is

//tagName[@attribute=’value’]

Let us look at the following HTML code

<input class=”gb_Qe” role=”button” name=”q” text=”Create email”>

Here,

tagName = input

attribute = text

value = Create email

We are not using class, role name attributes as they may not be unique.

So the XPath to locate this element will be

//input[@text=’Create email’]

There is much more to XPath as a locator. Please refer to our article Effective XPath.

So the Selenium code for it is

driver.findElement(By.Xpath(“//input[@text=’Create email’]”));

TagName

This locator returns a list of web elements with the given tag name. Consider one scenario in which a webpage has many hyperlinks on it and tester needs to find the exact count of it. So he can write the Selenium code as

driver.findElements(By.tagName(“a”));

The above code gets a list of web elements having an HTML tag as “a”.

This is an effective locator for scenarios where one needs to find all the elements with the same tag name. For example, it can get all the elements of the drop-down menu.

Why it is important to choose right Locator

Locators form the foundation of the automation test framework. Choosing the best possible locator for the web elements is important as it ensures

Fast speed of automation test. Different locator operates at a different speed. The ID locator provides faster speed than XPath.
Lower maintenance in next releases as HTML code of webpage may keep changing with the releases. Hence, choosing the right locator ensures less impact on the automation code.
Consistency among the locators. Projects make the decision on which and how to use the locators to ensure consistency so that the code is easy to maintain and understand by the current and upcoming team members.

Conclusion

In this article, we learned about the various locators of Selenium using which web elements can be located on the web page. Locators form the foundation of the automation framework. Hence, using the right locator ensures fast processing, low maintenance, and consistency in the framework. With all the strategies in place, still, at times it becomes difficult to figure out the way of locating web elements on the page.