Locators In Selenium: A Comprehensive Guide

Selenium is a well-known open-source testing tool used in the testing of various web apps across different platforms. To become a master in it, you need to know the ins and outs and all the other uses of this automation tool. Especially, the locators in Selenium which play a significant role in identifying web elements to perform required operations. The locators have also bestowed Selenium the position of one of the leading tools. 

So if you are looking to become proficient in Selenium locators then you are in luck. In this blog, you are going to learn about:

• What are locators in Selenium?
• What are web elements?
• Types of locators in Selenium. 
• Strategies to access locators & automating web elements.

Without further ado let’s get started! Firstly, just for revision, let’s have a brief introduction of web elements.

What Are Web Elements?

Everything a user can interact with is a form of web element. For instance, the input fields, labels, and checkboxes are all web elements. There are different types of web elements given below.

Types Of Web Elements

The various types of web elements are:

• Button
• Link
• Textbox
• Text area
• Input fields
• Radio boxes
• Checkboxes
• Images
• Dropdowns
• Labels

Web elements can be identified with the help of Selenium locators.

What Are Locators In Selenium?

Locators in Selenium recognize the HTML elements on a web page. These elements include buttons, links, test fields, etc. The locators also assist the Selenium WebDriver to find and interact with these elements. 

There are different locators in Selenium, to help the testers identify the web elements effectively.   

Different Types Of Locators In Selenium

Selenium to facilitate efficiency provides eight types of locators.

• ID
• Class
• Name
• Tag name
• CSS selectors
• Linktext
• Partial Linktext
• Xpaths

Understanding different locators can be challenging. And for young companies and startups, this can cause consumption of resources and time. Not to forget the increasing chances of failure.

After knowing the names of element locators in Selenium it's time to get into details. But first, let’s have a look at two methods to find web elements on a web page. 

• Method number 1 findelement()

This method/function iterates and gives a single web element object in return.

• Method number  2 findelements()

This function is used to identify web elements/ list of web elements within the web page.

Now you must have a good understanding of the locators in Selenium and their importance for the testers or QAs. So it’s time to have a look at the strategies to access the locators.

Strategies To Access Locators & Automating Web Elements

Indeed there are various challenges in Selenium, but still, the automation it offers is reliable and seamless. 

Let’s have a look at the different techniques or strategies to access locators to ensure powerful and reliable automation of web elements. 

1. By ID

ID method is the most preferred and the fastest way to access a web element. ID locators are unique from each other and give accurate and unique results.

 

Syntax: driver.find_element(By.ID, “<ID VALUE>”)

 driver.find_element(By.ID, "name")

2. By Class

Elements can be accessed by their class name if the class attribute is present to that particular web element. 

Syntax: driver.find_element(By.CLASS_NAME, “<CLASS VALUE>”)

driver.find_element(By.CLASS_NAME, "tawk-custom-color tawk-custom-border-color tawk-button tawk-button-circle tawk-button-large")

3. By Name

The name locator is also used to identify elements on a webpage based on their name attribute. Every name attribute has some value that identifies an element uniquely. 

Syntax: driver.find_element(By.NAME, “<NAME VALUE>”)

driver.find_element(By.NAME, "getnda")

4. By Tag name

A tag is a part of DOM(Document object model) structure. Every element on a web page can be defined by a tag(input, button etc). Every tag incorporates multiple attributes.

Syntax: driver.find_element(By.TAG_NAME, “<VALUE>”)

driver.find_element(By.TAG_NAME, "a")

5. By CssSelectors

This is one of the most used and powerful ways to select elements in Selenium. Also, the CSS locators in Selenium are a preferred locator strategy as they are easy to write and rapid compared to XPath.

An automation tester can customize and make their own unique cssSelectors.

Syntax: driver.find_element(By.CSS_SELECTOR, “<CSS Selector VALUE>”)

There are different types of cssSelectors:

• ID
• Class
• Attribute 
• Substring
• nth-child

• ID

Syntax: driver.find_element(By.CSS_SELECTOR, “hash{value}”)

driver.find_element(By.CSS_SELECTOR,"#email")

• Class

Syntax: driver.find_element(By.CSS_SELECTOR, “dot{value}”)

driver.find_element(By.CSS_SELECTOR,".email")

• Attribute

Syntax: driver.find_element(By.CSS_SELECTOR, “htmlTag[attribute=‘value’]”)

driver.find_element(By.CSS_SELECTOR,"input[type=’email’]")

• Substring(prefix)

Syntax: driver.find_element(By.CSS_SELECTOR, “htmlTag[attribute^=‘prefix of the string’]”)

driver.find_element(By.CSS_SELECTOR,"input[type^='em']")

• Substring(suffix)

Syntax: driver.find_element(By.CSS_SELECTOR, “htmlTag[attribute$=‘suffix of the string’]”)

 driver.find_element(By.CSS_SELECTOR,"input[type$='il']")

• Substring(substring)

Syntax: driver.find_element(By.CSS_SELECTOR, “htmlTag[attribute*=‘substring value’]”)

driver.find_element(By.CSS_SELECTOR,"input[type*='ma']")

 

Nth child nth-child matches every element that is the nth child of its parent.

Syntax: driver.find_element(By.CSS_SELECTOR, “parentTag> listTag:nth-child(number)”)

driver.find_element(By.CSS_SELECTOR,"ul> li:nth-child(10)")

6. By Linktext

 Link Text is used to point out hyperlinks on a webpage. 

Syntax: driver.find_element(By.LINK_TEXT, “link name”)

driver.find_element(By.LINK_TEXT,"Blog")

7. By Partial Linktext

Partial Link Text can only be used when a part of the word is added, which enables quicker retrieval for the users.

Syntax: driver.find_element(ByPARTIAL_.LINK_TEXT, “link name”)

driver.find_element(By.PARTIAL_LINK_TEXT,"B")

8. By Xpaths

Xpaths is a technique that is used to navigate through HTML structure/document. It is a syntax that makes locating elements possible using XML path expressions. 

Xpath locators in Selenium facilitate the automation of various interactions such as clicking buttons, filling out forms, or for taking out information.

• Absolute Xpath

Direct way of finding an element. The drawback of this method is that when there is some change in html doc then it will fail. 

Syntax:driver.find_element(By.XPATH,“/html/body/div[1]/div/div[2]/…….”)

driver.find_element(By.XPATH,"/html[1]/body[1]/div[1]/div[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/form[1]/div[1]/div[9]/div[1]/div[1]/textarea[1]")

• Relative Xpath

It begins from the middle of the HTML DOM. It enables you to write from the middle of the DPM without any need to write a long Xpath.

Syntax:driver.find_element(By.XPATH,“//{Xpath value}”)

driver.find_element(By.XPATH,"//textarea[@id='message']")

Take Away

Locators in Selenium are indeed one of the most powerful commands that help in automation of scripts. Also, the types of locators  like by id, name, classname, tagname, linktext, partialtext, Xpath, and CSS help in efficiently locating web elements. 

Whilst the initial effort might seem like a daunting task but your efforts will pay off once you can reuse the automation script multiple times.