Selenium WebDriver: Locators Overview
Locators in Selenium are commands that help identify and interact
with web elements (like buttons, input fields, links, etc.).
WebDriver provides the By class to locate elements using different
strategies.
🔟 10 Types of Selenium Locators
1. ID Locator
Most preferred when id is unique on the page.
✅ Fastest and most reliable.
Python
driver.find_element(By.ID, "username")
2. Name Locator
Works if the name attribute is present and unique.
Python
driver.find_element(By.NAME, "email")
3. Class Name Locator
Selects element(s) with a specific CSS class.
⚠️Avoid if multiple elements share the same class.
python
CopyEdit
driver.find_element(By.CLASS_NAME, "btn-primary")
4. Tag Name Locator
Selects elements by their HTML tag (e.g., input, div, a, etc.).
Often used for lists or headers.
python
CopyEdit
driver.find_element(By.TAG_NAME, "h1")
5. Link Text Locator
Locates <a> links using the exact visible text.
Python
driver.find_element(By.LINK_TEXT, "Sign In")
6. Partial Link Text Locator
Locates links using partial visible text.
Useful if link text is long or dynamic.
python
CopyEdit
driver.find_element(By.PARTIAL_LINK_TEXT, "Sign")
7. CSS Selector
Powerful and flexible.
Uses CSS syntax to locate elements.
Faster than XPath.
Examples:
Python
# ID
driver.find_element(By.CSS_SELECTOR, "#login")
# Class
driver.find_element(By.CSS_SELECTOR, ".btn")
# Attribute
driver.find_element(By.CSS_SELECTOR, "input[name='username']")
# Tag + class
driver.find_element(By.CSS_SELECTOR, "button.submit-btn")
8. XPath
Most powerful and flexible locator.
Can go both forward and backward in DOM.
Slower than CSS but allows complex queries.
Absolute XPath (not recommended):
Python
driver.find_element(By.XPATH, "/html/body/div[1]/form/input")
Relative XPath (recommended):
Python
driver.find_element(By.XPATH, "//input[@id='username']")
Other Examples:
python
CopyEdit
# Using text()
driver.find_element(By.XPATH, "//button[text()='Login']")
# Contains
driver.find_element(By.XPATH, "//a[contains(text(),'Sign')]")
# And condition
driver.find_element(By.XPATH, "//input[@type='text' and
@name='email']")
9. DOM Locators (JavaScript-based, rarely used)
You can execute JavaScript to find elements:
Python
driver.execute_script("return document.getElementById('email')")
10. Custom Attributes / ARIA / Data-Attributes
Sometimes developers use data-* or aria-* attributes.
Python
driver.find_element(By.CSS_SELECTOR, "[data-test='submit-btn']")
driver.find_element(By.XPATH, "//*[@aria-label='Close']").
📌 Summary Table
Locator When to
Method Example
Type Use
Best, if
ID By.ID "username"
unique
If no unique
Name By.NAME "email"
ID
Class If class is
By.CLASS_NAME "btn-primary"
Name unique
Tag For
By.TAG_NAME "input"
Name lists/tables
Exact match
Link Text By.LINK_TEXT "Login"
for links
Partial By.PARTIAL_LINK_T Partial link
"Log"
Link Text EXT match
CSS Fast &
By.CSS_SELECTOR "input[name='email']"
Selector flexible
Powerful,
XPath By.XPATH "//input[@id='username']" use when
others fail
Rare,
"document.getElementById('e
JS/DOM execute_script() advanced
mail')"
usage
Custom CSS/XPath with "[data-id='123']" / "//*[@data- For
Locator When to
Method Example
Type Use
custom/test-
Attribute
data-* id='123']" friendly
s
locators
✅ Best Practices
Prefer ID > Name > CSS Selector > XPath (in that order).
Avoid Absolute XPath.
Don’t rely on class names that change often (e.g., dynamic React
classes).
Use custom data-test or data- attributes* if available.
To practice identifying HTML attributes like tag names, classes, IDs,
names, etc., here’s a complete sample HTML page with a variety of
elements for testing Selenium locators.
You can:
Inspect this in Chrome (Right Click > Inspect)
Use Selenium to locate elements using various strategies
🧩 Sample HTML Page for Locator Practice
html
<!DOCTYPE html>
<html>
<head>
<title>Locator Practice Page</title>
</head>
<body>
<h1 id="main-title">Welcome to Selenium
Practice</h1>
<div class="container">
<form id="login-form" name="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="user"
placeholder="Enter username" />
<label for="password">Password:</label>
<input type="password" id="password"
name="pass" />
<button type="submit" class="btn btn-primary" data-
test="submit-btn">Login</button>
</form>
<a href="/forgot" id="forgot-link">Forgot
Password?</a>
<a href="/signup" class="link">Create Account</a>
<div class="message" aria-label="welcome-message">
<p class="text">Welcome, Guest!</p>
</div>
<ul id="user-list">
<li class="user">Alice</li>
<li class="user">Bob</li>
<li class="user">Charlie</li>
</ul>
</div>
<footer class="footer" data-role="site-footer">
<p>Contact: [email protected]</p>
</footer>
</body>
</html>
🧪 Elements You Can Locate
Element What You Can Use
<h1 id="main-title"> By.ID, By.TAG_NAME, By.XPATH, CSS
<form
By.NAME, By.TAG_NAME, By.ID
name="loginForm">
<input
By.ID, By.NAME, By.CSS_SELECTOR
id="username">
<button class="btn"> By.CLASS_NAME, By.CSS_SELECTOR
By.ID, By.LINK_TEXT,
<a id="forgot-link">
By.PARTIAL_LINK_TEXT
By.CLASS_NAME, By.CSS_SELECTOR,
<li class="user">
By.XPATH
<div aria-label="..."> By.XPATH, By.CSS_SELECTOR
data-test="submit- Custom attribute via XPath or CSS
btn" selector
🎯 Locator Example Using This HTML
python
CopyEdit
# By ID
driver.find_element(By.ID, "username")
# By Name
driver.find_element(By.NAME, "user")
# By Class Name
driver.find_element(By.CLASS_NAME, "btn")
# By Tag Name
driver.find_elements(By.TAG_NAME, "li")
# By Link Text
driver.find_element(By.LINK_TEXT, "Forgot Password?")
# By Partial Link Text
driver.find_element(By.PARTIAL_LINK_TEXT, "Forgot")
# By CSS Selector
driver.find_element(By.CSS_SELECTOR, "input[name='user']")
# By XPath
driver.find_element(By.XPATH, "//button[@data-test='submit-btn']")
