Locators in Selenium WebDriver | Selenium Tutorial

In this post, we are going to learn about how to locate elements in the Web application, because as an automation tester its one of the important task to find out the elements in the application after that only you can go ahead to write your automation script. So in this post, we are going to discuss how to find any web elements easily and some other ways.

So here we are going to learn the different locators one by one along with some real-time examples.

What is Locators in Selenium?

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

That’s why in selenium WebDriver we have multiple locator by using we can easily find out the elements easily. With the locators, we are using “findElement/findElements” syntax which parallel helps us in locating the elements.

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

Different Types of Locators In Selenium WebDriver

In a web page, we can find out different types of web elements like text box, id, radio button, etc. for locating those elements we need an effective and accurate approach to identify these elements. 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 details:

ID Locator

In a web page for some elements, ID’s are unique, which is a common way to locate the element using the ID locator. As per the W3c standard, ID’s are supposed to be unique for the page so that it makes the most reliable locator. ID locators are one the fastest and safest locators out of all locators.

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

Name Locator

Like ID locator sometimes we can use Name locator to identify the elements on the web page. For a page the name locator details are not unique, if there are multiples elements have the same name locator on a page then your test may fail.

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

Class Name Locator

Its 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 which have matching the specified tag name.

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

Link Text Locator

Most of the web pages we can see the Link, So to handle such hyperlinks (links) elements in web page use can use the Link Text locators. If there are multiple link text elements are present in a web page then the first element will be selected.

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

Partial Link Text

For handling, we are using link text but in some situations, we need to find out 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 DOM (document object model) of the web page. XPath is more powerful and flexible as compared to the previously discussed locators. We can find out any element on a web page by using one or more than one XPaths and also we can express other locators as an XPath. Excepting CSS Selectors, no other locators share this feature. If you have written a good XPath then its a robust but a poor XPath will not work when the application changes.

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

CSS Selector

CSS (short for Cascading Style Sheets) mainly used to style the elements of the web page. But by using CSS selector we can easily locate any element on a web page and also we can able to perform any action on that element. The main benefits of a CSS selector are its 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 you can right-click on the desktop and choose to inspect.
• After Click on Inspect, you will get a new console window which is also known as Developers tools.
• A section name as ‘Element’ would be default opened. This is where we locate elements through. To the leftmost, you can observe a mouse icon. As you hover on it, it would state ’select an element in the page to inspect it’. Click on it and navigate to the element you wish to locate to. As you click on the element you want to locate, the DOM would 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 Tutorial about locators can help you find the elements on the web page. if we have missed something to mention then you can comment in the comment section.