What are Locators in Selenium?

Locators are a way or technique to identify HTML elements of a web page such as button, textbox, image etc. Locators can be unique or duplicate. In this article we will discuss what are different types of locators, how to identify locators and how we can use these locators for automation framework.

What are different types of locators?

The different types of locators are given below:

1. Id –Finds elements whose ID attribute matches the search value. This is most commonly used and fast and effective.

2. name –Finds elements whose NAME attribute matches the search value.

3. ClassName – Finds elements whose class name contains the search value. Class is used to identify multiple elements. Not recommended

4. Link Text –Finds anchor elements whose visible text matches the search value. Link text is preferred to use over partial link text.

5. partialLinkText – Finds anchor elements whose visible text contains the search value. If multiple elements are matching, only the first one will be selected.

6. tagName – Finds elements whose tag name matches the search value.

7. CSS Selector– CSS is used to create style rules for webpages and can be used to identify any web element. Finds elements matching a CSS selector.

8. xpath – xpath is the language used to query the XML document. The same can uniquely identify the web element on any page. Finds elements matching an XPath expression.

Java syntax for locating elements in Selenium WebDriver

Locator	Syntax
Id	driver.findElement(By.id(“IdValue”));
name	driver.findElement(By.name(“nameValue”));
ClassName	​driver.findElement(By.className(“classValue”));
​LinkText	driver.findElement(By.linkText(“textofLink”));
partialLinkedText	driver.findElement(By.partialLinkText(“PartialTextofLink”));
tagname	driver.findElement(By.tagName(“htmlTag”));
CSS Selector	​driver.findElement(By.cssSelector(“cssValue”));
xpath	​driver.findElement(By.xpath(“xpathValue”));

Let's look at some examples:

Locating web elements By id

Right click on the textbox and then click on Inspect on the context menu. The document object model will open. In the DOM the Id attribute for the web element is highlighted as shown in the image below. Note: If the webpage is dynamic and the id’s generated are dynamic, we should not use locator by Id. So, if the Id has randomly generated number, it is a dynamic hence, we should not use it.

Jave Syntax:

driver.findElement(By.id(“IdValue”));

Example:

driver.findElement(By.id(“Form_getForm_Name”));

Locating web element By name

In the DOM the name attribute for the web element is highlighted as shown in the image below.

Java Syntax:

driver.findElement(By.name(“nameValue”));

Example:

driver.findElement(By.name(“Email”));

Locating web element By classname

In the DOM the classname attribute for the web element is highlighted as shown in the image below.

Java Syntax:

driver.findElement(By.className(“classValue”));

Example:

driver.findElement(By.className(“oxd-button oxd-button--medium oxd-button--main orangehrm-login-button”));

Locating web element By Link Text

In the DOM the Link Text attribute for the web element is highlighted as shown in the image below.

Java Syntax:

driver.findElement(By.linkText(“textofLink”));

Example:

driver.findElement(By.linkText(“PrivacyPolicy”));

Locating web element By Partial Link Text

In the DOM the Partial Link Text attribute for the web element is highlighted as shown in the image below.

Java Syntax:

driver.findElement(By.partialLinkText(“PartialTextofLink”));

Example:

driver.findElement(By.partialLinkText(“Policy”));

Locating web element By tagName

In the DOM the tagName attribute for the web element is highlighted as shown in the image below.

Note: Tag name can be used to locate multiple web elements

Java Syntax:

driver.findElement(By.tagName(“htmlTag”));

Example:

driver.findElement(By.tagName(“div”));

Customized Locator

The 2 customized locators are:

• Css Selector

• XPath

Locating web element By Css Selector

CSS selector is used when there is no unique id, name or class. CSS selectors locates the path to an element with a class, ID, or any other attribute containing the information needed.

There are different combinations for CSS selector.

• tag id - #

• tag class - .

• tag attribute - []

• tag class attribute - .[]

Note: CSS Selector locators are usually used for complex webpages where id is not unique. The combination will locate the element. if it located multiple elements only the first one is considered.

Java Syntax

​driver.findElement(By.cssSelector(“cssValue”));

Example by using tag and id:

​driver.findElement(By.cssSelector(“input#Form_getForm_Name”));

Example by using tag and class:

driver.findElement(By.cssSelector(“input.text”));

Example by using tag and attribute:

driver.findElement(By.cssSelector(“input[type=text]”));

Example by using tag class and attribute:

driver.findElement(By.cssSelector(“input.text[name=name]”));

Locating web element By XPath

Right click on the textbox and click Inspect on the context menu. The DOM will open. Right click on the highlighted part and the select Copy and then click Copy XPath. The Relative XPath is highlighted on the image below.

There are 2 types of XPath:

• Absolute XPath - Absolute XPath contains the complete path from the root element. An absolute location path starts with a slash ( / ) .

• Relative XPath - Relative XPath starts from the middle of HTML DOM structure. It starts with double forward slash (//). Relative XPath can search elements anywhere on the webpage.

Note: Relative XPath is preferred to use over Absolute XPath as it is easy for maintenance in long run. As, new elements may be added, or some existing elements may be removed from the webpage, which can break the Absolute XPath.

Java Syntax:

​driver.findElement(By.xpath(“xpathValue”));

Example:

Using Absolute XPath

driver.findElement(By.xpath(“/html/body/div[3]/div/div/section[2]/div/div[2]/div/div/div/form/fieldset/div[1]/div/input”));

Using Relative XPath

​driver.findElement(By.xpath(“//*[@id="Form_getForm_FullName"]”));

Summary

1. There are 8 types of locators in Selenium, By Id, By name, By ClassName, By LinkText, BY PartialLinkText,t By tagname, By Css Selector, By Xpath.

2. Do not use locators to locate auto-generated elements on the web page. Sometimes in a dynamic web environment, element attribute properties are generated at run time.

3. Id and Name attributes are preferred over other type of locators.

4. If elements are not found by the general locators like ID, name, class etc., then XPath is used to find an element on the web page.

5. Relative XPath are preferred over Absolute XPath as it is easy for maintainability.

6. CSS selectors are fast and effective when there are no unique elements.

7. Mostly we use the basic locators to find the web elements, we use custom locators only when basic locator fails to find the web elements.

Hope this article gives you an idea about locators in Selenium. Happy Learning!!