How to Use XPath in Selenium [XPath Tutorial]

What Is XPath in Selenium?

XPath (XML Path Language) is a query language used to navigate and locate nodes in XML and HTML documents. In Selenium automation, XPath help you locate elements inside the Document Object Model (DOM) based on their attributes, relationships, or text content.

When an element doesn’t have a unique ID or predictable structure, XPath gives you the flexibility to locate it using combinations of conditions. For example, you can target an element based on partial attribute matches, relative positioning, or even its displayed text. This flexibility makes XPath one of the most commonly used and reliable Selenium locators in real-world test automation.

Syntax:

//tagname[@attribute='value']

Here is an example of using XPath to locate a button element on a webpage.

The highlighted SIGN UP button in the screenshot has a class attribute that includes justify-center.

//button[contains(@class, 'justify-center')]

This XPath selects the button element whose class attribute includes the text justify-center.

For instance, it would match the SIGN UP button in the HTML code since that button’s class list contains justify-center.

Why XPath Is Important in Selenium?

XPath in Selenium is important for handling unstable identifiers, layout changes, and context-based element location.They also help with dynamic or nested structures, and advanced logic like conditional or partial attribute matching in complex web applications.

• Unstable Identifiers: You need to identify elements without consistent IDs, names, or classes, and XPath provides flexible expressions for targeting them reliably.
• Frequent Layout Changes: When page structures change often, XPath’s relative paths ensure your locators remain stable instead of breaking like absolute element references.
• Context-Based Location: You can locate elements relative to nearby components, such as labels, siblings, or containers, enabling more natural and maintainable test logic.
• Dynamic or Nested Elements: XPath efficiently handles dynamic, deeply nested, or component-based elements that standard locators struggle to access or identify correctly.
• Advanced Logic Support: XPath enables conditional matching, partial attribute searches, and parent-child traversal, making it ideal for complex and data-driven web applications.

How to Write XPath in Selenium?

You use XPath in Selenium to locate elements on a webpage. Write it as //tag[@attribute=’value’]. For example: driver.findElement(By.xpath(“//input[@id=’username’]”));. It supports absolute and relative paths.

When you work on complex web applications, you often encounter elements that cannot be uniquely identified using standard locators like ID or Class. XPath lets you define conditions that describe exactly what you’re looking for. These conditions can be based on attributes, text, partial matches, or relationships with other elements.

A good XPath expression is both specific enough to locate a single element and resilient to minor DOM changes. The best way to write XPath is to start simple and refine it as needed.

Basic Structure:

XPath = //tagname[@attribute='value']

Example:

Consider a login page with two buttons:

<button type="submit">Login</button>
<button type="button">Cancel</button>

If you use the XPath //button[@type=’submit’], Selenium will identify the Login button, since it’s the only one with type=”submit”.

You can then use it in your Selenium script like this:

WebElement loginButton = driver.findElement(By.xpath("//button[@type='submit']"));
loginButton.click();

What Are Common XPath Patterns in Selenium?

You use common XPath patterns in Selenium to find elements easily. These include single and multiple attribute matches, text-based selection, partial attribute matching for dynamic values, and parent-child navigation within the page.

Let’s break down some key XPath expressions you’ll use frequently in Selenium automation.

• XPath Using Single Attribute: It finds an element based on a single, unique attribute. This approach is stable and simple, especially when the attribute remains consistent across different DOM structures and updates.

Example:

//input[@id='password']

• XPath Using Multiple Attributes: It combines more than one attribute using the and operator for better accuracy. It reduces ambiguity when multiple elements share similar properties or structures.

Example:

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

• XPath Using Text: It selects elements based on visible text content. Often used for buttons, links, or labels, this approach is simple and effective when the text is unique.

Example:

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

• XPath Using Partial Attribute Match: It uses the contains() function to locate elements when attributes are partially known. Ideal for handling dynamic attributes that change slightly between sessions or builds.

Example:

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

• XPath Using Parent-Child Relationships: It navigates through structured layouts to locate nested elements within containers. Useful when elements are grouped inside parent sections like forms, modals, or cards.

Example:

//div[@class='form-container']//input[@type='email']

What Are XPath Functions in Selenium?

You use XPath functions in Selenium to handle dynamic or structured elements. contains() matches partial attribute values, useful for changing IDs. starts-with() finds attributes with fixed prefixes, and text() selects elements by visible content.

• contains(): It is used when attribute values change partially or dynamically. It helps locate elements by matching partial strings. Ideal for frameworks like React or Angular-driven DOM structures.

Example:

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

• starts-with(): It is used to find elements whose attributes begin with a predictable prefix. Best for auto-generated IDs or fields that follow naming patterns like “user_101” or “user_202”.

Example:

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

• text(): It locates elements using visible text content. Works well for static UI labels, buttons, or menu items but fails with dynamic or localized text variations during testing.

Example:

//a[text()='Forgot Password?']

What Are Logical Operators in Selenium XPath?

XPath supports logical operators like and, or, and not() to refine or exclude conditions, ensuring flexible, precise, and adaptable locators across different automation scenarios.

• and: It combines multiple conditions to match elements only when all are true. Ensures targeted selection for elements requiring strict matching of multiple attributes simultaneously.

Example:

• or: It matches elements that satisfy either of the listed conditions. Useful for identifying components across UI variations or fallback attributes that differ between environments.

Example:

//input[@type='submit' or @name='login']

• not: It excludes elements that meet certain criteria. Useful when filtering hidden fields, ads, or inactive inputs to focus only on visible, actionable web elements.

Example:

//input[not(@type='hidden')]

What Are XPath Axes in Selenium?

XPath axes help navigate related elements in the DOM when attributes aren’t sufficient. They’re vital for dynamic UIs where element identifiers change frequently across builds.

• following: It selects all nodes appearing after the current element in the document. Ideal for locating input fields following labels or sequential items in structured forms and tables.

Example:

//label[text()='Password']//following::input[1]

• following-sibling: It finds elements at the same hierarchy level that come after the current node, often utilizing following-sibling in XPath to locate adjacent fields, containers, or validation messages that are positioned next to labels.

Example:

//div[@class='field-label']//following-sibling::div

• preceding: It retrieves all nodes before the current element. Helpful when targeting inputs or sections appearing before a recognizable reference point such as a button or heading element.

Example:

//button[@id='submit']//preceding::input[@type='password']

• preceding-sibling: It selects sibling nodes located before the current element. Perfect for associating error messages, hints, or labels that appear immediately before related interactive fields.

Example:

//div[@class='error-message']//preceding-sibling::label

• child: It targets direct child elements of a specific parent node. Frequently used for working with lists, menu items, or table rows that share one immediate container.

Example:

//ul[@class='menu']//child::li

• parent: It moves one level up from the current element to its parent container. Useful when accessing wrapper divs around inputs, labels, or grouped form components.

Example:

//input[@id='email']//parent::div

• descendant: It selects all nested child nodes under the current element. Ideal for identifying elements deep within hierarchies, like inputs inside forms or tables within modals.

Example:

//div[@class='user-section']//descendant::input[@type='text']

• ancestor: It moves upward through the DOM to find parent elements at any level. Commonly used to identify containing forms or panels for deeply nested elements.

Example:

//input[@id='username']//ancestor::form

What Is Chained XPath in Selenium?

Chained XPath in Selenium lets you locate nested elements. It links multiple XPath queries through parent-child paths, helping you narrow the search instead of selecting elements directly from the root.

This approach is especially helpful when:

• Multiple elements share similar attributes or classes.
• The element you want is deeply nested inside a specific section of the web page.
• You want your XPath to remain stable even if unrelated parts of the DOM change.

In a chained XPath, you start by locating a parent or container element, and then you move down to the child element inside it using the double slash //.

Syntax:

//parentTag[@attribute='value']//childTag[@attribute='value']

Example:

Suppose you have the following HTML:

<div class="signup-section">
    <form>
        <input id="email" type="text" placeholder="Enter your email">
    </form>
</div>

To locate the email input field inside the div with class signup-section, you can write:

//div[@class='signup-section']//input[@id='email']

XPath vs CSS Selectors: When to Choose Which?

When automating tasks like web scraping or testing, identifying the right elements on a webpage is essential. Two of the most common methods for locating elements are XPath and CSS Selectors. Each has its benefits, depending on the scenario.

For an in-depth comparison, check out this guide on XPath vs CSS Selectors.

Why Use TestMu AI Online Selenium Grid for Scalable Automation?

Cloud based testing platforms such as TestMu AI offers scalable online Selenium Grid to execute Selenium automation tests across thousands of real browser and operating system combinations on demand.

You can run Selenium tests without maintaining any local infrastructure. This approach significantly streamlines setup, accelerates cross‑browser coverage, and reduces overall test execution time.

To get started, check out this guide on Selenium testing with TestMu AI.

Features:

• Parallel Test Execution at Scale: Execute hundreds of Selenium tests concurrently across multiple browsers and operating systems to drastically reduce testing time. Ideal for large test suites.
• Comprehensive Debugging with Logs & Video Playback: Capture full execution details – Selenium logs, network logs, step-by-step screenshots, and video recordings to debug faster and build reliable bug reports.
• Test Insights: Leverage GenAI-native test insights to gain visibility into test trends with an interactive dashboard that shows execution timelines, pass/fail rates, environment breakdowns, and more.
• CI/CD Integration: Integrate effortlessly with tools like Jenkins, GitHub Actions, Azure DevOps for seamless test automation.

Best Practices for Using XPath in Selenium

To write stable and efficient Selenium scripts, using XPath the right way is crucial.

Below are key best practices that you can follow to handle XPath efficiently.

• Prefer Relative XPath Over Absolute XPath: Use relative XPath (//) instead of absolute paths (/html/body/…) to make your locators more resilient to UI changes.
• Use Unique Attributes: Target attributes like id, name, or custom data-* when available to create stable and specific locators.
• Use contains() for Partial Matching: When dealing with dynamic attribute values, use the contains() function to match partial values.
• Use text() to Match Visible Text: If the element’s visible text is consistent and unique, use the text() function to locate it.
• Combine Multiple Conditions: Make your XPath more specific by combining conditions using and or or.
• Use starts-with() for Matching Dynamic Prefixes: For attributes that begin with a consistent prefix, use the starts-with() function.
• Avoid Index-Based XPath When Possible: Using indexes like (//div[@class=’item’])[3] is fragile. DOM changes can break your test.
• Use XPath Axes When Necessary: Axes like following-sibling::, parent::, or ancestor:: help target elements in complex DOMs.
• Keep XPath Short and Readable: Write concise expressions that are easy to read and maintain. Avoid deeply nested or overly complex paths.
• Validate XPath Using Browser DevTools: Use tools like XPath tester or Chrome DevTools with $x(“your_xpath”) to test and validate XPath expressions before using them in scripts.
• Leverage Custom Data Attributes: Prefer data-testid, data-role, or other data-* attributes as they are designed for automation.

• Write Contextual Locators: Use nearby stable elements, like labels, to anchor your XPath reliably.

Common XPath Issues and How to Troubleshoot?

Here are some common XPath issues in Selenium and how to troubleshoot them.

• Invalid or Malformed XPath: Syntax errors like missing brackets, unclosed quotes, wrong axes, or stray characters.

Fix: Use browser DevTools or tools like SelectorsHub to validate and correct your XPath.

• XPath Matches Nothing: The element may not be present in the live DOM (e.g., inside iFrame, Shadow DOM, or is loaded dynamically).

Fix: Check for iframes using browser DevTools. Use JavaScript like document.querySelector or $x() in console. Add proper waits using WebDriverWait.

• XPath Returns Multiple Elements: The XPath is too broad or lacks specific filters.

Fix: Use indexes like (//div[@class=’item’])[1] or add more conditions such as //div[@class=’item’ and @data-id=’123′].

• Dynamic Attributes (IDs, Classes): Attributes change between sessions or page loads.

Fix: Use partial match functions like contains() or starts-with(). Example: //div[contains(@class, ‘btn’)].

• Element Inside Shadow DOM or Custom Elements: Standard XPath can’t access elements inside shadow DOM.

Fix: Use JavaScript like element.shadowRoot.querySelector(). Consider tools like Playwright which handle shadow DOM better.

• XPath Works in Browser but Not in Code: Possible timing issue or unhandled frame context.

Fix: Wait for elements using explicit waits. Make sure to switch to the correct iframe using driver.switchTo().frame(…).

• Case Sensitivity and Typos: XPath is case-sensitive; even small mismatches can break it.

Fix: Double-check tag names and attributes. Test XPath directly using $x(‘your_xpath’) in browser console.

Conclusion

You’ve now seen how XPath works in Selenium, from the basics to advanced techniques like axes and dynamic locators. We also looked at how to handle specific elements like loaders and how to follow best practices for writing reliable XPath expressions.

To scale your automation, you can use TestMu AI online Selenium Grid. It helps you run tests in parallel, debug faster, and cover multiple browser-OS combinations without managing infrastructure.

Austin Siewert

CEO, Vercel

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

Citations

• XPath Wikipedia: https://en.wikipedia.org/wiki/XPath