Selenium: Locators and their Usage

What are Locators?

Locators help us to identify the location of a particular web/HTML element on a web page. Selenium uses those locations to perform actions and execute automation scripts. To identify the web elements we need to inspect a particular web element where actually it is located on a web page, then find out its unique node values and use these with selenium script to take action on the web element.

How to inspect?

To inspect WebElements on a webpage we can use the Developer console or External plugins.
Developer console (ref Chrome browser)
Step1: Right-click on the web page, select inspect from the menu option and it will open the developer console. Now click on the selector arrow in the extreme left- corner of the dev console.
Step2: Hover the cursor on the web page to identify the respective web element and in the dev console, we can see the highlighted HTML code for that particular web element with its associated attributes and values.
Example:

<a href="https://plgworks.com/blog/" class="text-fff navbarCss_navLink__jKMYL" title="BLOG">BLOG</a>

In the above code snippet example, we can see the part of HTML code.

  • <a -> represent tag name and any starting element followed by a symbol <  is called a tag name.
  • href, class, title -> these represent attributes.
  • "https://plgworks.com/blog/" ->  this represents the ‘attribute associated value’.

By using external Plug-Ins (ref selector hub link)
These plug-ins help us to easily identify the exact location of a WebElement on the web page. In the below-referred image, the plugin ( link) result shows the exact matching Xpath  of BLOG WebElement as soon as we hover on the webpage.

Another way to copy the WebElement path is by selecting web element -> right-click -> click on the plugin name from the menu options and copy the path as required in the script.

Different types of locators

Selenium drivers provide different types of methods to locate the web elements on the web page. In this blog, while explaining each locator, we have taken references to Java-Selenium code and its driver methods which we have used in demo examples.

  1. ID
  2. Name
  3. ClassName
  4. TagName
  5. Link text
  6. Partial link text
  7. XPath
  8. CSS Selector

1. ID

ID locator is used for locating a WebElement on the webpage by using the id attribute and its associated value present in the HTML code.
Syntax:
idLocator("id_related_attribute_value")
Example:
Here we used the edit box example to demonstrate how the id  locator can be used in ‘Selenium WebDriver’ to locate and automate the web element.
Image:

Description:
In the above image, we see an attribute id with its value as name in the DOM structure inside the dev-tool. We have to use the By.id() method in code and have passed the name which is the id of the input text box by which we can locate the element on the web page.
Code snippet:

driver.findElement(By.id("name")).sendKeys("John");

2. Name
A Name locator is used for locating a web element on the webpage by using the name attribute and its associated value present in the HTML code. Though the web page can have multiple elements with the same name attribute values, we have to make sure that the value of the name  attribute should be unique while finding WebElement.
Syntax:
nameLocator("attribute_associated_value")
Example:
Here we used the edit box example to demonstrate how the name locator can be used in ‘Selenium WebDriver’ to locate and automate the web element.
Image:

Description:
In the above image, we can see the attribute name with its value as email in the DOM structure inside the dev-tool. We used the By.name() method and have passed the email which is the name value of the input 'email' field by which we can locate the element on the web page.
Code snippet:

driver.findElement(By.name("email")).sendKeys("John@gmail.com");

3. ClassName
The className locator is used to identify the web element based on the class values from the DOM.
Syntax:
classNameLocator("attribute_associated_value")
Example:
Here we used the GET IN TOUCH button example to demonstrate how the class the locator can be used in ‘Selenium WebDriver’ to locate and automate the web element.
Image:

Description:
In the above image, we can see attribute class with value as text-fff Requestform_getInTouch__V0LyO px-30 py-12 rounded-4 font-semibold text-32 leading-[38px].Here we have to use the value as text-fff to pass in the method by.className() - because the className locator does not have support for compound class names.
Code snippet:

driver.findElement(By.className("text-fff")).click();

In the next blog, we will explain the Locators TagName, Link text, and Partial link text. Meanwhile for more info please refer link.

Ganesh Chavan

Ganesh Chavan

QA Test Engineer at PLGWorks.com