Effective ways to use XPath in Selenium
By Shaumik Daityari, Community Contributor and Pradeep Krishnakumar, Manager - August 19, 2019
Selenium is a top choice for developers to automate cross browser testing of web applications. Selenium offers a wide variety of choices to navigate through web elements in meticulously designed tests.
What is XPath in Selenium?
XPath is a technique in Selenium to navigate through the HTML structure of a page. XPath enables testers to navigate through the XML structure of any document, and this can be used on both HTML and XML documents. This post looks at various ways to use the XPath element in Selenium to select various elements.
While other locators in Selenium which search for elements using tags or CSS class names are simpler to use, 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. This post covers a variety of methods to access elements using the XPath locator in Selenium. These Selenium XPath examples should provide a comprehensive view of all XPath techniques.
While Selenium has wrappers for most popular programming languages, the selector string remains the same for all of them. 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.
Here are the different types of XPaths in Selenium:
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:
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 structure of the page. This method is also known as a single slash search.
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.
If there are multiple forms on the page, one may need to provide an extra identifier for the form field.
While the example shown above is feasible if there is only a single form on the page, one can make the search patterns more robust by using attributes.
In place of id, one can use any attribute and its corresponding value to locate an element with Selenium.
While this example shows the use of 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:
Logical operators in selections
While attributes may be sufficient to locate elements in most cases, testers may feel the need of using logical operators too. 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.
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:
This snippet searches for any hyperlink that contains the text “Click Me” within it. Replace the tag with a wildcard * to search for any element that contains the text “Click Me”.
Final Thoughts on XPath in Selenium
While this post has discussed a variety of ways to locate elements on a web page using the XPath locator in Selenium Webdriver, one should use Occam’s razor, the simplest and logical options while selecting elements to ensure minimal rework in the event of a page redesign.
BrowserStack Automate supports automated responsive design testing for websites using Selenium.