Chapter{3}: Selenium Automation Testing: Mastering XPath: From Basics to Advanced

7 min readFeb 1, 2025

If you’ve ever found yourself struggling to locate an element on a webpage while automating tests, XPath is here to save the day. Think of it as a GPS for web elements — pointing you to the exact location of buttons, text fields, and other elements on a page. In this article, we’ll go from the absolute basics to advanced XPath techniques, so by the end, you’ll be an XPath pro.

1. Understanding XPath

XPath (XML Path Language) is a query language used to navigate through XML and HTML documents. In Selenium, XPath is one of the most powerful locators for finding elements, especially when other locators (like ID or class) are unreliable.

Types of XPath:

There are two primary types of XPath:

1: Absolute XPath — Think of this as giving directions from the homepage:

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

This XPath follows a fixed path from the root element (html) to the target. If any structure changes in the DOM, this XPath breaks. Not ideal for test automation.

2: Relative XPath — More flexible and starts from anywhere in the document:

//input[@type='text']

This XPath starts searching from anywhere in the document for an input element with type="text", making it more adaptable to DOM changes.

Which one is better?
Relative XPath is the way to go! It’s more maintainable and doesn’t break easily when minor changes occur in the webpage.

How to Inspect a Page and an Element:

1: Go To https://www.myntra.com/

2: Right Click(or CTRL+SHIFT+I) >> Click Inspect from the Menu >> Go to HTML Page >> CTRL+F >> use the find field to write x-paths

3: use this //a[@data-group=”men”], use the below format

x-path: tag-name[@attribute=’value’] or tag-name[@attribute=”value”]

Myntra-Like HTML Example (This isn’t an exact copy; the real one would be much larger and more complex)

<!DOCTYPE html>
<html>  <!-- Root Node -->
<head>
    <title>Myntra - Online Shopping</title>
</head>
<body>  <!-- Parent Node of everything inside -->

<!-- Navigation Bar -->
    <div class="navbar">  <!-- Node -->
        <a href="home.html" class="nav-link">Home</a>  <!-- Tag Name: 'a', Attribute: href, class -->
        <a href="men.html" class="nav-link">Men</a>
        <a href="women.html" class="nav-link">Women</a>
    </div>
    <!-- Search Section -->
    <div class="search-bar">  
        <input type="text" placeholder="Search for products" class="search-input"/> 
        <!-- Tag Name: 'input', Attribute: type, placeholder, class -->
        <button class="search-btn">Search</button>  
        <!-- Node, Tag Name: 'button', Attribute: class -->
    </div>
    <!-- Product Section -->
    <div class="product-list">  
        <div class="product-item">  <!-- Parent Node of the elements inside -->
            <img src="nike-shoes.jpg" alt="Nike Shoes"/>  
            <!-- Tag Name: 'img', Attribute: src, alt -->
            <h2>Nike Running Shoes</h2>  <!-- Current Node if we are inside this tag -->
            <button class="add-to-cart">Add to Cart</button>  
        </div>
    </div>
</body>
</html>

Breaking It Down with Explanations

Root Node (/html)

The <html> tag is the root node because it is the starting point of the document.
Everything inside belongs to this node.

Node (<div class="navbar">, <button class="search-btn">, etc.)

Any HTML element (like <div>, <button>, <img>) is considered a node.
Example: The <div class="navbar"> is a node that contains navigation links.

Current Node (. in XPath)

If we are inside a specific tag, that tag is the current node.
Example: If we are inside <h2>Nike Running Shoes</h2>, then this <h2> tag is the current node.

Parent Node (.. in XPath)

The parent node is the direct container of an element.
Example: The <div class="product-item"> is the parent node of <img>, <h2>, and <button>.
In XPath, //h2/.. will select its parent <div class="product-item">.

Tag Name (h2, div, button, input, etc.)

Each HTML element has a tag name like div, button, h2, etc.
Example: <button> has a tag name button.
In XPath, //button selects all buttons on the page.

Attribute (class, href, alt, etc.)

Attributes provide extra information about an element.
Example: <a href="men.html" class="nav-link">Men</a>
href="men.html" is an attribute that defines the link destination.
class="nav-link" is an attribute that assigns a CSS class.
In XPath, you can select elements by attributes:
//a[@class='nav-link'] selects all <a> tags with class="nav-link".

How This Helps in XPath?

Now that you understand nodes, parent-child relationships, attributes, and tag names, you can write more precise XPath queries.

For example:

//div[@class='product-item']/h2 → Selects the product title inside the product container.
//input[@placeholder='Search for products'] → Selects the search bar.
//button[contains(text(),'Add to Cart')] → Selects buttons with "Add to Cart" text.

This understanding is key to mastering Selenium automation for Myntra or any other website!

The real Example:

To find a parent use “/..”, and to find it’s parent, another “/..”

2. XPath with Attributes

The most common way to use XPath is by selecting elements based on their attributes.

Example:

//button[@id='submit']

This selects the <button> element that has an id="submit".

3. XPath Functions for Better Element Selection

Sometimes, elements don’t have fixed IDs or names. That’s when XPath functions come in handy.

3.1 Using `text()`

If an element has a unique text value, you can directly locate it:

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

Finds the button that has “Login” as its text.

3.2 Using `contains()`

Useful when part of an attribute’s value is dynamic:

//button[contains(text(),'Sign')]

This will find any button containing the word “Sign,” like “Sign In” or “Sign Up.”

3.3 Using `starts-with()`

If an attribute’s value follows a common prefix:

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

Finds input fields where the id starts with "user" (e.g., user123, user_name).

4. Traversing the DOM with XPath

Sometimes, the best way to locate an element is by navigating from a known element.

4.1 Finding Parent Elements

To locate the parent of a known element:

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

This selects the <div> that contains the input with id="email".

4.2 Finding Child Elements

To locate direct child elements:

//div[@class='container']/child::input

Finds all input elements that are children of a div with class container.

4.3 Finding Sibling Elements

Sometimes, you need to find an element next to another.

Find the following sibling:

//label[@for='username']/following-sibling::input

This finds the input element that comes right after a label with for="username".

Find the preceding sibling:

//input[@id='password']/preceding-sibling::label

Finds the label before the input field for password.

5. Advanced XPath: Going Beyond Basics

5.1 Using `ancestor`

Finds any ancestor element of a given node.

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

Finds the <form> that contains the input field with id="search".

5.2 Using `descendant`

Finds all descendant elements under a specific node.

//div[@id='menu']/descendant::a

Finds all <a> (links) inside a div with id="menu".

5.3 Using `following` and `preceding`

Find all elements after a known element:

//h2[text()='Products']/following::div

Finds all div elements that appear after the h2 with text "Products".

Finding the x-path of Gmail on Google

Traversing to the Images using the same x-path, that we have used for Gmail.

//a[@aria-label=”Gmail “]/following::div/a[@class=”gb_W”]

Find all elements before a known element:

//h2[text()='Products']/preceding::div

Finds all div elements that appear before the h2 with text "Products".

6. Real-World Examples

Scenario 1: Automating a Login Form

WebElement username = driver.findElement(By.xpath("//input[@name='username']"));
WebElement password = driver.findElement(By.xpath("//input[@name='password']"));
WebElement loginButton = driver.findElement(By.xpath("//button[text()='Login']"));

username.sendKeys("testuser"); //will learn more on this soon
password.sendKeys("password123"); //will learn more on this soon
loginButton.click(); //will learn more on this soon

This script:

Finds the username and password fields using XPath
Enters text into them
Clicks the login button

Scenario 2: Navigating a Menu

WebElement menu = driver.findElement(By.xpath("//nav[@id='main-menu']/descendant::a[text()='Contact']"));
menu.click();

Finds and clicks the “Contact” link inside the nav menu.

Scenario 3: Handling Dynamic Elements(More in the next Chapter)

Sometimes, element attributes change dynamically. Here’s how XPath helps:

WebElement searchBox = driver.findElement(By.xpath("//input[contains(@class, 'search-input')]"));
searchBox.sendKeys("Selenium XPath");

Even if the full class name changes (search-input-123), this will still find the element.

Final Thoughts

XPath is an incredibly powerful tool for locating elements on a webpage. By mastering:

Basic absolute and relative XPath
Attribute-based selection
Functions like contains(), text(), and starts-with()
DOM traversal techniques like parent-child and sibling relationships
Advanced navigation methods like ancestor, descendant, following, and preceding

You’ll be able to automate even the trickiest of web pages.

Now, go ahead and put these XPath techniques to work in your Selenium tests!

You can now catch the podcast on YouTube too!

Happy Coding!

Chapter{3}: Selenium Automation Testing: Mastering XPath: From Basics to Advanced

1. Understanding XPath

Types of XPath:

Myntra-Like HTML Example (This isn’t an exact copy; the real one would be much larger and more complex)

Breaking It Down with Explanations

How This Helps in XPath?

2. XPath with Attributes

Example:

3. XPath Functions for Better Element Selection

3.1 Using `text()`

3.2 Using `contains()`

3.3 Using `starts-with()`

4. Traversing the DOM with XPath

4.1 Finding Parent Elements

4.2 Finding Child Elements

4.3 Finding Sibling Elements

Find the following sibling:

Find the preceding sibling:

5. Advanced XPath: Going Beyond Basics

5.1 Using `ancestor`

5.2 Using `descendant`

5.3 Using `following` and `preceding`

Find all elements after a known element:

Find all elements before a known element:

6. Real-World Examples

Scenario 1: Automating a Login Form

Scenario 2: Navigating a Menu

Scenario 3: Handling Dynamic Elements(More in the next Chapter)

Final Thoughts

Written by Automate This. By Mrigank Saxena

No responses yet

Chapter{3}: Selenium Automation Testing: Mastering XPath: From Basics to Advanced

1. Understanding XPath

Types of XPath:

Myntra-Like HTML Example (This isn’t an exact copy; the real one would be much larger and more complex)

Breaking It Down with Explanations

How This Helps in XPath?

2. XPath with Attributes

Example:

3. XPath Functions for Better Element Selection

3.1 Using text()

3.2 Using contains()

3.3 Using starts-with()

4. Traversing the DOM with XPath

4.1 Finding Parent Elements

4.2 Finding Child Elements

4.3 Finding Sibling Elements

Find the following sibling:

Find the preceding sibling:

5. Advanced XPath: Going Beyond Basics

5.1 Using ancestor

5.2 Using descendant

5.3 Using following and preceding

Find all elements after a known element:

Find all elements before a known element:

6. Real-World Examples

Scenario 1: Automating a Login Form

Scenario 2: Navigating a Menu

Scenario 3: Handling Dynamic Elements(More in the next Chapter)

Final Thoughts

Written by Automate This. By Mrigank Saxena

No responses yet

3.1 Using `text()`

3.2 Using `contains()`

3.3 Using `starts-with()`

5.1 Using `ancestor`

5.2 Using `descendant`

5.3 Using `following` and `preceding`