Understanding XPath in Selenium: Types, Differences, and Custom XPath Writing Guide
If you're getting started with Selenium automation, one of the first concepts you'll encounter is XPath—a powerful and versatile method used to locate elements on a web page.
At first, XPath might seem complex or overly technical, especially with its long paths and unfamiliar syntax. But don’t worry—understanding XPath becomes much easier when you relate it to something we all experience in real life.
Imagine you're visiting a friend who lives in an apartment within a large city. To get there, you follow a specific route—from the country, to the city, to the street, to the building, and finally to their door. XPath works the same way—it helps you navigate through the layers of a webpage to reach a specific element.
In this blog, we’ll break down what XPath is, explore its types (absolute vs. relative), and explain how it works—all through a simple, real-life analogy that makes it easy to grasp, even if you're new to automation.
What is XPath?
XPath stands for XML Path Language. It’s a query language used to locate nodes in an XML document. Since HTML shares a similar hierarchical structure with XML, XPath is widely used in Selenium to identify and interact with elements on a web page.
In Selenium, XPath helps you:
Locate elements when other locators like ID, Name, or Class aren’t available or reliable
Traverse complex, dynamic web structures
Work with deeply nested or dynamically generated content
There are two main types of XPath:
Absolute XPath
Relative XPath
What is Absolute XPath?
Absolute XPath provides the complete path to an element, starting from the root of the HTML document (<html>) and moving step by step through every node in the hierarchy. It uses a single forward slash (/) to navigate through each level of the DOM.
Example: /html/body/div[2]/div[1]/form/input[1]
This XPath tells Selenium:
Start from the <html> tag → go to <body> → then to the second <div> → inside that, the first <div> → then the <form> → and finally the first <input> element.
Each step is absolute and must be followed exactly as written. If the structure of the page changes—even slightly—this XPath is likely to break.
Real-Life Analogy: Following a Full Street Address
Imagine your friend invites you to their apartment, and you’ve never been there before. You ask them for the address, and they give you this:
/Country/State/City/Building Number/Floor Number/Apartment No.
You follow it exactly from the country, to the city, to the street, building, floor, and finally the apartment number. That’s how Absolute XPath works in Selenium—it follows the complete, rigid path from start to finish without skipping any steps.
Key Point:
If anything changes—like a new building on the street or a floor gets renumbered—you could end up lost.
In the same way, absolute XPath is fragile in dynamic web pages. Even a minor change in the DOM structure can break the locator.
What is Relative XPath?
Relative XPath allows you to locate elements in a more flexible and efficient way. Instead of starting from the root of the HTML document, it lets you begin from anywhere in the DOM. It uses double forward slashes (//) to search for elements that match certain conditions, regardless of their exact position in the hierarchy.
Example: //input[@id='email']
This means:
Find any <input> element that has an attribute id='email', no matter where it is on the page.
You don’t need to know or write the full path. You simply give it a unique clue, and Selenium finds it.
Real-Life Analogy: Using Landmarks Instead of Full Address
Let’s go back to our apartment example. This time, instead of giving you a full street-by-street address, your friend says:
Go to Liberty Street. Look for the blue building next to Starbucks. I’m in Apartment 504.
You’re using landmarks and partial instructions to reach your destination. You skip the country, state, and even the city—because you’ve been given a unique, identifiable clue.
That’s exactly what Relative XPath does. It helps you reach the correct element using attributes or text content that act like landmarks on the page.
Key Point:
Relative XPath is more reliable in real-world automation because it doesn’t break as easily when the page structure changes.
It’s shorter, more readable, and much easier to maintain, especially on complex or dynamic web applications.
Differences between Absolute and Relative XPath
How to Generate XPath Using Browser Developer Tools
Now that you understand what XPath is and the differences between absolute and relative XPath, let’s see how you can generate them directly from a web page using browser tools—no guessing required!
Most modern browsers like Google Chrome or Firefox have built-in developer tools that let you inspect elements and copy their XPath with just a few clicks.
Steps to Generate XPath in Chrome or Firefox:
Open the Web Page Navigate to the webpage where you want to inspect an element.
Open Developer Tools
Right-click anywhere on the page and select “Inspect”,
or press F12 or Ctrl + Shift + I (Windows) / Cmd + Option + I (Mac).
Find the Element Hover your mouse over the element you want to locate, then right-click on it in the Elements tab.
Find Absolute XPath:
Right-click the highlighted HTML element
Select Copy → Copy full XPath
How to Write Custom Relative XPath
Writing your own custom relative XPath gives you control and flexibility, especially when dealing with dynamic web elements. Here’s how you can create one from scratch.
We can write relative XPath in many ways
Syntax Patterns and How They Work:
1. //tagname[@attributename = 'value']
Use this when an element has a unique attribute.
example: //input[@id='email']
2. //tagname[text() = 'value']
Use when the element has visible text content you can match exactly.
example: //button[text()='Submit']
3. //tagname[contains(@attribute = 'value')]
Use when the attribute value is dynamic or partially known.
example: //input[contains(@id, 'user_')]
4. //tagname[contains( text() , 'value')]
Use when you want to match part of the visible text.
//a[contains(text(), 'Learn')]
Using and & or Operators in Custom XPath
You can make your XPath expressions more specific by combining multiple attribute conditions using logical operators like and and or.
Using and Operator:
//input[@type='text' and @name='username']
when we use and operator both attribute values should be true then only XPath will work .
Using or Operator:
//input[@type='text' or @name='username']
if we use or operator at least one attribute value should be match then XPath will work .
Best Practices:
Use relative XPath instead of absolute XPath for more reliable and maintainable scripts
Target elements with unique attributes like id, name, or data-*
Use functions like contains() for dynamic or partial attribute values
Avoid hardcoded indexes (e.g., [1], [3]) unless absolutely required
Test your XPath in browser DevTools before adding it to your automation script
Keep your XPath clean and readable for easier debugging and collaboration
Conclusion
XPath is a helpful tool in Selenium for finding elements on a web page, especially when other locators don’t work well. There are two types: Absolute XPath, which shows the full path but can break easily, and Relative XPath, which is more flexible and easier to use.
By understanding how and when to use these types, you can create better, more reliable test scripts. Keep practicing XPath to improve your Selenium automation skills!
Happy Testing!!
