Alexis Kestler
Test automation engineers rely on effective and reliable methods for locating web elements when writing test scripts. One of the most powerful techniques for precisely targeting elements on a webpage is XPath.
XPath provides a standardized way to find any node in an XML or HTML document. With XPath, you can pinpoint elements based on their attributes, position in the document, or other distinctive features. This makes XPath locators resilient to changes in the application under test.
In this comprehensive guide, we will cover everything you need to master XPath locators in Selenium:
- What is XPath and why it‘s useful for test automation
- XPath syntax and expressions
- Absolute vs relative XPath
- Locating elements using XPath in Selenium
- XPath axes methods
- Common examples and use cases
- Recommendations and best practices
Let‘s get started!
What is XPath?
XPath (XML Path Language) is a query language for selecting elements and attributes within XML documents. It allows you to navigate through the document tree and precisely target the nodes you want.
The syntax for writing XPath expressions is similar to how you would write a file system path. You can also use functions and operators to filter nodes based on conditions.
Some key things to know about XPath:
- Works with XML and HTML documents (webpages are essentially HTML documents)
- Treats the document as a tree of nodes (elements, attributes, text)
- Allows you to navigate to any node by following the path
- Can select nodes based on conditions like attributes, text content, position etc.
Why Use XPath for Web Testing?
Here are some of the main reasons why XPath is useful for test automation:
- Flexibility – XPath provides many ways to target elements, not just by ID or class.
- Resilience – Small changes in application code don‘t break XPath queries.
- Precision – You can pinpoint specific elements in a large document accurately.
- Reusability – XPath expressions can be stored and reused across tests.
Overall, XPath provides unmatched flexibility and accuracy in identifying web elements during test automation.
XPath Syntax and Expressions
Now that you know what XPath is and why it is useful, let‘s look at the syntax for writing XPath expressions.
Consider this sample HTML:
<html>
<body>
<div id="content">
<p class="summary">Introduction</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</body>
</html>Here are some of the common XPath expressions to target elements:
| XPath Expression | Description |
|---|---|
| /html/body/div/p[1] | Selects first p element under div |
| //div/p | Selects all p elements under any div |
| //p[@class=‘summary‘] | Selects p element with class attribute = ‘summary‘ |
| //p[contains(text(),‘Paragraph‘)] | Selects p elements having text ‘Paragraph‘ |
Let‘s understand the various components of an XPath query:
- // – Selects nodes anywhere in document matching selection criteria
- / – Selects direct child nodes
- [@attribute] – Selects nodes with matching attribute value
- [index] – Selects node by numeric position
- [contains()] – Selects nodes if condition is true
There are many other syntax options available. But these basic building blocks should help you construct XPath queries for most test automation needs.
Absolute vs Relative XPath
XPath queries can be written in two ways – absolute XPath or relative XPath.
Absolute XPath
An absolute XPath provides the full path from the root element to the target node. It always starts with a single slash ‘/‘ indicating the root node.
Example:
/html/body/div/p[1]This XPath starts from html root node and then navigates to p element step-by-step via body and div nodes.
Absolute XPaths enable you to pinpoint the exact target node. But they are brittle – any change in the HTML structure can break the XPath query.
Relative XPath
A relative XPath starts from any point in the document and navigates to the target node from there. It does not depend on the full hierarchy from root.
Relative XPaths are more resilient to changes in the HTML structure.
Example:
//div/pThis XPath will find all p elements under any div element, irrespective of the full path.
For test automation, relative XPaths are generally preferred over absolute XPath.
Locating Elements using XPath with Selenium
Selenium WebDriver provides a simple API for locating elements on a web page using XPath queries.
Let‘s see how to leverage XPath locators in Selenium with some examples. We will be using Python for demonstration, but the concepts apply to any language binding.
Sample HTML:
<html>
<body>
<div>
<p id="first">First paragraph</p>
<p class="special">Second paragraph</p>
<p>Third paragraph</p>
</div>
</body>
</html>Python code:
# Import selenium webdriver
from selenium import webdriver
# Create webdriver instance
driver = webdriver.Chrome()
# Initialize xpath
first_para_xpath = "/html/body/div/p[1]"
# Find element
first_para = driver.find_element(By.XPATH, first_para_xpath)
# Print paragraph text
print(first_para.text)The key steps are:
- Import Selenium webdriver
- Create webdriver instance (can be Chrome, Firefox etc.)
- Initialize XPath string in a variable
- Use
find_element()and pass XPath to locate the element - Interact with element as needed (get text, click etc.)
This demonstrates how we can leverage an XPath string to precisely locate the desired element.
Let‘s look at some more examples of locating elements using XPath and Selenium:
Find by attribute
# XPath based on ‘id‘ attribute
id_xpath = "//p[@id=‘first‘]"
first_para = driver.find_element(By.XPATH, id_xpath)Find by text contents
# Contains text ‘Third paragraph‘
text_xpath = "//p[contains(text(), ‘Third paragraph‘)]"
third_para = driver.find_element(By.XPATH, text_xpath)Find using partial attributes
# p element with class containing ‘special‘
class_xpath = "//p[contains(@class, ‘special‘)]"
second_para = driver.find_element(By.XPATH, class_xpath)Hope these examples give you a good overview of how to leverage XPath for locating elements with Selenium!
Using XPath Axes
XPath includes special axes methods to select nodes based on their position relative to the current node.
Some commonly used axes methods are:
- ancestor – selects all parent nodes up to the root
- parent – selects the immediate parent
- child – selects immediate children
- descendant – selects all children at any level below
- following-sibling – selects subsequent siblings
Here are some examples:
Sample HTML
<div>
<p>Para 1</p>
<span>Span 1</span>
<p>Para 2</p>
<span>Span 2</span>
</div>child axis
# Select child paragraphs
child_xpath = "//div/child::p"
para_elements = driver.find_elements(By.XPATH, child_xpath)following-sibling axis
# Following sibling spans of first p
sibling_xpath = "//p[1]/following-sibling::span"
span_elements = driver.find_elements(By.XPATH, sibling_xpath) Learn more about the various XPath axes methods and how to apply them for different use cases.
Common Use Cases and Examples
Now that you are familiar with the basics of XPath syntax, let‘s look at some common use cases and examples:
Locate element when id is dynamic
If an element‘s id is generated dynamically and changes on each page load, use XPath based on static attributes:
# Input element with name attribute as ‘username‘
input_xpath = "//input[@name=‘username‘]"Find element based on nested attributes
Target elements having specific combination of attributes at multiple levels:
# Icon element with specific class within parent nav element
icon_xpath = "//nav[@class=‘main-nav‘]//i[@class=‘icon help-icon‘]"Get sibling element after selection
Use XPath axes methods to traverse between sibling nodes:
# Get the next div after ‘header‘ div
next_div_xpath = "//div[@id=‘header‘]/following-sibling::div[1]" Iterate through repeated components
Loop through matching nodes to interact with each element in a set:
# Results displayed as Repeated divs
results_xpath = "//div[contains(@class, ‘result‘)]"
for result in driver.find_elements(By.XPATH, results_xpath):
print(result.text) These are just some examples to give you ideas on how to use XPath effectively for different test automation scenarios.
Best Practices and Recommendations
Here are some best practices to follow when using XPath locators for test automation:
- Prefer relative XPaths over absolute. They are more resilient to changes.
- Store commonly used XPaths in variables or external files for reusability.
- Use descriptive variable names like home_page_search_input_xpath.
- Leverage axes methods like parent, child rather than full paths when possible.
- Avoid very long and complex XPath expressions. Break into smaller parts if needed.
- Use indexes sparingly. They break easily if elements are added/removed.
- Validate all XPaths after any major HTML changes in the application.
- Combine XPath with other identifiers like id, class, name etc. when possible for readability.
Mastering XPath for test automation requires practice and experience. Start applying XPath locators for your next testing project to gain confidence!
Conclusion
XPath is an invaluable skill for test automation engineers to precisely locate and interact with web elements.
In this guide, you learned:
- Fundamentals of XPath syntax and expressions
- Distinction between absolute and relative XPath
- Techniques to locate elements using XPath with Selenium
- How to leverage XPath axes methods
- Popular use cases and examples
- Best practices for using XPath
XPath combines immense power and flexibility to target elements in complex web documents.
With these learnings, you are now well equipped to start using XPath locators in your test automation frameworks and scripts. Refer to this guide whenever you need a quick refresher on constructing effective XPath queries.
Happy testing!
