Locators in Selenium Webdriver

 Introduction to Locators

We all know that a website contains a number of elements so it's typical to find any specific element on a webpage. So in Selenium we have Locators which helps to find elements from the website.

Locators are defined as a unique command that is used to identify web elements with in the webpage. Which is used to instruct Selenium IDE which GUI element like- Button, textbox, checkbox, alerts, input-fields needs to be operated. As GUI elements are predefined but in automation selecting an accurate GUI element being a typical task. If you chose a wrong GUI element then your task will not be performed it will show an error like "element not found". Therefore, before executing any task ensure that you have selected a correct locator.

Now after understanding this, let's dive deeper into various types of  Locators.

After entering into a webpage you need to have an accurate approach of selecting a web element. And here you will get a number of web-elements like- Buttons, check-field, text-field, id, name, class etc. Therefore , you need to be properly introduced with these elements. Selection of an effective locator will lead you to be a stable process of automating script. Here are a few Locators of Selenium

These all will help us to locate different types of elements on a webpage. They are:

1. ID Locator

2. Name or class Locator

3. Link & partial-text locator

4. XPATH

5. CSS Selectors

Let's discuss them one-by-one:

1. ID Locator 

Id locator is one of the most usual locators, the reason is that an id in a webpage will always be unique. Locating elements through ID is considered as the safest and the fastest method.

Now let's take an example to get better understanding, 

First of all launch WebDriver, get amazon.com and search for any product

id="twotabsearchtextbox"

CODE WILL BE:

Results will be:

2. Name & Class Locators:

Name & Class locators are also a good choice to locate elements. While using name or class locator the element with value name or class_name will be returned otherwise it will give an exception NoSuchElementFound. Now let's take an example for name and class locator

As we are already on amazon, we have already send our input on search bar now we will search that item using class locator let's see how:

Here class_name is "nav-search-submit"

CODE WILL BE:

Name_Locator

In case of name locators we have an attribute "name" whose value is "email".

CODE WILL BE:

3. Link & partial-text locator

Hyper-Links can be located using link-text. It can be determined with the help of an anchor tag(<a>). To create an hyperlink on web-page, we use anchor tags.

Now let's take an example that that we want to read Privacy notice of amazon.

here we have to locate Privacy notice link using partial-link-text

CODE WILL BE:

now when you run this code you will be redirected to Privacy Page. But now you have a question in mind that if we have name or class than why we are using this partial-link-text locators, we are using this because Privacy policy is an anchor text so it don't have any class, name or id locator that's why we are using partial-link-text.

4. CSS Selector

The CSS is basically used to provide styling to the elements of the web page also they can be used to locate elements into the webpage. The CSS is also one of the best way to locate elements.

Now let's take an example that we want to search any product on amazon, for we first I'll inspect the search bar which is also an input field, then with the help of CSS selector I'll send  of keys.(CSS selector starts with "#"). So, now my code goes like this

CODE WILL BE:

When you will run this piece of code you will be redirected to amazon.com and will enter input in search bar. That's how it works.

5. XPath

XPath helps in locating elements on the web page with the help of  xml expression. XPath is language to query xml document. XPath is also a good strategy to locate elements which consist of path expression with some conditions. 

expression will be something like this

Xpath: //tagname[@attribute='value']

Now let's see with an example that how XPath locator works. First of all I have to launch google chrome and then navigate to google.com, this time I will try to locate search bar using XPath. When I inspect the search bar, here you can see an input tag with some attributes like id, name. As I have mention the expression above to locate XPath we need a tag name that is input and an attribute that may be id or name it's all up to you.

CODE WILL BE:

Now open the search box in developers tools then start with // and then type tag name i.e. input.

//input now we need an attribute and it's value as well, here i'm taking 'name' as our attribute whose value is 'q' then the expression will be:

//input[@name='q']

when you will run this code it will automatically search for selenium tutorial on browser. So that's how you can use xpath locator in selenium.

This is all about various sorts of Locators in Selenium. I hope it helped you and enhanced your insight. Thanks for reading so far.