There are various types of locators in Selenium. A locator defines an address that uniquely identifies a web element within the webpage. Locators tells the Selenium about the web element it needs to perform the action on.
XPath is one of the locators in Selenium. It is a technique to traverse through the HTML structure of a webpage. It helps in navigating through the XML structure of HTML and XML documents. XPath expressions are capable of locating web elements on the web page that are complex and changes dynamically. Dynamic web elements are those whose attributes change dynamically when the web page is refreshed or some dynamic operation is performed on it. XPath is basically used when Selenium cannot the locate the web elements with the help of usual locators like id, name, class etc.
Syntax for XPath:
XPath is nothing but the XML Path. XPath identifies the path of a web element within a web page.
Following is the typical syntax that is used for creating XPath:
XPath = //tagname[@attribute_name=’attribute_value’]
// – selects the current node
tagname – identifies name of particular node that is being referred to locate a web element @ – selects a particular attribute
attribute_name – identifies name of selected attribute attribute_value – defines the value of chosen attribute
Types of XPath
Absolute XPath is an XML path that always begins from the root node of HTML document. It is considered as a straight forward technique to locate a web element, however, it’s not preferred because absolute XPath fails even if there is a slight change in the UI or HTML document. An absolute XPath begins with a single forward slash(‘/’).
Following is an absolute XPath expression-
Relative XPath is an XML path expression that can start from anywhere in the middle of HTML DOM structure. It begins with a double forward slash(‘//’), hence capable of selecting an element from anywhere on the web page. Relative XPath are comparably shorter than Absolute XPath that starts from root node and it is robust and less likely to be failed.
Following is an absolute XPath expression-
What are XPath axes?
XPath axes are used to search multiple nodes in XML document from the current node context. In general terms, an axis defines a relationship to the current(context) node and is useful for locating nodes relative to that node in the tree. A context node is the node that the XPath is currently looking at. When XPath Functions fail to locate an element, we use XPath axes along with the XPath Functions. XPath axes are used to locate such type of web elements that don’t have ID, name, class name, link text etc. and which can’t be identified or located by usual XPath methods. Hence, axes are used to locate dynamically changing web elements. Commonly used axes methods include sibling, child, parent, ancestor, self, preceding etc.
Handling dynamic and complex web elements using XPath
1. Basic XPath:
A Basic XPath expression selects nodes or a list of nodes with the help of attributes like ID, name, class name etc. Few examples of basic XPath expressions are listed below.
- xpath = //input[@value=’STOP’]
- xpath = //input[@type=’text’]
- xpath = //label[@id=’myLabel’]
- xpath = //a[href=’http:// testingblog.com’]
- xpath = //*[@class=’myClass’]
- xpath = //input[name=’submit’][@placeholder=’Submit Form’]
contains() method is used within in a XPath expression and mainly used when a part of value of an attribute changes dynamically. This method has an ability to locate elements with the partial text value of their attributes. For example, let’s say support team of an organization has their login usernames like support1, support2, support3 and so on where we can observe that the text ‘support’ is constant and the ending numeral i.e., 1,2,3 etc. keeps changing. In this scenario, contains() method can help us with locating such type of elements with constant part or partial text, like ‘support’ in the current example. Following are some XPath expressions using contains() method.
- xpath = //*[contains(text(),’support’)]
- xpath = //*[contains(@id,’submit’)]
- xpath = //*[contains(@type,’sample’)]
- xpath = //*[contains(@href,’ testingblog.com/contact’’)]
- xpath = //*[contains(@name,’tut’)]
In the last example, ‘tut’ is the partial text value for web elements having value of name attribute as tutorial1, tutorial2 and so on.
starts-with() method is used to find those web elements whose attribute values changes dynamically on refresh or any other operation on the web page. This method matches the starting text of an attribute to locate an element with dynamically changing attributes. For example, value of ID attribute of a web element changes dynamically such as ‘element5’, ‘element3’, ‘element20’ etc. but the beginning text ‘element’ remains intact every time. Following is the XPath expression using starts-with() method.
xpath = //label[starts-with(@id,’element’)]
4. OR & AND expressions:
In both OR and AND expressions, two conditions are used. The difference between both lies in the logic of evaluating both the conditions. In case of OR, either 1st condition or 2nd condition or both condition should be true to evaluate the overall expression as true. In simple words, there must be at-least one condition true to find a particular element. For example,
xpath = //*[@type=’submit’ OR @name=’btnSave’]
In case of AND, it is mandatory for both the conditions to be true to find a web element. It will not locate an element if any of the two conditions is false. For example,
xpath=//input[@type=’submit’ AND @name=’btnClear’]
text() method is used to find a web element based on its text. It basically locates an element with the exact text passed in the XPath expression. For example, following expression finds the web element with text ‘ClickMe’.
xpath = //td[text()=’ClickMe’]
6. XPath axes methods:
As we learnt earlier in the tutorial that XPath axes are used to locate dynamic and complex web elements when existing XPath methods fails to find such web elements. Let’s quickly have a look at few XPath axes methods that are commonly used.
This method makes a selection of all the elements in the HTML document on the basis of current node i.e., selecting all elements from current node.
xpath = //*[@type=’password’]//following::input xpath = //*[@type=text]//following::input
The ancestor axis selects all the ancestors’ elements such as parent, grandparent etc. from the context(current) node.
xpath=////ancestor::div  xpath=//[text()=Testing Blog’]//ancestor::div
This method selects all the children elements of the current node.
xpath=//[@id=’testing_types’]/child::li xpath=//[@id=’ testing_types]/child::li
This method selects all the nodes that come before the context i.e., current node.
This method select the following siblings of the current node. Siblings are present at the same level of the current node.
This method selects the parent of the current node.
This method selects the current node i.e., it indicates the context node itself.
xpath =//[@type=’text’]//self::input xpath =//[@type=’password’]//self::input
This method selects all the descendants of the current node i.e., descendants to the current element.
XPath is a robust technique to find or locate web elements in web page when other locators fail to work or there is absence of attributes like id, name, class name. Relative XPaths are more preferable over Absolute XPaths because of their robustness and high success rate of locating elements. XPath axes come in to picture when we have to deal with complex and dynamically changing web elements.