Identify web elements using XPaths

As Many people having a hard time of writing xpaths for web elements in UI automation, I though to cover some basic knowledge on how to identify and construct XPaths for web elements. There are certain elements which are not uniquely located by css selector, where we need the help of XPaths to uniquely identify these web element. XPaths have both pros and cons. Let’s have a look at what XPaths is and how to deal with it.

What is XPath?

XPath also called XML Path is a language to query XML documents. It is an important way to locate elements in automation. It consists of a path expression along with some conditions. Here, you can easily write XPath to locate any element in the webpage. It is designed to allow the navigation of XML documents, with the purpose of selecting individual elements, tags and attributes

Now, let’s understand how to write an XPath for an XML Document.

The XML document has a tree-like structure. Below image is an example of an XML document where you have different tags and attributes. Here, It starts with a tag called the bookstore, which is also an element or a node.

The Bookstore node has a child node Book. It is further followed by an attribute called category which has value of Cooking. And this book node, in turn, has 2 child nodes which is Title and Author. Now, let’s visualize this XML document in a tree-like structure. Here, the bookstore is a root node which has 2 children of type book. Category of 1st book type is cooking, and 2nd is children. As you can see in the below figure, both have 2 tags which is title and author.

Here, I will start with the root node which is bookstore, then I will locate the book under category: children. Once I reach the correct node, the next step will be to pick a node with an author tag. So, XPath can be written like below:

bookstore/book[@category=’children’]/author

This is an XPath query to locate the author of a book whose category is children. Now let’s understand the syntax of the XPath.

Syntax of Xpath

Below image explains XPath Syntax and its terminology.

• //: Double slash It is used to select the current node.
• / : Single slash will look for the HTML element at the start of the document.
• tagname: It is the name of the tag of a particular node.
• @: It is used to select to select attribute.
• Attribute: It is the name of the attribute of the node.
• Value: It is the value of the attribute
• Dot “.” : It will give the currently selected node, Eg: //h3/.
• Double dot “..“ : It selects the parent of the current node. Eg: /div/select/..
• Asterisk “*“ : It selects any element present in the node Eg: //div/*
• Address and Asterisk “@*“ : It selects any attribute of the given node. Eg: //div[@*]
• Pipe “|“ : This expression is used to select a different path. Using this XPath, we can select both expressions. Eg: //div/h5|//div/form

How to locate web elements using Predicates

Predicates find a specific node/element by its index. Eg: //div/input[1]. Moreover, it selects the first input element, which is the child of the div element. Following are few of most used Predicates :

• Get the last node : Get the last node using the function “last()” inside the square bracket.

Eg: //div/input[last()]

• Get the node with specified Position : Get the node from specific positions by using “position()” inside the square bracket.

Eg: //div/input[position()=’2′]

Types of Xpath

There are two types of XPath and they are:

1. Absolute XPath
2. Relative XPath

First, let’s understand what is Absolute XPath.

1.Absolute XPath

It is the direct way to find the element from the top of the web pages. Simply locating the element from the top, but the disadvantage of the absolute XPath is that, if there are any changes made in the web page, then the path of the element gets failed as the changes in DOM hierarchy .

Eg: /html/body/div[1]/section/div[1]/div

2.Relative XPath

For Relative XPath, the path starts from the middle of the HTML DOM structure. It begins with the double forward slash (//), which means it can search the element anywhere at the webpage.

Eg: //input[@id=‘ap_email’]

Now, let’s understand this with the help of an example.

I will launch Google Chrome and navigate to google.com. you just have to click the Elements tab and press Ctrl + F to open a search box in chrome developer tool. On inspecting the web element, you can see it has an input tag and attributes like class and id. So you can write XPath and it will try to search based on that criteria. As you can see in the below image. it will highlight the element in the DOM which is identified by particular XPath.

XPath Functions

Automation using automation tools such as selenium has a great technology that provides many ways to identify an object or spy element on the web page, such as firefox addon -firebug, firebug lite for google chrome, etc.

But sometimes we do face problems in identifying the objects on a page which have the same attributes. Some of such cases can be: elements having the same attributes and names or having more than one button with the same name and ids. In such cases, it’s challenging to identify a particular object on a web page and this is where XPath functions come to rescue.

Types of XPath Functions

Here will explain three of the most widely used functions:

1. contains()
2. starts-with()
3. text()

1. contains():

It is a method used in an XPath expression. When the value of any attribute changes dynamically e.g. login information, this method comes into use. It can locate a web element with the available partial text.

As you can see in the above source code snippet, it has a <img> tag, followed by its attributes. let’s say, I want to locate its src attribute using XPath, As an src attribute contains the URL in its value, there are chances that its value or some part of the URL might change while you reload the page. So, the bottom line here is, a part of the attribute value is static while the rest is dynamic, in such cases, we generally prefer using partial XPath.

XPath query looks like:

//mg[@contains(@src,’content’)]

2. starts-with():

This function is used to find a web element whose value of an attribute changes on the refresh or on any other dynamic operation on the web page. In this, we match the starting text of the attribute to locate an element whose attribute has changed dynamically.

Example: On the web page, ID of a particular element changes dynamically such as ‘id1’, ‘id2’, ‘id3’, etc., but the remaining text will be the same.

As you can see in the figure src attribute starts with https. It will locate the elements that start with https. Thus, this is how starts-with function is used to locate a particular element on the webpage.

XPath query looks like:

//img[starts-with(@src,’https’)]

3. text():

This expression is used with the text function to locate an element with exact text

The asterisk (*) defines any tag with the same value. This gives an XPath query that looks like:

//*[text()=’Search Google or type a URL’]

Also, you can use contains () and text () functions both together.

Here first I have used contains(), and passed the first argument as text(). Now, text() should hold a value Search Google or type a URL. Also, I have not used @ because the text() is a function and not an attribute. This is how you can use two XPath functions together.

Reference : https://medium.com/edureka/xpath-in-selenium-cd659373e01a

AND & OR Operators

The AND operator is used for combined two different conditions or attributes to identify any element from a webpage using XPath. Eg: if we have more than 2 attributes for a particular web element, to uniquely identify it, we can use AND operator, Here all conditions should be true to find the element.

Eg: //input[@class=’is_required validate account_input form-control’ and @name=’email'] 

The OR operator used to locate an element based on any of the condition provided in the xpath. The attribute of the element can contain any of the values, So putting a condition with “or ” will ensure that the element is locatable with any one of those conditions. It is also applicable if any one condition is true or maybe both. Any one condition should be true to find the element.

Eg: //input[@type=’password’ or @id=’passwd’]

Reference : https://www.toolsqa.com/selenium-webdriver/write-effective-xpaths/#:~:text=The%20%E2%80%9Cand%20%E2%80%9D%20operator%20is%20used,a%20webpage%20using%20XPath%20efficiently

XPath Axes

Xpath Axes using as the location path which defines the location of a node using absolute or relative path. They are used to identify elements by their relationship like parent, child, sibling, etc. Following is the various axes values with few examples.

• ancestor : -This axis locates the ancestors of the current node, which includes the parents up to the root node.

Syntax ://tag[@attribute =’Attribute_Value’]//ancestor::parent_node
Eg: //label[text()="Full Name"]/ancestor::form

• ancestor-or-self :-This axis locates the current node as well as its ancestors.
• attribute :-This axis specifies the attributes of the current node.
• child :- This axis locates the children of the current node

Syntax ://tag[@attribute =’Attribute_Value’]//child::child_node
eg: //form[@id='userForm']/child::div[1]//label

• descendant :- This axis locates the descendants of the current node, i.e., the node’s children up to the leaf node.

Syntax ://node[attribute=’valueOfAttribute’]//descendant::attribute
Eg://div[@class= 'custom-control custom-radio custom-control-inline']/descendant::input

• descendant-or-self :- This axis locates the current node and its descendants.
• following :-This axis locates all nodes that come after the current node.

Syntax : //node[attribute=’valueOfAttribute’]//following::attribute
Eg://input[@id="userName"]/following::textarea

• following-sibling: -This axis locates the below siblings of the context node. Siblings are at the same level as the current node and share its parent.

Syntax ://node[attribute='valueOfAttribute']//following-sibling::attribute
Eg://div[@class='col-md-3 col-sm-12']/following-sibling::div

• parent: -This axis locates the parent of the current node.

Syntax ://tag[@attribute ='Attribute_Value']//ancestor::parent_node
Eg://input[@id='yesRadio']/parent::div

• preceding: -This axis locates all nodes that come before the current node.

Syntax: //node[attribute=’value of attribute’]//preceding::attribute
Eg://input[@id='userName']/preceding::label

• self :-This axis locates the current node.

Reference: https://www.w3schools.com/xml/xpath_axes.asp

Browser Extensions to generate xPaths

Nowadays, with technology we are used to having addons, extensions which are simple and easy ways to locate xpaths. Eg:. Firebug, FireBug Lite, etc. but now firebug is no more, It’s not supported by Firefox anymore, so instead of firebug, there are various tools which generate xpaths and help the user to locate web elements. Such as SelectorsHub, XPath Helper, ChroPath, Scraper,XPath Helper Wizard, Xpath Finder, XPather, and xPath Analyzer etc. We will discuss one of the easiest extensions which helps to generate relative xpaths.

Reference : https://www.lambdatest.com/blog/chrome-extensions-to-find-xpath-in-selenium/

Relative Xpath Helper.

https://chrome.google.com/webstore/detail/relative-xpath-helper/eanaofphbanknlngejejepmfomkjaiic?hl=en#:~:text=A%20simple%20extension%20for%20finding,your%20expression%20and%20press%20enter.

This is basically extension for chrome browser, Using ‘Relative XPath Helper’ Chrome browser Plug-in, we can perform any of the below:

• Generate Relative XPath locators for GUI elements on the web pages
• Validating the manually written Relative XPath locator, to check whether it is locating the specific GUI elements on the web pages.
• Can generate the Relative XPath locator for two GUI elements at a time

Though this plug-in can do more, I am only explaining the functionality of this plug-in according to our usage / needs in UI Automation.

Let’s follow these steps to install the ‘Relative XPath Helper’ Chrome Browser Plug-in:

1.Google Search for “Relative XPath Helper Chrome Plug-in

2. Click on the below market link from the displayed search results:

3. ‘Relative Path Helper’ details will be displayed in the chrome web store and click on ‘ADD TO CHROME’ button as shown below:

4. Click ‘Add extension’ on the displayed Pop-up dialog as shown below:

5.’Relative XPath Helper’ plug-in will be installed and added to the chrome browser as extension as shown below:

So once it is installed user can right click first element and second element, and find the generated xpath.

In the below example I have selected the first element as the username field and second element as Login label , and xpath will be generated related to the second element.

To ensure the generated xpath is correct, users can press F12 and go to the html code and search for the xpath by pressing ctrl F. If it is valid, it will highlight the element in the code itself.

Reference: https://selenium-by-arun.blogspot.com/2017/06/relative-xpath-helper-using-this-plugin.html

With that, I’m concluding my article on web element capturing using xPaths. Hope you gained a general idea of what I’m trying to achieve and to locate web elements easily without help of xPaths generator tools. Your comments and suggestions are welcome. You may also share your experience with capturing and locating web elements using xPaths.