How to use XPath in Selenium?
By Shaumik Daityari, Community Contributor - February 1, 2023
Table of Contents
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.
What is XPath in Selenium?
XPath is a Selenium technique to navigate through a page’s HTML structure.
- It enables testers to navigate through 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 dynamically search for an element within a web page, 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.
Read More: Quick XPath Locators Cheat Sheet
Types of XPath in Selenium
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.
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.
Also Read: Quick CSS Selectors Cheat Sheet
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']
Learn More: CSS Selector in Selenium scripts
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.
- Remember that Selenium tests must be run on a real device cloud to get accurate results.
- BrowserStack’s cloud Selenium grid of 3000+ real browsers and devices allows testers to automate visual UI tests in real user conditions.
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.
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
