January 18, 2024

Types of Selenium WebDriver Locators - Complete Guide

Selenium is one of the most famous Automation tools(also Suite of Tool) we have in the market to do the Automation Testing on Web Based Applications.It Doesn’t allow us to automate any desktop software application nor test any mobile application using Selenium.

Whenever we Automate a web application we need to interact with components in the web application like textfield, text area field, radio button, check boxes etc. This is one of the biggest reasons why we need locators in Selenium.

Locators in Selenium are of 8 types as shown in below

Locators in Selenium	Detail Description About them
Id	Element with the id attribute value matching the DOM(Document Object Model) in html will be returned.
Name	Element with the name attribute value matching the DOM(Document Object Model) in html will be returned.
TagName	Element with the xpath syntax matching the DOM(Document Object Model) in html will be returned.
ClassName	Element with the matching class attribute name the DOM(Document Object Model) in html will be returned.
Xpath	Element with the xpath syntax matching the DOM(Document Object Model) in html will be returned.
CssSelector	Element with the matching CSS selector will be returned.
LinkText	Element with the link text value matching theDOM(Document Object Model) in html will be returned.
PartialLinkText	Element with the partial link text value matching the DOM(Document Object Model) in html will be returned

Look at below code here we are trying to locate the element on a web application and selenium by default is giving all 8 locators by default. We Automation Testers have the freedom to choose the type of locators we want based on your requirement.

ID attribute values are unique for each element in the DOM of HTML page which makes it a very easy and common way to locate elements using ID Locator. Front end developers write html code with id value unique almost all the time. It is also the fastest way to locate elements in the DOM of HTML.

Let’s have a look:
1. On the website below “https://grotechminds.com/registration/” , do the right click on the “First Name” text field.

B). Now click on inspect button

Here you can see the component FirstName is made up of a tagname called as <input> and it is made up with attribute name id which has the value as “fname”.

				
					Syntax will be:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://grotechminds.com/registration/");
	driver.findElement(By.id("fname"));
//code snippet

Name attribute values help us to locate elements in the DOM of HTML page to perform actions. Name locator can be used for locating Radio buttons,CheckBoxes,Text Field and Text Area Fields. It works exactly like an ID locator but it need not to be unique.

Let’s have a look:

A). On the website below “https://grotechminds.com/registration/” , do the right click on the “First Name” text field.

b) Now click on inspect button

Locators in Selenium are of 8 types as shown in below

c) Here you can see the component FirstName is made up of a tagname called as <input> and it is made up with attribute name “name”which has the value as “fname”.

Locators in Selenium are of 8 types as shown in below

				
					Syntax will be:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://grotechminds.com/registration/");
	driver.findElement(By.name("fname"));
//code snippet

In the html code every element will be made of tagname. We can use those tagname in Selenium to locate the web element. Some common tagname in html codes are input,div,button,anchor tag,form etc

Let’s have a look:

A). On the website below “https://grotechminds.com/registration/” , do the right click on the “Religion” dropdown.

b) Now click on inspect button

c). Here you can see the component Religion is made up of a tagname called as <Select>.

				
					Syntax will be:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://grotechminds.com/registration/");
	driver.findElement(By.tagname("select"));
//code snippet

XPath stands for XML path language.Xpath is one of the best locators for locating dynamic values. Though we have lot of ways to write xpath for elements of the best syntax of writing xpath is

Let’s have a look:

A). On the website below “https://grotechminds.com/registration/” , do the right click on the “Religion” dropdown.

b) Now click on inspect button

c) Here you can see the component Religion is made up of a tagname called as <Select>

Now lets write xpath for this component using below syntax

//tagname[@attribute_name=’Attribute_Value’]

				
					syntax will be:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://grotechminds.com/registration/");
	driver.findElement(By.xpath("//select[@id='Relegion']"));
//code snippet

LinkText locators can be used whenever the tagname is anchor tag(<a>). Most of the tagname <a> will have a linktext

Let’s have a look:

On the below website “https://grotechminds.com/automate-me/” , do the right click on Agree checkbox.

Upon clicking on the Read More link you can see its tagName is anchor tag <a> and its text is Read more.

				
					Syntax will be:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://grotechminds.com/registration/");
	driver.findElement(By.linkText(" Read More "));
//code snippet

PartialLinkText locators can be used whenever the tagname is anchor tag(<a>). Most of the tagname <a> will have a linktext. It is almost like a link text locator only difference is here we take the partial name of LinkText.

Let’s have a look:

A). On the below website “https://grotechminds.com/automate-me/” , do the right click on the Read More link of X Path.

B). Upon clicking on on Read More link you can see its tagName is anchor tag <a> and its text is Read more.

We can use this locator for only those cases when TagName is anchor Tag.

				
					Syntax will be:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://www.google.com/");
	driver.findElement(By.partialLinkText(" Read"));
//code snippet

CssSelector is one of the fastest locators among all the locators we have in Selenium. CssSelector should be chosen if there is no id and name locators attribute present even over X Path.

Let’s have a look:

C). On the below website “https://grotechminds.com/registration/” , do the right click on the “Password” text field.

D). Upon clicking on on inspect button you can see its tagName is <input , so lets start writing its CssSelector now using its tagname and id attribute value.

As shown in above image CssSelector of above component can be written as input#password

CssSelector syntaxes can be

CSS Combinations	Syntaxes
With tagname and id	tag#id
With tagname and class	tag.class
With tagName and Attribute Name	tag[attribute=value]
With TagName ,ClassName and AttributeName	tag.class[attribute=value]

				
					Example:
ChromeDriver driver=new ChromeDriver();
	driver.get("https://grotechminds.com/registration/");
	driver.findElement(By.cssSelector("input[id='1']"));
//code snippet

In Selenium we first find the elements, later we locate them and then perform action. Finding the elements can be done with two methods like findElement and findElements. Locating can be done with 8 locators, the one mentioned above. Performing an action can be like clicking on an element,clearing the text message present in a text box etc.

In conclusion, understanding the various types of locators in Selenium WebDriver is essential for creating robust and effective test scripts. By mastering the use of id, name, class name, xpath, css selector, and other locators, you can improve the reliability and maintainability of your software testing framework. Each type of locator has its own advantages and best use cases, so it’s important to familiarize yourself with all of them. With the knowledge gained from this guide, you can confidently select the most appropriate locator for each element in your web application, leading to more efficient and stable automation testing. Keep practicing and experimenting with different locators to become a proficient Selenium WebDriver test automation engineer.

Popular Courses

Digital Marketing
Certification Course