How to use XPath in Selenium? (With Examples)
Selenium is a top choice for developers to automate cross browser testing of web applications. Selenium offers various choices to navigate through web elements in meticulously designed tests.
This guide will explore how to use the XPath in Selenium to select elements and understand the differences in relative, dynamic & absolute paths.
Table of ContentsWhat is XPath in Selenium?
XPath is a Selenium technique to navigate through a page’s HTML structure.
- It enables testers to navigate any document’s XML structure, which can be used on both HTML and XML documents.
- While other locators in Selenium that search for elements using tags or CSS class names are more straightforward, they may not be sufficient to select all DOM elements of an HTML document.
- XPath provides an option to search for an element within a web page dynamically, thus giving sufficient flexibility to tweak a locator to one’s advantage.
While Selenium has wrappers for most popular programming languages, the selector string remains the same. For instance, one may use the .find_element_by_xpath() method of the driver class in Python, but the locator string that goes as an argument to this method remains the same in all programming languages.
This tutorial focuses only on these locator strings, and the following Selenium XPath examples should provide a comprehensive view of all XPath techniques.
Types of XPath in Selenium
Here is a quick overview of the two types of Selenium XPath:
- Absolute XPath: Begins from the root of the HTML document and specifies the complete path to the element. It’s not as flexible and can break if the page structure changes.
- Relative XPath: Starts from a specific element and navigates through the DOM hierarchy to locate the desired element. It’s more flexible and resilient to changes in the page structure.
1. Absolute Path
The simplest XPath locator example in Selenium is to provide the absolute path of an element in the DOM structure.
For instance, consider the HTML below:
<html> <head>...</head> <body> ... <form id="loginForm"> <input name="name" type="text" value="First Name" /> <input name="name" type="text" value="Last Name" /> <input name="email" type="text" value="Business Email" /> <input name="password" type="password" /> <input name="continue" type="submit" value="Sign Me Up" /> </form> </body> </html>
The syntax to select the business email field is as follows:
html/body/form/input[3]
This searches for the first form tag in the body of the page and selects the third input field in the form. This format, though simple, is also the most vulnerable to minor changes in the page’s structure. This method is also known as a single slash search.
2. Relative Path
A relative path, or a double slash search, begins with double slashes. The double slashes signify a break in the absolute path. Here is how to select the same business email field using a relative path.
//form/input[3]
If multiple forms exist on the page, one may need to provide an extra identifier for the form field.
How to handle Dynamic Elements in Selenium using XPath?
1. Using Attributes
While the example shown above is feasible if only a single form is on the page, one can make the search patterns more robust by using attributes.
//form[@id='loginForm']/input[3]
In place of id, one can use any attribute and its corresponding value to locate an element with Selenium.
While this example shows a single attribute, one can also use multiple attributes of the same tag to locate it on the page.
For instance, to select the Last Name field, one can use the following XPath syntax in Selenium:
//input[@name='name'][@value='Last Name']
2. Logical Operators in Selections
While attributes may be sufficient to locate elements in most cases, testers may also need to use logical operators.
For instance, if the HTML structure has name or id attributes populated by the value “name”, one may use the following syntax to select them.
//input[@id='name' or @name='name']
Similarly, one can replace the or keyword with and to only select an element that satisfies all conditions.
3. Using Text
One may search for an element using the text that it contains too. For instance, to select a link that says “Click Me”, one can use the following search:
//a[text()='Click Me']
This snippet searches for any hyperlink containing the text “Click Me”. Replace the tag with a wildcard * to search for any element that contains the text “Click Me”.
//*[text()='Click Me']
Final Thoughts on XPath in Selenium
While this post has discussed various ways to locate elements on a web page using the XPath locator in Selenium Webdriver, one should use Occam’s razor, the most straightforward and logical option, while selecting elements to ensure minimal rework in the event of a page redesign.
- Also, know that BrowserStack Automate supports automated website testing using Selenium. BrowserStack’s cloud Selenium allows testers to automate visual UI tests in real user conditions.
- Install the SDK for your framework and start testing on 3500+ real desktop and mobile browser combinations with access to real devices.
- Debug easily using video recordings, automated screenshots of errors, text logs, console logs and network logs. to get accurate results.
- Cut the execution time of your test suite by more than 10X using parallel tests on the BrowserStack Selenium grid.
Simply sign up for free, select a device-browser-OS combination, and start running tests.
Don’t forget to learn more through the following webinar, where David Burns (core contributor to Selenium) talks about how Selenium 4 features would impact your tests.
ncG1vNJzZmivp6x7o77OsKqeqqOprqS3jZympmeXqralsY6xp5qsmGK2r3nSnqOeppmqug%3D%3D