Jan 124 min read

Selenium Locators

Selenium locators are said to be one of the most powerful commands that act as building blocks of automation scripts. With the help of selenium locators, we can locate the application GUI elements to perform the desirable operations. These are one of the most sensitive parameters of Selenium where a little mistake in creating a selenium locator can fail the automation script, hence, the entire automation suite is dependent on selenium locators.

Selenium supports various kinds of locators. Let's understand the concept of "Selenium Locators" in depth by covering the following topics:

What are locators in Selenium?
How to locate a web element in DOM?
What locators are supported by Selenium?

What are Locators in Selenium?

A locator is a way to identify the web elements uniquely on the web page. Locators in Selenium enables testers to select and act on an HTML DOM (Document Object Model) element such as text box, button, checkboxes, links, etc present in the webpage.

How to locate a web element in DOM?

Follow the below steps to locate WebElements in the DOM (Document Object Model):

Open the target application and right-click on any web element and select inspect option.
By default, it will open the "Elements" tab, which represents the complete DOM structure of the web page (as shown in the below screenshot).
There is a mouse icon on the left-most side of the ‘Inspect Element’ tool. We can mouse hover it and navigate to the element we wish to locate. It automatically highlights the corresponding HTML element in DOM.

What locators are supported by Selenium?

Selenium supports 8 types of locators using which we can identify a web element uniquely on the webpage. Below figure shows the types of locators in which xpath and css are customized locators.

Locating elements in Selenium WebDriver is performed with the help of findElement() and findElements() methods provided by Selenium WebDriver and WebElement class.

findElement() method is used to find the single WebElement from the Webpage and perform actions on it.

driver.findElement(By.LocatorStrategy(“Locator Value”)

findElements() method is used to retrieve the list of WebElements from the Webpage. This method returns the list of WebElements through the list interface, we can iterate it and perform operations on it.

List <WebElement> elementname = driver.findElements(By.LocatorStrategy(“Locator Value”))

Let’s see how to use these locators with examples:

1. Locating Web Element by "ID":

ID locator is used to locate the WebElement by the value of the id attribute. Mostly the ids are unique for the WebElement. Here we need to pass the value of the id attribute as the parameter.

Note: If ID's are generated dynamically, we should not use the ID attribute to locate the web element.

Syntax: driver.findElement(By.id(“element id”));

Example: driver.findElement(By.id(“ap_customer_name”));

2. Locating Web Element by "Name":

Name locator is used to identify the WebElement by the value of the name attribute.

Syntax: driver.findElement(By.name(“element name”));

Example: driver.findElement(By.name(“customerName”));

3. Locating Web Element by "ClassName":

Here the WebElements are accessed with the help of the class name attribute.

Syntax: driver.findElement(By.className (“element class”));

Example: driver.findElement(By.className(“a-input-text a-span12 auth-autofocus auth-required-field'”));

4. Locating by "TagName":

TagName locator is used along with the findElements() method to identify multiple similar items in the Webpage. It is used to locate the WebElements with the help of the HTML tags such as input, button, anchor tag(a),div, etc.

Syntax: driver.findElement (By.tagName (“HTML tag name”));

Example: List<WebElement> lists=driver.findElements(By.tagName(“div”));

5. Locating by "LinkText" and "partialLinkText":

Linktext and partialLinkText both are similar in functionality and locate web elements by using hyperlink text. We can use them only for elements containing anchortag<a>. In single page we can find multiple hyperlinks with the same text in such case selenium always choose first element.

When we inspect the Best Sellers it starts with <a> since its a hyperlink.

LinkText: Syntax: driver.findElement(By.linkText (“linktext”));

Example: driver.findElement(By.linkText(“Best Sellers”));

partialLinkText:

Syntax: driver.findElement(By.partialLinkText (“partiallinktext”));

Example: driver.findElement(By. partialLinkText(“Best”));

Both are similar in functionality but minor difference is for linktext we have to use complete text whereas for partial link text we use Part of the text. Basically we use partial text only when we have a long link text.

Now let's see about the Customized Locators.

1. Locating by "XPath" :

XPath uses the XML expression to locate on the webpage. Similar to CSS selectors, Xpath is used to locate and access any element present in a webpage even when they have dynamic properties.

Syntax: Xpath= //tagname[@Attribute=’value’]

Example: driver.findElement(By. xpath(“//input[@id='twotabsearchtextbox']”));

Here we are using the input tag and id attribute to identify the element "Search Box" using xpath. When you want to check our xpath is right or wrong we can use shortcut key ctrl+f and we can type there as shown in below image, then it will Show the element in yellow color .

2. Locating by "CSS Selector" :

CSS (Cascading Style Sheets) 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.

a) Tag and ID in CSS selector:

Syntax: css=(Html tag )(#) (value of the ID attribute)

Example: driver.findElement(By.cssSelector(“input#continue”));