Locators in Selenium

As an Automation tester, we all know that for testing web-based applications, we need to perform specific actions on the HTML elements. While we do automation on applications, automation tools should be capable of performing the same operations on the HTML elements that a human is capable of.

Here comes a question, how do these automation tools identifies on which element they have to perform a specific operation?

Answer is so simple using “Locators in Selenium”

· What are Locators in Selenium?

· How to Locate a Web element in DOM?

· Types of Locators?

What are Locators in Selenium?

Locators defines “an address that identifies the web elements uniquely” on the web page. We use locators to access the HTML elements from a web page. We can use locators to perform actions on textboxes, checkboxes, links, radio buttons and other web elements.

How to Locate a Web element in DOM?

To find the HTML element in DOM (Document Object Model), we need to use a locator. Steps to identifying the web element in DOM on a web browser:

· Right click on the web page and click on inspect option.

· BY default, it will open the Elements tab(right side as shown in screenshot),

Which represents the complete DOM structure of the web page. If we hover the mouse pointer over the Html tags in the DOM, it will highlight the corresponding element on the web page

· To find the web element in DOM click on the Mouse Icon (right side page on the top corner with orange arrow) and then select the web element on the web page. It automatically highlights the corresponding HTML element in DOM.

Types of Locators?

There are 8 different locators as shown in the above image which are used to identify a web element uniquely on the web page. To access all these locators, selenium provides By class, which helps in locating elements within DOM. Here we have Locators and customized locators

· Locators are id, name, Link text, partial link text, classname, tagname

· Customized locators are CSS Selector and Xpath

Before going to know in detail about locators lets see one sample example to know what are tagname, attribute and value.

Example:

Here in this example input is tagname, class &name are attribute, inputtext & email are values.

1. Locating By “id”:

This is the most common way of locating elements considering that they are unique to each element in DOM. Based on W3C, id for a web element always needs to be unique. Id is one of the fastest and unique way of locating web elements. But sometimes we see dynamic ids are generated for dynamic web pages that time we don’t prefer to use id attribute

<input type=”text” class=” inputtext_55rl_6luy” name=” email” id=”email”> HTML tag contains attribute “id” in the input tag. Here id =”email” which we use to locate the element in the web page for email textbox as shown above. Example: driver.findElement(By.id(“email”));

2. Locating By “name”: An element can be defined by using multiple attributes, one such element is “name”. locating elements by Name are very similar to id. They may or may not have unique value, if multiple elements have the same value of “name” attribute then it will select the first value in the page. So we always make sure the value of the attribute should be unique. In case no such name matches with the defined attribute value, it shows NoSuchElementFound Exception. Example: <input type=”text” class=” inputtext_55rl_6luy” name=” email” id=”email”> HTML tag contains attribute “name” in the input tag. Here name =”email” which we use to locate the element in the web page for email textbox as shown above. Example: driver.findElement(By.name(“email”)); //vaiid driver.findElement(By.name(“eail”)); //NoSuchElementFound Here in this example we are providing invalid attribute value as “eail” In such cases selenium shows NoSuchElementFound.

3.Locating By “className”: Class Name locator is used for locating web element through “class” attribute Example: <input type=”text” class=” inputtext_55rl_6luy” name=” email” id=”email”> HTML tag contains attribute “name” in the input tag. Here class=”inputtext_55rl_6luy” which we use to locate the element in the web page for email textbox as shown above. driver.findElement(By.className(“inputtext_55rl_6luy”));

4.Locating By “linktext” and “partialLinkText”: Linktext and partialLinkText both are similar in functionality as well they are case-sensitive and used for hyperlink text use them 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 on sign In it’s a hyperlink so its starting with <a> <a class=”login” href=”http://automationpractice.com/index.php?controller=my-account"”>Sign in</a> LinkText Example: driver.findElement(By.linkText(“Sign in”)); partialLinkText Example: driver.findElement(By.partialLinkText(“Sign ”)); They 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

5.Locating By “tagName”: TagName is used to identify elements in a web page such as Input, div, anchor tag(a), buttons etc., It is very helpful when we want to search how many links in a webpage or anything like how many input tags are there. As well we use this tagname in CSS Selector and xpath Tag name locator is commonly used to identify all the links on a page and identify “broken links” in selenium Example: driver.findElements(By.tagName(“a”)).size(); In the above example it shows how many anchor tags are available in the specific web page

6.Locating By “CSS Selector”: CSS(Cascading Style Sheets) is used to style web pages. CSS selector in selenium should be opted if you can’t locate an element by using unique id, name or class.. in this type of situation we use CSS Selector or xpath Here are different ways we can use CSS Selector in selenium: 1. Tag & id (OR) #id 2. Tag & class (OR) .class 3. Tag & attribute (OR) [attribute=value] 4. Tag, class & attribute

By using above example(screenshot) we will write different ways how we can use CSS Selector 1. Tag & id (OR) #id : · Tag: it provides tag name we wish to locate(input). · # : it is used to represent id attributes. When we wish to locate id through CSS Selector ,it must have a hash sign(#) only for id. · Value of the id attribute: used to locate element.

Syntax: css=(Html tag)(#)(value of the id attribute) Example: <input type=”text” class=” inputtext_55rl_6luy” name=” email” id=”email”> driver.findElement(By.cssSelector(“input#email”)); or driver.findElement(By.cssSelector(“#email”)); here in this example first we used tag#id combination and in the next example we used only #id both works same in functionality.

2.Tag & class (OR) .class : It is similar to id, here instead of # we use .(dot), when using class through CSS Selector, it must have .(dot) for class attribute.

Syntax: css = (Html tag)(.)( value of class attribute) Example: <input type=”text” class=” inputtext_55rl_6luy” name=” email” id=”email”>

driver.findElement(By.cssSelector(“input.inputtext”)); or driver.findElement(By.cssSelector(“.inputtext”)); Here in this example first we used tag.class value combination and in the next example we used only .class value both works the same in functionality. Here we no need to use value we use only text for class value.

3. Tag & Attribute : The elements can be located via tagname, and the corresponding attribute is defined using its value. Incase multiple elements have the same tag & attribute, it will take first one will be selected. Syntax: css = (Html tag)[Attribute= value] Example: <input type=”text” class=” inputtext_55rl_6luy” name=” email” id=”email”> driver.findElement(By.cssSelector(“input[name=email]”); or driver.findElement(By.cssSelector(“[name=email]”);

4. Tag, Class & Attribute : When we have same tagname & same class name at that time we use attribute along with class & tag name. Syntax: css = (Html tag)(.)(Class attribute value)[Attribute= value] Example:

//for email driver.findElement (By.cssSelector(“input.inputtext[data_testid=royal_email]”); //for password driver.findElement (By.cssSelector(“input.inputtext[data-testid=royal_pass]”); In the above example we can see that tagname and class name are same for both email and password in such cases we are taking Attribute, so that they will be unique.

7.Locating By “xpath”: Xpath uses the XML expression to locate an element on the webpage using HTML DOM Structure. Similar to CSS selector, xpath is more useful for locating dynamic elements on a webpage. It can access any element present in the web page. The basic syntax : Xpath= //tagname[@Attribute=’value’]

Example: driver.findElement(By.xpath[“//input[@id=’email”]); Here we are using the input tag and id attribute to identify the element 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 above image, then it will Show the element in yellow color . We will cover more depth in details about “xpath locator” strategies to identify various web elements in another article.

Do look out for other articles in this series which will explain the various other aspects of selenium. Xpath in Selenium XPath Functions Difference between Absolute Xpath & Relative Xpath