Scientech Easy Locators in Selenium | Types of Locators with Example | Scientech Easy

Monday, December 10, 2018

Locators in Selenium | Types of Locators with Example

In this tutorial, we will learn very important and basic topic locators in Selenium. Locators help us to find the elements on the web page using webDriver API. When we are working with WebDriver on a web application, we will require to find elements on the web page. All the methods in the Selenium WebDriver search the element first to perform the actions on the web application such as clicking, selecting, typing etc. 
The locating an element is one of the most important tasks in the selenium tests but there is no fixed strategy that you can follow to find an element uniquely. It totally depends on the user ideas and their comfort level in locating the web elements. So, let's see in detail.

Locators in Selenium

Locator is like an address that is used to identify the web element uniquely within the webpage. The basic use of locators is to identify the element or object on the webpage accurately. Selenium WebDriver uses the element locators to interact with elements present in a web page. All the elements that are present on a webpage are called Web elements which can be located using any kind of locator type. 
You can see the view of HTML code written for the web element "Username" in the facebook login page in the picture.
Locators in Selenium WebDriver with example.

Selenium WebDriver uses the "findElement(By.locator())" method to find an web element on a web page. This method search for an element based on the criteria given to it. If a matching element is found, it will return a web element object. If selenium is not able to find any matching element with search criteria then it will throw NoSuchElementException exception.
Selenium also provides to use "findElements(By.locator())" method to find multiple elements on the web page. This method will search and return a list of WebElement object that matches with the search criteria.

Types of Locators in Selenium WebDriver

Selenium WebDriver uses 8 types of locators to locate an element on the web page. They are as follows:
1. ID Locator
Id locator is the safest and fastest locator to locate an element based on the value of "ID" attribute on a web page. It is the most efficient and preferred way to find a web element. Since Id is unique for each element on the web page so it can be easily identified. It is always the first choice for the testers. It is mostly Account number or college name that will be unique. 

The following is the syntax to use locator type.
WebElement element=driver.findElement(By.locatorType("Attribute value"));
     driver ➨ Object reference variable of the WebDriver object.
     WebElement ➨ Return type of the findElement() method.
     element ➨ Variable used to store the returning web element.
     By ➨ By is a class which extends java.lang.Object. It provides a mechanism which is used to locate elements within a document.
For example:
    WebElement element=driver.findElement("college name")); 
    The above code can also be written directly as
          driver.findElement("college name")); 
Unfortunately, you will get in many cases where an element does not have a unique id. In this case, you will have to choose an alternative locator to find the element on the web page. 

2. Name Locator
Name locator is the second safest and fastest locator to locate an element based on the value of "name" attribute on the web page. The name cannot be unique for each element all the times. If there are multiple elements with the same name on a web page then Selenium will always perform the action on the first matching element. 
WebElement element=driver.findElement("Attribute value"));
For example:
    < input name="firstname" class="required" type="text"/> WebElement register= driver.findElement("firstname"));
3. ClassName Locator
Class Name locator finds an element based on the value of "class" attribute on the web page.
WebElement element=driver.findElement(By.className("Attribute value"));
For example:
    WebElement paper=driver.findElement(By.className("sample"));
4. TagName Locator
TagName locator is used to finding an element from the group elements like checkboxes, dropdowns etc. It locates an element by its tag name.
WebElement element=driver.findElement(By.tagName("Attribute value"));
For example:
    WebElement element=driver.findElement(By.tagName("div"));
5. LinkText Locator
This locator finds an element by the link text. If there is one unique element on the web page, you can easily find an element with the link text. But if there are multiple links with the same link text such as repeated header and footer web page, In such case, Selenium will select the first matching element with the link.
WebElement linktext=driver.findElement(By.linkText("Atrribute value"));
For example:
    <a href=">Download</a>" WebElement download=driver.findElement(By.linkText("Download"));
6. Partial LinkText Locator
This locator locates an element by a partial match of its link text. It works in the same way as of link text. 
WebElement partialLinktext=driver.findElement(By.partialLinkText("Attribute value"));
For example:
    < a href="">Download Selenium Server</a> WebElement download=driver.findElement(By.partialLinkText("Download"));
7. CSS Selector Locator
This locator finds an element by the CSS selector on the web page. CSS selector makes the execution of test scripts faster as compared to XPath locator. It is the best way to find an element on the web page. The CSS stands for Cascading Style Sheets.
WebElement element=driver.findElement(By.cssSelector("Attribute value"));
For example:
    WebElement element=driver.findElement(By.cssSelector("input#email"));
You can check for W3C CSS Locators here.
8. XPath Locator
XPath stands for XML (Extensible Markup Language) Path language. It is a query language which is used to search and select the node in an XML document. All the major web browser support XPath. Selenium web driver supports XPath to find the location of any element on a web page using XML path expression.
XPath produce reliable locator but the performance of XPath is slower than CSS selector.

Syntax for XPath
The path of the element at the webpage is selected by XML path syntax. The standard syntax for creating XPath is shown below:
     //  ➨ It selects the current node.
    Tagname ➨ It is the name of the tag of a particular node. For example, input.
    @ ➨ It selects attribute like id, name, className etc.
    Attribute ➨ Name of the node. For example, type, class, name, id etc.
    Value ➨ value of the attribute.
For example:
    XPath=//input[@id='user-message'] WebElement username=driver.findElement(By.xpath("//input[@id='user-message']"));
Types of XPath
There are two types of XPath. They are:
1. Absolute XPath
➲ It is the easiest way to find the element but if any changes are made in the path of the element then this XPath gets failed. So, This is the main disadvantage of absolute XPath.
➲ It begins with a single forward slash (/) which selects the element from the root HTML node. The example of an absolute XPath expression of the element is given below:
    Absolute XPath=/html/body/div/div/form/input. WebElement userName=driver.findElement(By.xapth("/html/body/div/div/form/input"));
2. Relative XPath
➲ It starts from the double forward slash(//) and selects the element from anywhere on the webpage.
➲ It is the best practice to find an element through a relative XPath and helps us to reduce the chance of "element not found exception".
➲ With a relative XPath, we can locate an element directly irrespective of its location in the DOM. The example of relative XPath is given below:
    Relative XPath=//input[@class='social-media'] WebElement username=driver.findElement(By.xpath("//input[@class='social-media']"));
Note: The priority of locator type in this order: id > name > css > xpath.
Final words 

We hope that this tutorial has covered all the important topic related to Locators in Selenium. The order of priority of the locator type is given above that is important to remember. 
Thanking you for reading.