Selenium locator

Website - https://www.saucedemo.com/

1. By.ID (Find by ID)

Explanation
• ID is the most unique and reliable locator for finding web elements.
• Every HTML element can have an ID, and it should be unique across the page.
• IDs are fast because they directly reference an element without needing additional
searches.
• If an ID is available, it should be your first choice for locating elements.
• You can find the ID by inspecting the HTML (right-click → Inspect in the browser).

How to Locate ID in HTML

<input type="text" id="user-name" placeholder="Username">
Selenium Example
driver.find_element(By.ID, "user-name").send_keys("standard_user")

2. By.NAME (Find by Name Attribute)

Explanation
• The name attribute is often used in forms to identify input fields.
• It is useful if the ID is missing or dynamic, but multiple elements can have the same
name.
• Selenium finds the first matching element if multiple elements share the same name.
• It is commonly used for form fields like text inputs, radio buttons, and checkboxes.
• You can find it by inspecting the element in the browser.

How to Locate Name in HTML

<input type="password" name="password">
Selenium Example
driver.find_element(By.NAME, "password").send_keys("secret_sauce")

3. By.CLASS_NAME (Find by Class)

Explanation
• Class names are used for grouping multiple elements with the same styling or behavior.
• If multiple elements share the same class, Selenium finds the first matching element.
• Useful for identifying elements with consistent styling (e.g., buttons, labels, icons).
• It cannot locate elements if the class name has spaces (use CSS_SELECTOR instead).
• Can be found by checking the class attribute in the HTML.

How to Locate Class Name in HTML

<button class="submit-button btn_action">Login</button>
Selenium Example
driver.find_element(By.CLASS_NAME, "submit-button").click()

4. By.TAG_NAME (Find by Tag)

Explanation
• Locates elements based on their HTML tag type (e.g., <button>, <input>, <a>).
• It is useful for finding all elements of a type, like all <img> or <button> elements.
• Selenium will return only the first matching element unless used with find_elements().
• Less specific, so it’s usually combined with other locators like By.CLASS_NAME or
By.XPATH.
• You can inspect the element’s tag name in the HTML source code.
How to Locate Tag Name in HTML
<img src="logo.png" alt="Company Logo">
Selenium Example
logo = driver.find_element(By.TAG_NAME, "img")
print(logo.get_attribute("src"))

5. By.LINK_TEXT (Find by Full Link Text)

Explanation
• Used for finding hyperlinks (<a> tags) by their visible text.
• The text must exactly match the link’s visible text, including case sensitivity.
• Works well for static links, but not for dynamically changing text.
• If a hyperlink contains extra spaces or formatting, this method may not work correctly.
• You can inspect the element to get the exact text inside the <a> tag.
How to Locate Link Text in HTML
<a href="https://twitter.com/saucelabs">Twitter</a>
Selenium Example
driver.find_element(By.LINK_TEXT, "Twitter").click()

6. By.PARTIAL_LINK_TEXT (Find by Partial Link Text)

Explanation
• Similar to LINK_TEXT, but instead of matching the full text, it matches a portion of the
text.
• Useful when the link text is too long or dynamic and contains common keywords.
• The partial text must be unique to avoid selecting the wrong link.
• Works only for hyperlinks (<a> tags).
• Can be found by inspecting the text inside the <a> tag.
How to Locate Partial Link Text in HTML
<a href="https://twitter.com/saucelabs">Follow us on Twitter</a>
Selenium Example
driver.find_element(By.PARTIAL_LINK_TEXT, "Twitter").click()

Let's break it down in a simpler way so you can easily understand CSS Selectors and XPath.

CSS Selector (Cascading Style Sheets Selector)

Used to find elements based on their CSS properties (class, ID, attributes, etc.).
Faster than XPath and simpler to use.
Follows the same syntax used in CSS stylesheets.
How to Write a CSS Selector

Selector Meaning Example

Selects all elements

tagname input selects all <input> elements
with that tag

Selects an element by #login-button selects <button id="login-

#id
its ID button">

Selects an element by .submit-button selects <button

.class
class class="submit-button">

Selects an element by input[type="text"] selects <input

tagname[attribute="value"]
an attribute type="text">

Selects child inside div button selects all <button> inside

parent child
parent <div>

form > input selects direct <input>

parent > child Selects direct child only
inside <form>
Example in HTML
<input type="text" id="user-name" class="input-field">
<button class="submit-button">Login</button>
How to Use in Selenium
driver.find_element(By.CSS_SELECTOR, "#user-name").send_keys("standard_user")
driver.find_element(By.CSS_SELECTOR, ".submit-button").click()

XPath (XML Path Language)

Used to navigate through the HTML structure (DOM Tree).

More powerful than CSS because it allows searching for elements based on text, attributes,
positions, and relationships.
Slower than CSS Selectors, but useful when elements don’t have an ID or class.
How to Write XPath
XPath Meaning Example
//tagname Selects all //input selects all <input> elements
elements with
that tag
//tagname[@attribute='value'] Selects an //input[@type='text'] selects <input
element by type="text">
attribute
//*[@id='id_value'] Selects element //*[@id='login-button'] selects <button
by ID id="login-button">
//tagname[contains(@attribute, Selects an //div[contains(@class, 'item_name')]
'value')] element that selects <div
contains a class="inventory_item_name">
partial value
 //tagname[text()='TextValue'] Selects an //button[text()='Login'] selects
element by <button>Login</button>
exact text
//parent/child Selects child //form/input selects <input> inside
inside parent <form>
//parent//child Selects all //div//button selects all <button> inside
matching <div>
children inside
parent

Example in HTML
<input type="text" id="user-name" class="input-field">
<button class="submit-button">Login</button>
How to Use in Selenium
driver.find_element(By.XPATH, "//input[@id='user-name']").send_keys("standard_user")
driver.find_element(By.XPATH, "//button[text()='Login']").click()

CSS Selector vs XPath – When to Use?

Feature CSS Selector XPath

Speed Faster Slower

Readability Simpler More complex

Search by ID #id //*[@id='id']

Search by Class .class //*[@class='class']

Find by Text Not Possible //tagname[text()='text']

Navigate Parent-Child Limited Fully Supports

Final Recommendation
• Use CSS Selectors when possible (faster and simpler).
• Use XPath when CSS does not work, especially for finding text or navigating complex
structures.

Example for Swag Labs (https://www.saucedemo.com/)

Task CSS Selector XPath

Select Username Field #user-name //input[@id='user-name']

Select Password Field [type="password"] //input[@type='password']

Click Login Button .submit-button //button[text()='Login']

Select Product Name .inventory_item_name //div[contains(@class, 'inventory_item_name')]