When we discuss automating WebApps for testing purposes, we often use the term Selenium. The very fundamentals of Selenium include concepts regarding interacting with a webpage. To interact with a webpage using written code, we need to know how to locate elements on the page, and this is where the concept of Locators in Selenium comes into play.
This article will teach us about Locators in Selenium and its types with syntax, examples, and much more. Let us first start with what locators in selenium are.
What are Locators in Selenium?
In Selenium, "Locators" is a method to interact with desired elements. These locators allow Selenium to perform various actions like clicking buttons, navigating pages, interacting with text fields, etc. Using locators, developers can target the exact elements to interact with various tasks on a website.
There are various locators; each locator type has its syntax, which we can use to locate different elements. Following are the types of Locators in Selenium:
ID Locator
Name Locator
Class Name Locator
Tag Name Locator
Link Text Locator
Partial Link Text Locator
CSS Selector Locator
XPath Locator
Alright! Now let us dive into Locator-Ocean and find what they are, how and in what scenario we can use it.
Different Types of Locators in Selenium
Here are 8 types of locators in Selenium:
Locating Strategies By ID
ID Locator locates an HTML element using its id attribute. The locator expects the id attribute to be unique on the entire page.
Syntax: find_element("id", "element_id")
Example
# Find the button element using the ID locator
button = driver.find_element("id", "addButton")
Locating Strategies By Name
The Name Locator locates an HTML element using its name attribute.
Syntax: find_element("name", "element_name")
Example
# Find the button element using the Name locator
button = driver.find_element("name", "buttonName")
Locating Strategies By Class Name
The Class Name Locator locates an HTML element using its class attribute.
Syntax: find_element("class name", "class_name")
Example
# Find the paragraph element using the Class Name locator
paragraph = driver.find_element("class name", "buttonClass")
Locating Strategies By Tag Name
The Tag Name Locator locates an HTML element using its tag name.
Syntax: find_element("tag name", "tag_name")
Example
# Find the paragraph element using the Tag Name locator
paragraph = driver.find_element("tag name", "p")
Locating Strategies By Link Text
The Link Text Locator locates a link element on a web page using its link text.
Syntax: find_element("link text", "link_text")
Example
# Find the link element using the Link Text locator
link = driver.find_element("link text", "Back to Selenium Index")
Locating Strategies By Partial Link Text
The Partial Link Text Locator locates a link element on a web page using a partial match of its link text.
Syntax: find_element("partial link text", "partial_link_text")
Example
# Find the link element using the Partial Link Text locator
link = driver.find_element("partial link text", "Selenium Index")
Locating Strategies By CSS
The CSS Selector Locator locates an HTML element on a web page using a CSS selector expression.
# Find the button element using the CSS Selector locator
button = driver.find_element("css selector", "#addButton")
Locating Strategies By XPath
The XPath Locator locates an HTML element on a web page using an XPath expression.
Syntax: find_element("xpath", "xpath_expression")
Example
# Find the paragraph element using the XPath locator
paragraph = driver.find_element("xpath", "//p[@id='clickCountDisplay']")
Code Implementation
Alright! Let us try to implement what we learnt so far. Suppose we have an HTML file containing the following code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Selenium</title>
<style>
.buttonClass {
background-color: #01A71C;
color: #fff;
padding: 8px 16px;
border-radius: 4px;
border: none;
font-size: 13px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.buttonClass:hover {
background-color: #008c13;
}
</style>
</head>
<body>
<h1 style="color: #f67f22">Be a Coding Ninja</h1>
<p>You will be a ninja in god's perfect time</p>
<button id="addButton" name="buttonName" class="buttonClass" onclick="addButtonClicked()">Click me or Let the Selenium click</button>
<p id="clickCountDisplay"></p>
<a href="http://127.0.0.1/my-app/selenium/index.html">Back to Selenium Index</a>
</body>
<script>
var clickCount = 0;
function addButtonClicked() {
clickCount++;
document.getElementById("clickCountDisplay").innerHTML = "Selenium Code clicked " + clickCount + " times.";
}
</script>
</html>
To understand how we can use various locators in Selenium. Let us write our code to interact with various elements in our above HTML.
Code
import time
from selenium import webdriver
driver = webdriver.Chrome(options=options)
driver.get("http://127.0.0.1/my-app/selenium/index.html")
# Find the link element using the Partial Link Text locator
link = driver.find_element("partial link text", "Selenium Index")
# Click the link
link.click()
time.sleep(1)
# Find the link element using the Link Text locator
link = driver.find_element("link text", "Back to Selenium Index")
# Click the link
link.click()
time.sleep(1)
# Find the paragraph element using the Class Name locator
paragraph = driver.find_element("class name", "buttonClass")
# Print the text of the paragraph element
print(paragraph.text)
time.sleep(1)
# Find the paragraph element using the Tag Name locator
paragraph = driver.find_element("tag name", "p")
# Print the text of the paragraph element
print(paragraph.text)
time.sleep(1)
# Find the button element using the ID locator
button = driver.find_element("id", "addButton")
# Click the button
button.click()
time.sleep(1)
# Find the button element using the Name locator
button = driver.find_element("name", "buttonName")
# Click the button
button.click()
time.sleep(1)
# Find the button element using the CSS Selector locator
button = driver.find_element("css selector", "#addButton")
# Click the button
button.click()
time.sleep(1)
# Find the paragraph element using the XPath locator
paragraph = driver.find_element("xpath", "//p[@id='clickCountDisplay']")
# Print the text of the paragraph element
print(paragraph.text)
time.sleep(1)
# Close the browser
driver.quit()
Code Explanation
This code starts a Chrome Browser using WebDriver API. Then it starts finding elements on the web page (in our case webpage is HTML we discussed above). It then finds various elements on the webpage, such as links, buttons, and paragraphs, using different locators such as partial link text, link text, class name, tag name, ID, name, CSS Selector, and XPath. Finally, it interactswith these elements by clicking links and buttons and printing the text of paragraphs. After completing all the tasks, it closes the browser.
Output
To run the code, hit python code.py(the name of the file you have written your code) in the terminal. The code will trigger the browser to open, and you will see real-time rendering in the browser and corresponding logging in the terminal, depending on the statements written in the code.
Browser
Terminal
Frequently Asked Questions
What is the locators in selenium?
Locators in Selenium are mechanisms to identify and interact with web elements on a webpage, such as ID, Name, Class, XPath, CSS Selector, etc.
What are the default locators selenium?
Selenium default locators include ID, Name, Tag Name, Class Name, Link Text, and Partial Link Text for element identification.
What is tag name locator in selenium?
Tag Name locator in Selenium selects elements based on their HTML tag name, like 'div' or 'input'.
What is XPath tag?
XPath (XML Path Language) in Selenium is a powerful and flexible language used to navigate and locate elements on a webpage in an XML or HTML document. It provides a way to traverse the structure of an XML document and, in the context of Selenium, an HTML document.
Conclusion
In this article, we discussed Locators in Selenium. We learnt about different types of locators and understood which locator to use in a particular scenario. Alright! So now that you have learnt about Locators in Selenium, you can also refer to other similar articles.
8+ registered 