Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What are Locators in Selenium?
3.
Different Types of Locators in Selenium
3.1.
Locating Strategies By ID
3.2.
Locating Strategies By Name
3.3.
Locating Strategies By Class Name
3.4.
Locating Strategies By Tag Name
3.5.
Locating Strategies By Link Text
3.6.
Locating Strategies By Partial Link Text
3.7.
Locating Strategies By CSS
3.8.
Locating Strategies By XPath
4.
Code Implementation
4.1.
HTML
4.2.
Code
4.2.1.
Code Explanation
4.3.
Output
4.3.1.
Browser
4.3.2.
Terminal
5.
Frequently Asked Questions
5.1.
What is the locators in selenium?
5.2.
What are the default locators selenium?
5.3.
What is tag name locator in selenium?
5.4.
What is XPath tag?
6.
Conclusion
Last Updated: Mar 27, 2024
Medium

Locators in Selenium

Author Sanchit Kumar
0 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

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.

Locators in Selenium

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:

  1. ID Locator
     
  2. Name Locator
     
  3. Class Name Locator
     
  4. Tag Name Locator
     
  5. Link Text Locator
     
  6. Partial Link Text Locator
     
  7. CSS Selector Locator
     
  8. XPath Locator


Alright! Now let us dive into Locator-Ocean and find what they are, how and in what scenario we can use it.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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.

Syntax: find_element("css selector", "css_selector_expression")

Example

# 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 interacts with 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

output in browser

Terminal

output in 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.


You may refer to our Guided Path on Code Studios for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Previous article
Headless Browser Testing With Selenium
Next article
Object Repository in Selenium
Live masterclass