If you are somewhat familiar with Selenium automation, you would know the importance of XPath. For those who are just starting with Selenium – XPath is one of the most popular element locator technique in Selenium along with CSS selector, i.e. mastering XPath or CSS is essential for the Selenium test automation. Yeah! You can extract the XPaths from Firepath-like tools but these cannot be used directly for dynamic web elements. And we think getting the basics is a must >> Tools can be used afterwards. This article is an introduction to XPath along with some XPath examples.
What is XPath?
As per Wikipedia –
XPath (XML Path Language) is a query language for selecting nodes from an XML document. XPath was defined by the World Wide Web Consortium (W3C). The XPath language is based on a tree representation of the XML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria. In popular use, an XPath expression is often referred to simply as “an XPath”.
What do you get out of this definition?
- XPath stands for ‘XML Path Language’.
- It’s a query language for selecting nodes from an XML document.
- It’s based on a tree representation of the XML document.
- It provides the ability to navigate around the tree, selecting nodes by a variety of criteria.
How is XPath related to Selenium Automation?
The basic process of Test automation includes ‘identifying the element and then performing the action’. Different tools employ different techniques in order to identify elements (or objects) on a web page. As far as Selenium is concerned, it has its own set of element locators. One of the element locator technique is XPath. XPath utilizes the web page HTML DOM structure in order to identify respective elements.
Here comes the obvious question – Web page uses HTML Document Object Model. XPath is used to navigate & locate elements in an XML. So how are XPath examples relevant for a web page? Simply stated,
- A = B (XPath is used to navigate & locate elements in an XML)
- B = C (XML and HTML has similar syntax – HTML is an XML file)
Hence A = C, i.e. XPath can be used for locating elements in HTML pages/web pages.
Locating elements is obviously the key to writing a test, and Selenium offers several ways to do it: By name, id, Link text, etc. But these locators are efficient for simple tests, i.e. static web page where elements are NOT changing dynamically. What if these attributes are changing dynamically each time you load (or refresh) a web page? Yeah! XPath comes for rescue… XPath uses “path like” syntax to identify and navigate nodes in a web page, even if dynamic – the path to the element won’t change so often!
It’s like navigating to windows directory step by step — C:\Users\deepanshuagarwal\Documents\Testing\SoftwareTestingStudio\Selenium\Java
HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications. An HTML element is an individual component of an HTML document or web page. HTML is composed of a tree of HTML elements and other nodes, such as text nodes. HTML documents imply a structure of nested HTML elements. These are indicated in the document by HTML tags, enclosed in angle brackets thus: <p>, indicated by a pair of tags: a “start tag” <p> and “end tag” </p>. Before moving on, please revisit the “HTML Coding Basics Required For Selenium Automation”.
In XPath the starting point is called the context node. XPath helps to locate elements via different methods, i.e. with respective to a known element, partial fixed attribute values or elements without attributes. XPath is one of most flexible and strongest location strategy!
Syntax for XPath
The basic syntax of an XPath expression is,
XPath = //Tag-name[@Attribute-Name=’Attribute-value’]
- ‘/’ or ‘//’– The single slash and double slash are used to create absolute and relative XPaths (explained later). Single slash is used to start the selection from root node. Whereas, the double slash is used to fetch the current node matching the selection. For now, we will be using ‘//’ here.
- Tag-name – Tags in HTML begin with ‘<‘ and end with ‘>’. These are used to enclose different elements and provide information about processing of the elements.
- @ – To select a particular attribute
- Attribute-Name – Attributes define the properties that the HTML elements hold.
- Attribute-value – Attribute Value as the name suggest, are the values of the attributes.
Absolute XPath Eamples
Absolute in English means ‘Total’. Applied to HTML DOM, an absolute XPath is used to select an element from the ‘root node’, i.e. specify the total route to reach a particular element. The key characteristic of absolute XPath is that it begins with the single forward slash (/). A single slash at the start of XPath instructs XPath engine to look for element starting from root node. Absolute XPath traverse the whole DOM to reach the element.
Absolute XPath for Google Search text box would be,
- The advantage: It is the direct way to find an element, i.e. it identifies the element very fast.
- Disadvantage: As you might have guessed, what if there is a small change in the HTML DOM from the path of root node to the desired element? I.e. any new element is added or deleted, etc. Yeah! The earlier XPath stands invalid, i.e. it increases the maintenance costs.
— Earlier: html/head/body/table/tbody/tr/th
— New: html/head/body/form/table/tbody/tr/th
Additionally absolute XPaths are lengthier and not readable. Hence it not recommended to use absolute XPath in Selenium. Absolute XPaths shall be used only when a relative a XPath cannot be constructed (which is highly unlikely).
Relative XPath Examples
Relative in English means ‘Comparative’. As you might have guessed, the relative XPath for a particular element is defined in comparison to a particular HTML node, i.e. the path starts from the node of your choice – it doesn’t need to start from the root node. We do this in our real life as well – giving directions to a new location with respect to an already known location (a landmark). A relative XPath starts with a double forward slash (//), which instructs XPath engine to search for matching element anywhere in the HTML document.
Taking the same Google Search textbox as example, below is the extracted HTML for that particular element,
<span style="font-family: helvetica, arial, sans-serif;"><input id="lst-ib" class="gsfi" dir="ltr" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background: url('data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D') transparent; position: absolute; z-index: 6; left: 0px; outline: none;" title="Search" spellcheck="false" autocomplete="off" maxlength="2048" name="q" type="text" value="" />
Look out for specific attribute-value pairs like id=”lst-ib” OR name=”q” OR title=”Search”. The relative XPath examples for it will look like,
Advantage: Easier to read and create, these XPath examples can select the elements at any location that matches the selection criteria. There is a good chance that your XPath (absolute) will vary in every release. Hence it is always better to choose Relative XPath!
Note: If there are multiple elements for the same XPath, Webdriver will select the first element that is identified.
When using Selenium for automated testing, we find that using XPath Axes takes less effort, gets a better result, and makes our automation scripts flexible. Its powerful capabilities open up many new methods for locating complex and even dynamic elements which in the end, make your scripts easier to maintain. We would suggest you try XPath examples yourself, so that you can understand it more efficiently. In subsequent posts we will look at different methods available for using XPath expressions in Selenium!