XPath and CSS Selectors in Selenium Python: Complete Tutorial with Examples

 

Introduction

Locating web elements is one of the most important skills in Selenium automation testing. Before an automation script can click a button, enter text, select a dropdown or validate a message, it must identify the correct element on the web page.

Selenium WebDriver supports several locator strategies, including ID, Name, Class Name, Link Text, CSS Selector and XPath.

Among these, XPath and CSS Selectors are particularly useful when working with dynamic web applications where elements may not have unique IDs or names.

In this tutorial, we will explore XPath and CSS selectors using Python, including practical examples, advanced expressions, dynamic elements and best practices.

1. What Is XPath in Selenium?

XPath stands for XML Path Language. It is a query language used to navigate elements and attributes in an XML or HTML document.

In Selenium, XPath helps locate web elements based on their attributes, text, hierarchy and relationships with other elements.

For example:

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

This expression locates an input element whose ID is username.

XPath is useful when:

• An element does not have a unique ID.

• You need to locate elements using visible text.

• You need to identify elements based on parent-child relationships.

• You need to locate dynamic elements.

• You need to use relationships between nearby elements.

2. Types of XPath

There are two commonly discussed types of XPath.

Absolute XPath

Absolute XPath starts from the root of the document and describes the complete hierarchy of an element.

Example:

/html/body/div[1]/form/input[1]

Absolute XPath is generally fragile because changes in the page structure can break the expression.

Relative XPath

Relative XPath starts from a selected element or matching point in the document.

Example:

//input[@id='username']

Relative XPath is generally preferred because it is shorter and less dependent on the complete page hierarchy.

3. XPath Using Attributes

One of the most common ways to locate elements is by using HTML attributes.

Syntax:

//tagname[@attribute='value']

Examples:

//input[@id='username']

//input[@name='password']

//button[@type='submit']

//a[@class='login-link']

Python implementation:

from selenium.webdriver.common.by import By

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

username.send_keys("tester")

You can use attributes such as id, name, class, type, placeholder and data-testid, depending on the application's HTML.

4. XPath Using Text

XPath can locate elements based on their visible text.

Syntax:

//tagname[text()='value']

Example:

//button[text()='Login']

Python:

login_button = driver.find_element(
    By.XPATH,
    "//button[text()='Login']"
)

login_button.click()

For text that contains additional spaces or formatting, consider using normalize-space():

//button[normalize-space()='Login']

This can help when the HTML contains extra whitespace.

5. XPath Using contains()

The contains() function is useful when an attribute or text value is only partially known.

Syntax:

//tagname[contains(@attribute,'value')]

Examples:

//input[contains(@id,'user')]

//button[contains(@class,'submit')]

//a[contains(text(),'Register')]

Python:

element = driver.find_element(
    By.XPATH,
    "//input[contains(@id,'user')]"
)

This is particularly useful when working with dynamic attribute values, provided the partial value is sufficiently distinctive.

6. XPath Using starts-with()

The starts-with() function identifies elements whose attribute begins with a specified value.

Example:

//input[starts-with(@id,'user')]

Another example:

//button[starts-with(@name,'submit')]

Python:

element = driver.find_element(
    By.XPATH,
    "//input[starts-with(@id,'user')]"
)

This can be useful when applications generate element IDs with a predictable prefix.

7. XPath Using Multiple Attributes

Sometimes one attribute is not sufficient to identify an element uniquely.

You can combine multiple conditions using and or or.

Using AND

//input[@type='text' and @name='username']

Both conditions must be true.

Using OR

//input[@name='username' or @id='user']

At least one condition must be true.

Python example:

username = driver.find_element(
    By.XPATH,
    "//input[@type='text' and @name='username']"
)

Combining attributes can improve locator precision.

8. XPath Using Parent and Child Relationships

XPath supports navigation through the HTML hierarchy.

Consider:

<div class="login">
    <form>
        <input id="username">
        <input id="password">
    </form>
</div>

You can locate the input inside the login container:

//div[@class='login']//input[@id='username']

Other useful relationships include:

XPath Expression	Meaning
..	Parent
parent::	Parent axis
child::	Child axis
ancestor::	Ancestor elements
descendant::	Descendant elements
following-sibling::	Following sibling
preceding-sibling::	Previous sibling

Example:

//label[text()='Username']/following-sibling::input

This locates an input element that follows the Username label as a sibling.

9. XPath Using Index and Position

When multiple elements have similar attributes, you may need to identify one based on its position.

Example:

(//input[@type='text'])[1]

This selects the first matching input element.

Another example:

(//button[@class='add-to-cart'])[2]

This selects the second matching button.

Use positional locators carefully. If the order of elements changes, the locator may identify the wrong element.

10. What Are CSS Selectors in Selenium?

CSS Selectors are patterns used to identify HTML elements based on their attributes, IDs, classes and relationships.

They are widely used in Selenium because they are concise and readable.

Python syntax:

driver.find_element(
    By.CSS_SELECTOR,
    "input#username"
)

CSS selectors can identify elements using:

• ID.

• Class.

• Attribute.

• Tag name.

• Parent-child relationships.

• Attribute values and prefixes.

11. CSS Selector Using ID and Class

ID Selector

Use # to locate an element by ID.

#username

Python:

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

Class Selector

Use . to locate an element by class.

.login-button

Python:

driver.find_element(
    By.CSS_SELECTOR,
    ".login-button"
)

Tag and ID

input#username

Tag and Class

button.submit

These selectors are useful when the HTML provides stable and unique identifiers.

12. CSS Selectors Using Attributes

CSS selectors can also locate elements through their HTML attributes.

Examples:

input[name='username']

input[type='password']

button[type='submit']

input[placeholder='Enter Email']

Python:

email = driver.find_element(
    By.CSS_SELECTOR,
    "input[placeholder='Enter Email']"
)

email.send_keys("test@example.com")

For partial attribute matching, CSS supports several operators:

Operator	Meaning	Example
=	Exact match	[type='text']
*=	Contains value	[id*='user']
^=	Starts with	[id^='user']
$=	Ends with	[id$='name']

13. CSS Selectors Using Parent and Child Relationships

CSS selectors support relationships between elements.

Consider:

<div class="login">
    <form>
        <input id="username">
    </form>
</div>

Examples:

div.login input

Selects matching input descendants inside the login container.

div.login > form

Selects a direct child form.

form + input

Selects an input immediately following a form as a sibling.

form ~ input

Selects matching input siblings that follow the form.

Understanding these relationships helps when working with complex page structures.

14. XPath vs CSS Selectors: Key Differences

Feature	XPath	CSS Selector
Locate by ID	Yes	Yes
Locate by class	Yes	Yes
Locate by attributes	Yes	Yes
Locate by visible text	Yes	No direct equivalent
Navigate to parent	Yes	No general parent selector
Navigate to descendants	Yes	Yes
Use sibling relationships	Yes	Yes
Complex hierarchy	Highly flexible	Flexible
Readability	Depends on expression	Often concise

Which One Should You Use?

There is no universal rule that XPath is always better than CSS or vice versa.

Use CSS selectors when the element can be identified cleanly through stable IDs, classes or attributes.

Use XPath when you need to locate elements using visible text, navigate to parent elements or use more complex relationships.

The best locator is the one that is stable, unique and easy to maintain.

15. Practical Example: Login Automation Using XPath and CSS

The following example uses both locator strategies.

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()

try:
    driver.get("https://www.saucedemo.com/")

    # XPath locator
    username = driver.find_element(
        By.XPATH,
        "//input[@id='user-name']"
    )

    # CSS selector
    password = driver.find_element(
        By.CSS_SELECTOR,
        "input#password"
    )

    # XPath locator
    login_button = driver.find_element(
        By.XPATH,
        "//input[@type='submit']"
    )

    username.send_keys("standard_user")

    password.send_keys("secret_sauce")

    login_button.click()

    assert "inventory" in driver.current_url

    print("Login successful")

finally:
    driver.quit()

This is an illustrative practice example using a public demonstration application. Confirm that its test credentials and page structure remain valid before execution.

16. Common XPath and CSS Selector Mistakes

Beginners often make the following mistakes:

1. Using absolute XPath unnecessarily

Long absolute paths are sensitive to page structure changes.

2. Choosing non-unique locators

A locator that matches multiple elements may select an unintended element.

3. Ignoring whitespace in text

Use normalize-space() where appropriate.

4. Depending on unstable class names

Some applications generate changing CSS classes. Prefer stable attributes.

5. Using positional selectors without checking the page

Indexes can change when elements are added or removed.

6. Ignoring dynamic loading

A correct locator can still fail if the element is not yet available. Use suitable explicit waits.

17. Best Practices for Writing Reliable Locators

• Prefer unique IDs when available.

• Use stable data-testid or similar test attributes when provided.

• Avoid unnecessary absolute XPath.

• Keep locators short and understandable.

• Validate that a locator identifies the intended element.

• Use explicit waits for dynamic content.

• Avoid relying on visual position alone.

• Keep locators inside Page Object classes.

• Review locators when application HTML changes.

Learn Selenium Python at Palium Skills

Palium Skills provides practical Automation Testing training for freshers, manual testers and working professionals.

The Selenium Python learning programme can cover:

• Python programming fundamentals.

• Selenium WebDriver.

• XPath and CSS selectors.

• Dynamic element handling.

• Dropdowns, alerts and frames.

• Explicit waits.

• PyTest framework.

• Page Object Model.

• Data-driven testing.

• Framework development.

• Reporting and debugging.

• Real-time automation projects.

Classroom training is available at South Kolkata and Salt Lake centres, along with instructor-led live online sessions for learners across India.

Contact Palium Skills

• Website: www.paliumskills.com

• Call: 8420594969 / 7044871915

• WhatsApp: 9903130500

• Email: info@paliumskills.com

South Kolkata Centre: 1st Floor, Sheeba Bhavan, 1/22 Poddar Nagar, Near South City Mall, Kolkata – 700068.

Salt Lake Centre: 5th Floor, RDB Boulevard, Block GP, Salt Lake Electronic Complex, Kolkata – 700091.

Enquire about Selenium with Python, Selenium with Java and Playwright Automation Testing training.

Frequently Asked Questions (FAQs)

1. What is XPath in Selenium Python?

XPath is a locator strategy used to identify elements in an HTML document based on attributes, text, hierarchy and relationships.

2. What is the difference between absolute and relative XPath?

Absolute XPath describes the complete path from the document root. Relative XPath starts from a matching point and is generally more flexible.

3. What is the difference between XPath and CSS Selector?

XPath supports text-based matching and flexible navigation through element relationships. CSS selectors are often concise for identifying elements using IDs, classes and attributes.

4. Can CSS selectors locate elements by text?

CSS selectors do not provide a standard direct mechanism for matching visible text. XPath can be used for text-based element location.

5. What is dynamic XPath?

Dynamic XPath refers to an XPath expression designed to identify elements whose attributes or values may change, often using functions such as contains() and starts-with().

6. Which XPath function is commonly used for partial matching?

The contains() function is commonly used to match an element when only part of an attribute or text value is known.

7. Can XPath locate parent elements?

Yes. XPath supports parent navigation using .. and the parent:: axis.

8. Which locator is best for Selenium automation?

Use a stable and unique locator. IDs and dedicated test attributes are often good choices, while XPath and CSS selectors are useful when simpler locators are unavailable.

---

Conclusion

XPath and CSS selectors are essential skills for Selenium Python automation. They help testers identify web elements accurately, interact with dynamic interfaces and build maintainable automation scripts.

Practise different locator strategies on real web pages and gradually incorporate them into Page Object Model-based frameworks. Strong locator skills will make your Selenium automation more reliable and easier to maintain.