Locators in Selenium

The ability to locate and interact with web elements is one of the key aspects in Selenium automation.

Locators in Selenium are used to identify and interact with specific elements like buttons, input fields, and links.

Below are different types of locators available in Selenium:

Locators	Description
ID	To find the element by id of the element
Classname	To find the element by Classname of the element
Name	To find the element by name of the element
Link text	To find the element by text of the link
Partial link text	To find the anchor elements whose visible text contains the search value. If multiple elements are matching, then only the first one will be selected.
Tag name	To find the element using the tag name
Css selector	Css selector is used to locate elements without class, name or id attributes
Xpath	Xpath is used to identify dynamic elements and traverse between various elements of the web page​

Name Locator:

Locating elements by name in Selenium is a common method for finding and interacting with web elements based on their "name" attribute in the HTML code. This is not a recommended option when there are multiple elements with the same name attribute.

Example:

In the below example, the First name field can be identified by using the name “firstname” attribute.

Link for website: https://www.techlistic.com/p/selenium-practice-form.html

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

Below is the HTML source for the First name input field:

ID Locator:

In this approach, We use the unique ID attribute to identify the web element.

It's the fastest and most reliable method when elements have unique IDs.

Example:

Link for website: https://www.facebook.com/

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

In the below HTML component, there are multiple attributes such as class, name and id. But Id is preferred as it is an unique identifier.

Classname Locator:

Elements with a specific class attribute can be located using this locator. One thing to make a note is that compound class names are not permitted to locate the web element.

Example:

Link for website: https://www.techlistic.com/p/selenium-practice-form.html

 driver.findElement(By.className(“btn btn-info”));

Link text Locator:

This locator is used to identify the links by their text content and these are typically used for links.

Example:

Link for Website: https://petstore.octoperf.com/actions/Catalog.action

The HTML component for fish in the above snippet looks like below. The link text is the text displayed in the link.

 driver.findElement(By.linkText(“complete Text”));

Partial link text Locator:

Partial link text locator can be used to locate elements that contain a specific partial text or substring within their text content.

Example:

driver.findElement(By.partialLinkText(“partial link text”));

Tag name Locator:

The tag name locator can be used to locate elements based on their HTML tag name.

This is useful when you want to find multiple elements on a web page that share the same HTML tag.

Example:

Link for website: https://www.amazon.com/

In this example we are locating the elements with tag name “a” and assign them to a list.

We find the number of elements by using size method which gives the total number of links in that web page.

List<WebElement> links=driver.findElements(By.tagName("a"));
int noOfLinks=links.size();

CSS Locator:

CSS (Cascading Style Sheets) Selectors in Selenium are used to identify and locate web elements based on their id, class, name, attributes and other attributes. CSS selectors offer great flexibility, allowing you to target elements by ID, class, attribute values, element hierarchy, etc.

Example:

If the web element has the id attribute, then the syntax would look like :

driver.findElement(By.cssSelector(“<tagname>#<id value>”));
driver.findElement(By.cssSelector(“<#id value>”));

If the web element has class attribute, then the syntax would look like:

driver.findElement(By.cssSelector(“<tagname>.<class value>”));
driver.findElement(By.cssSelector(“.<class value>”));

Apart from “id” and “class”, other attributes can also be used to locate web elements using CSS selector.

Below is an other example:

driver.findElement(By.cssSelector(“<tagname>[href=’<href value>’]”);

Xpath Locator:

The Xpath locator strategy can be used to locate elements based on their XPath expressions. XPath is a powerful language for navigating and selecting elements in an XML or HTML document.

When to choose xpath?

Xpath is used when there are no unique properties to find web elements.

Types of xpath:

• Absolute xpath/lengthy xpath : You have to start from origin and it’s not a good practice to use this because it is very sensitive to changes and it will take lot of time to find the web element which leads to timeout error

Absolute Xpath starts with single slash/

• Relative xpath : Instead of starting from origin, you go and find an element near the destination element which is having any unique property

Relative Xpath starts with double slash//

• Structure of xpath

Xpath=//tagname[@attribute=’value’]

 driver.findElement(By.xpath(“//tagname[@attribute=’value’]”));	

If the HTML property contains text, then the xpath looks like this

Xpath=//tagname[text()=’copy paste the text here’]

You have to add /.. to go from child to parent

• Complex relative xpath

You can skip some levels or tags inbetween by adding double slash

Examples

Xpath=//*[text()=’Selenium’]

Xpath=//*[contains(text(),’Selenium’)]

Xpath=//*[contains(@name, ‘Selenium’)]

Xpath=//*[@type='submit' or@name=‘Selenium’]

Xpath=//label[starts-with(@id,’Selenium’)]

Dynamic xpath= “//div[@id=‘vijay’]/div[”+i+”]/a”

Finally, here are some of the best practices to be followed while using locators:

· Prefer unique attributes to avoid ambiguity.

· Use relative XPaths and CSS selectors for maintainable tests.

· Implement proper waits to ensure the page is fully loaded before interacting.