Locators in Selenium WebDriver : CSS Selector, XPath [2024]

What We Are Learn:

In this post, we will learn how to locate elements in the web application because, as an automation tester, one of the important tasks is to find the elements in the application. After that, you can go ahead and write your automation script. So, in this post, we will discuss how to find any web elements easily and some other ways.

So here, we will learn the different locators individually and some real-time examples.

What are Locators in Selenium?

In Selenium, we use locators to find the elements in a web application. So locators are nothing but addresses. Using them, we can uniquely identify the web elements in a web page. That’s why these are the important parameters of automation scripting. If you use the wrong locator information for an element, then it may lead you to script failure. Hence, using the locators in the test scripts makes the tests faster and more reliable and gives low maintenance over the releases.

That’s why in Selenium WebDriver, we have multiple locators by which we can easily find out the elements. We use the “findElement/findElements” syntax with the locators, which helps us locate the elements.

Let’s dive deeper and try to understand the various types of locators in Selenium.

Different Types of Locators In Selenium WebDriver

We can find different web elements on a web page, like text boxes, IDs, radio buttons, etc. To locate those elements, we need an effective and accurate approach. To identify web elements accurately and precisely, selenium makes use of different types of locators. They are as follows:

ID
Name
Class Name
Tag Name
Link Text & Partial Link Text
XPath
CSS Selector

Let’s see each of the locators in selenium in detail:

ID Locator

IDs are unique in a web page for some elements; a common way to locate the element is using the ID locator. As per the W3c standard, IDs are supposed to be unique for the page to make the most reliable locator. ID locators are one the fastest and safest locators out of all locators.

findElement(By.id("IdName"));

Name Locator

Like an ID locator, sometimes we can use a Name locator to identify the elements on the web page. The name locator details are not unique for a page, and if multiple elements have the same name locator on a page, then your test may fail.

findElement(By.name("Name"));

Class Name Locator

It’s the same as the Name locator, but with this locator, you can find the element which matches the value specified in the attribute name “class”.

findElement(By.className("Element Class"));

Tag Name Locator

Like the other locator, we can use the Tag name locators to find the elements matching the specified tag name.

findElement(By.tagName("HTML Tag Name"));

Link Text Locator

In most web pages, we can see the Link, So to handle such hyperlinks (links) elements in web pages, use the Link Text locators. The first element will be selected if multiple link text elements are present on a web page.

findElement(By.linkText("LinkText"));

Partial Link Text

For handling, we use link text, but in some situations, we need to find the link by the portion of the link text; in that case, we need to use partial link text.

findElement(By.partialLinkText("partial link text"));

XPath Locator

XPath is a language by which we can traverse the web page’s DOM (document object model). XPath is more powerful and flexible than the previously discussed locators. We can find any element on a web page by using one or more than one XPath, and we can also express other locators as an XPath. Excepting CSS Selectors, no other locators share this feature. If you have written a good XPath, it is robust, but a poor XPath will not work when the application changes.

findElement(By.xpath("XPath"));

CSS Selector

CSS (short for Cascading Style Sheets) is mainly used to style the elements of the web page. But by using CSSSelector, we can easily locate any element on a web page and perform any action on that element. The main benefits of a CSS selector are that it is less complex and faster than XPath.

findElement(By.cssSelector(tag#id));
findElement(By.cssSelector(tag.class));
findElement(By.cssSelector(tag[attribute=value]));
findElement(By.cssSelector(tag.class[attribute=value]));

Steps to Find Elements in DOM

Open your Web Application in any browser and click F12, or right-click on the desktop and choose to inspect.
After Clicking on Inspect, you will get a new console window, also known as Developers tools.
A section named ‘Element’ would be opened by default. This is where we locate elements. To the leftmost, you can observe a mouse icon. As you hover over it, it states to select an element on the page to inspect it. Click on it and navigate to the element you wish to locate. As you click on the element you want to locate, the DOM will be highlighted for that element.
After clicking on the element in the element tab, you can see the highlighted and from where you need to get your values for the locators.

Based on the DOM, you can choose the appropriate locator to locate the elements.

We hope this locator tutorial can help you find the elements on the web page. If we have missed something, you can comment in the comment section.

Locators in Selenium WebDriver | Selenium Tutorial