Mastering Xpath for Web App Test Automation

Those who are working on test automation projects & and willing to start working in automation testing may have come across the word “Xpath. In today’s article, we will see the need for Xpath, what Xpath is, why it plays an important role in automation testing, and how to find a dynamic robust Xpath without using third-party plugins.

Everything on the web page (like text fields, headers, titles, buttons, scroll bar, drop-down fields, etc.) are elements. These elements are known as web elements. Web elements are specified in HTML by the tag, attributes, and contents. Few elements can have CSS applied (like colors, size, positions, etc.)

Being human users, we can see all these elements present on the webpage and can perform operations (like click, select, getText, scroll, etc.) manually. But when we need to interact with these elements or to perform any operation(action) like inserting input value in a text box, or text area, selecting a checkbox, selecting an option from a drop-down, etc. using test automation scripts, the web elements need to be identified uniquely and can be used to perform the required action events. The web element locator finds and returns the Web elements.

As per the Selenium official documentation below are the locators available,

Locators like id, name, and class name are generated dynamically at run time with some static and random data appended. The developer follows this strategy to make the web pages more robust. Due to this dynamic content test automation developer ID, name, and class name locating the web element will not be the right choice.?

Test automation developers have two best options, one is Xpath, and another is CSS Selector. Generally, in automation projects test automation developer prefers to use the XPath locator to find the elements on the webpage using HTML DOM structure because every element has its unique XML path, and using XML path we create dynamic Xpath ().

Xpath :

1. Xpath is the XML Path and XML is nothing but the Extensible Markup Language.
2. XPath (XML path language) is a query language, a concise, simple, and powerful locator technique for effectively navigating through XML and HTML structure.
3. XML is used for representing and structuring the data in an understandable format. It supports many services like web development, web services, etc.
4. Every object/element/even single dot on the webpage has an XML path. XML path helps to interact with web objects to perform operations like click, setText, getText, drag & drop, etc. using automation script.
5. Using XPath testers can precisely locate elements based on their attributes, position, or relationships with other elements. This flexibility is beneficial in scenarios where other locator methods like CSS selectors may not be sufficient.
6. It's particularly useful when working with complex or dynamic web pages where the elements' attributes like IDs or classes might change frequently.
7. In the Xpath we can traverse in both backward and forward directions using axes (e.g., ancestor, parent, following-sibling, etc.)
8. XPath is a powerful tool for web app automation testing, offering a wide range of capabilities for locating elements and navigating the DOM.
9. By mastering XPath axes, methods like contains and starts-with, logical operators (and, or not), text(), and indexing, testers can create robust and flexible automation scripts.

Understanding these concepts is vital to excel in web app testing, ensuring reliable and efficient test automation.

Types of XPath:

1. Absolute XPath:

Begins with the root element and includes the complete path to the desired element. While it provides an exact location. Absolute XPaths are not preferred in automation testing, as they fail with a single change in the DOM.

1. Relative XPath:

Starts from the node you want to target and uses concise expressions to locate elements based on their relationships. It is preferred for better maintainability. Relative Xpath is preferred over Absolute, as it consists of the relative path that directly navigates to the desired element without having the entire path.

?Let’s take an example of a Google search page for a better understanding of the difference between two Xpath types:

Absolute XPath : /html/body/div[1]/div[3]/form/div[1]/div[1]/div[1]/div/div[2]/textarea

Relative XPath : //textarea[@title='Search']        

Xpath syntax in Selenium:

//Tagname[@AttributeName=’AttributeValue’]        

• //: denotes the current node
• Tagname: tagName of the current node.
• @: must be used before the attribute name.
• Attribute: attribute name of the node
• Value: the value of the respective attribute

?Note: Tagname, attribute name, values, etc. are case-sensitive and must be the same as given in the DOM structure.

Axes methods in XPath and how to use them:

These axes help you navigate and target specific nodes within an XML or HTML structure when using XPath expressions for querying or extracting information.

XPath Methods:

XPath provides several useful methods to handle attribute values and text content. Some key methods include:

Logical Operators:

XPath supports logical operators to combine multiple conditions. Commonly used operators are:

With Text:

Indexing:

XPath allows selecting elements by their position using indexing.

e.g.-
1] (//li)[1]?-?Selects the first <li> element in the document.
2] (//table)[last()]?- Selects the last <table> element in the document.        

Working with input, checkbox, dropdown, etc.:

When working with different types of elements like the input box, check box, dropdowns, etc., the xpath must navigate to the element with its respective tagName.

Ref link:

https://www.selenium.dev/documentation/webdriver/elements/locators/