Locators in Selenium are one of the most powerful commands. Its ideally the building block of the Selenium automation scripts. It helps locate the GUI elements like – Text Box, Buttons, Check Boxes etc through which multiple user actions can be performed.
These are one of the important parameters for scripting, and if they end up being incorrect or brittle, they may lead to script failure. A good scripting base foundation requires elements to be located appropriately to ensure that the tests are faster, more reliable or has lower maintenance over releases.

How to locate a web element in DOM?

As we all know, the first thing to start with is to find the HTML element in DOM (Document Object Model), for which we need to grab the locator. We can follow the following steps to identify the web element in DOM on a web browser:

DOM can be accessed in Google Chrome either by pressing F12 or by right click on the web page and then by selecting Inspect (as shown in screenshot below)
Once we click on the “Inspect option,” it will open the Developer Tools console, as shown below. By default, it will open the “Elements” tab, which represents the complete DOM structure of the web page. Now, if we hover the mouse pointer over the HTML tags in the DOM, it will highlight the corresponding elements it represents on the webpage.

So, this way, we can easily search the HTML element in the DOM corresponding to a web element on the webpage.
Having understood this, let us dive deeper and understand the various types of locators in Selenium.

Types of Locators in Selenium

There is a diverse range of web elements like text box, id, radio button etc. It requires 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 locator
Name locator
linkText & Partial linkText
className
CSS Selector
XPath

Id Locator

The most popular way to identify web element is to use Id. Id’s are considered as the safest and fastest locator option and should always be the first choice even when there are multiple choices.
Now, let us understand the working of ID locator with the help of an example. I will launch Google Chrome and navigate to the practice wesite AutomationPractice

Here, I will try to locate the email text box using ID Locator.

On inspecting the above web element, you can see it has an input tag and attributes like class and id. Now, I will use the value of Id locator i.e. autocomplete to locate select countries text box.

Let us see how to automate the text box and send values to it using Id locator.

When you run the above java program, chrome driver will launch Google Chrome, redirect to https://rahulshettyacademy.com/AutomationPractice/ and will locate web element using ID and enter country name you entered.
I hope this gives you a clear understanding of how Id locator in Selenium works. Now let’s move further and understand how to use name locator.

Name Locator

This is also an effective way to locate an element with a name attribute. With this strategy, the first element with the value of the name attribute will be returned. If no element has a matching name attribute, then a NoSuchElementException will be raised.
Now, let us see the working of name locator with the help of an example. In the below image you can see, the name locator possesses a value called “enter-name”. The difference here is that you should use a name instead of id.

Now when we inspect this web element below is the DOM structure that is present, and we will use name attribute to identify this web element and enter some values in that.

Let us look at the below code to automate the text box.

In the above code I have find web element using name locator and send values in that text box. When you run the above code, the output will be the element will be located with name locator and “Rahul Shetty” will be entered in text box. Now, let us understand one more locator i.e. linkText.

linkText Locator

You can identify the hyperlinks on a web page using linkText. It can be determined with the help of an anchor tag (<a>). To create the hyperlinks on a web page, you can use anchor tags followed by the linkText.
Now, let us see the working of the linkText locator with the help of an example.

On inspecting “REST API” you can see that in DOM we have anchor tag. But this anchor tag does not have any name or id attributes. In such cases, you can use linkText locator.
We will make use of the text and use a linkText locator to write code as shown below.

On executing the above code, you will be redirected to REST API page.

In some situations, you may need to find links by a portion of the text in a linkText element. In such situations, you can use Partial Link Text to locate elements. Let us take the same example and try to locate it. I will choose “REST API” link. Now, instead of pasting full text I will just give it as Trouble. So we will modify code like this