Effective test automation hinges on choosing the right element locator while balancing functionality, efficiency, and accuracy. The choice of element locator plays a crucial role in ensuring successful test automation. It’s about finding the spot where the locator optimizes functionality, maintains efficiency, and ensures accuracy, enhancing the overall effectiveness of automated tests.

XPath stands out as a versatile element locator strategy within the Selenium framework. Its robust capabilities make it invaluable for dynamically locating WebElements, allowing testers to tailor locators to meet specific needs. While XPath isn’t the sole technique in Selenium, its adaptability makes it a preferred option for many in the testing community.

This article will explore the various types of XPath and how to write basic and more complex XPath expressions.

What is Xpath in Selenium?

In Selenium, XPath is a tool for navigating and interacting with web page HTML structures. It offers a standardized approach for locating elements within HTML and XML documents, which is crucial for automation testing. XPath enables testers to locate elements precisely, making their test scripts robust and adaptable.

The basic format of XPath in Selenium follows this pattern:

XPath = //tagname[@Attribute=’Value’]

 

Here’s what each part represents:

• //: Represents the current node.
• tagname: Denotes the tag name of the current node.
• @: Denotes the Select attribute.
• Attribute: Represents the attribute of the node.
• Value: Indicates the value of the selected attribute.

Types of XPath in Selenium

Selenium XPath can be categorized into two main types:

• Absolute XPath
• Relative XPath

What is Absolute XPath?

Absolute XPath is a technique to locate web elements by specifying their complete path starting from the root node of the HTML Document Object Model (DOM) tree.

Here are the key points about Absolute XPath:

1. It always starts with a single forward slash (/) representing the DOM tree’s root node.
2. It provides the full and unambiguous path from the root node to the targeted element.
3. A forward slash (/) separates every step in the path.

For example, an Absolute XPath could be: /html/body/div[2]/div[1]/form[1]/input[3]

Why Absolute Xpath is Not Recommended for Selenium Test Automation?

You should not use absolute XPath to test automation with Selenium. Absolute XPath starts from the very top of the website’s structure. If new elements are added to your path due to updates or new features, your automation code will break and stop working.

For automation testing, it is better to use relative XPath instead. Relative XPath does not start from the top, so it is not affected as much if new elements are added to the site. Your automation code is less likely to break when using relative XPath locators.

What is Relative Xpath?

Relative XPath is a way to locate elements on a web page using their position relative to some other element rather than their absolute path from the document’s root node.

In Relative XPath, the path starts with double forward slashes (//), which means it can start searching from anywhere in the document, not necessarily from the root node. It then uses navigational axes like a parent, child, ancestor, descendant, etc., to traverse the DOM tree relative to some reference node.

Some key points about Relative XPath:

1. It is more flexible and robust than Absolute XPath because the relative positioning between nodes may remain the same even if the DOM structure changes.
2. It allows you to locate elements based on their relationship to other known elements instead of having to specify the full path.
3. Common axes used are ‘/’, ‘//’, and relationships like parent::, child::, following-sibling:: etc.
4. Relative paths can be shortened using idioms like //div[@id=’x’] to quickly reach the desired element.
5. They are generally preferred over absolute paths as they are less brittle to code changes and element repositioning.

An example relative XPath would be: //input[@name=’username’] – this locates an input field by its name attribute relative to anywhere on the page.

Overall, relative XPaths provide a more flexible and maintainable way to interact with the DOM compared to fragile absolute paths.

How to write XPath in Selenium?

Here are some common ways to construct XPath expressions in Selenium:

1. By Element Attributes:

Locate elements based on their attributes like id, name, class, or custom attributes.

• //input[@id=’username’] (Finds the first input element with id ‘username’)
• //button[@class=’submit-btn’] (Finds the first button element with class ‘submit-btn’)

1. By Element Text:

Find elements based on their text content or partial text.

• //a[text()=’Sign Up’] (Finds the first anchor tag with the exact text ‘Sign Up’)
• //h1[contains(text(), ‘Welcome’)] (Finds the first h1 element containing text ‘Welcome’)

1. By Element Position:

Locate elements based on their position among siblings.

• //ul/li[2] (Finds the second list item within an unordered list)
• //table/tbody/tr[last()] (Finds the last row within the table body)

1. By Relationship:

Navigate the DOM tree based on parent-child or ancestor-descendant relationships.

• //div[@id=’parent’]//input (Finds all input elements descendants of div with id ‘parent’)
• //input[@type=’text’]/ancestor::form (Finds form element ancestor of input with type ‘text’)

1. By Using Functions:

Utilize built-in functions for constructing complex expressions.

• //a[starts-with(@href, ‘https://’)] (Finds anchor tags with href attribute starting with ‘https://’)
• //input[normalize-space(.)=”] (Finds input elements with empty or whitespace-only text content)

What is Chained XPath in Selenium?

Chained XPath in Selenium involves merging multiple XPath expressions to form a more precise and focused locator for web elements. This technique enables sequential navigation through the DOM (Document Object Model) tree, where the result of one XPath expression serves as the starting point for the next XPath.

Here are the key points about Chained XPath:

1. It starts with an XPath expression identifying a coarse, high-level element on the page.
2. This is then chained/combined with additional XPath expressions using the pipe | operator to narrow down and reach the desired target element.
3. Each subsequent XPath segment uses the previous XPath result as the new context node to evaluate the next part of the path.
4. This allows you to construct precise locators by iterating through parent-child relationships, sibling elements, attributes, etc.

For example, let’s say you want to locate a specific <td> cell inside a table with id=”results”. The chained XPath could be:

//table[@id=’results’] | //tr[4] | //td[2]

This first finds the <table> element with id=”results”, then navigates to the 4th <tr> row inside it, and finally locates the 2nd <td> cell in that row.

1. Chained XPaths can be extremely powerful for targeting elements in complex page structures by breaking down the path.
2. However, they can become unwieldy for very large/nested paths. Shorter XPaths are generally preferred.

By methodically drilling down with multiple XPath expressions chained together, you can construct robust locators tailored precisely to your target elements.

Writing XPath for Different Types of HTML Tags and Attributes

XPath lets you locate HTML elements on a web page using their tags and attributes.

To target an element by its tag name, use the tag name in the XPath expression. For example, //div selects all div elements on the page.

To target an element by its attribute value, use [@attribute=’value’] after the tag name. For instance, //input[@id=’username’] selects the input element with the id ‘username’.

You can also combine tag names and attribute values in an XPath expression. //a[@href=’https://example.com’] selects anchor tags with the specified href value.

Some examples:

• //img[@src=’/images/logo.png’] (Selects img elements with the given src attribute value)
• //button[@class=’search’] (Selects button elements with the class ‘search’)
• //*[@id=’btnK’] (Selects any element with the id ‘btnK’)

XPath expressions can be made more specific by adding additional conditions or traversing the DOM tree. For example, //div[@class=’container’]/a selects anchor tags that are direct children of div elements with class ‘container’.

Writing XPath Contains() Function in Selenium Web Driver?

The contains() function in XPath is a powerful tool for locating elements based on partial text or attribute values. In Selenium WebDriver, leveraging contains() can help create flexible and robust XPath expressions, especially for dealing with dynamic or changing web page content.

Here are some examples demonstrating how to use contains() effectively:

Locating an element by partial text content:

//div[contains(text(), ‘Hello’)]

 

This XPath expression finds the first <div> element containing the text “Hello” anywhere within its text content.

Locating an element by partial attribute value:

//a[contains(@href, ‘google’)]

 

This expression identifies all <a> (anchor) elements whose href attribute contains the string “google”.

Combining contains() with other conditions:

//input[contains(@class, ‘input-field’) and @type=’text’]

 

This expression locates <input> elements with a class name containing “input-field” and a type attribute set to “text”.

Using contains() with attribute value normalization:

//span[contains(normalize-space(.), ‘Product Name’)]

 

This expression finds <span> elements with text content containing “Product Name” after whitespace normalization.

Locating an element by partial text and attribute value:

//div[contains(text(), ‘Item’) and contains(@class, ‘product’)]

 

This expression targets <div> elements containing “Item” in their text and having a class attribute with “product”.

Performing case-insensitive search:

//h1[contains(translate(., ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’, ‘abcdefghijklmnopqrstuvwxyz’), ‘hello’)]

 

This expression finds <h1> elements containing “hello” (case-insensitive) in their text content, using the translate() function.

Remember, contains() in XPath is case-sensitive by default. Translate () can be used for case-insensitive searches, as shown above. These techniques enhance the flexibility and effectiveness of XPath expressions in Selenium WebDriver.

You can leverage the true capabilities of Selenium WebDriver using a cloud-based platform like LambdaTest, it is an AI-powered test orchestration and execution platform that lets you run manual and automated tests at scale with over 3000+ real devices, browsers, and OS combinations.

Difference between static and dynamic XPath

In web automation with Selenium, “static” and “dynamic” XPath expressions respond differently to changes in a webpage’s structure or content.

Static XPath

A static XPath relies on fixed elements within the webpage’s DOM structure. These expressions target elements based on attributes, positions, or relationships unlikely to change across different web page versions.

Examples of static XPath expressions:

• //input[@id=’username’] (Locates an input element with a specific ID)
• //div[@class=’container’]/a[1] (Locates the first anchor tag within a div with a specific class)

Static XPath expressions are generally preferred when the web page structure is stable and predictable, as they provide a straightforward and efficient way to locate elements.

Dynamic XPath

A dynamic XPath is an XPath expression that targets elements based on their dynamic or changing characteristics, such as text content or generated attributes. These XPath expressions are more flexible and can adapt to changes in the web page’s content or structure.

Examples of dynamic XPath expressions:

• //a[contains(text(), ‘Login’)] (Locates an anchor tag containing the text ‘Login’)
• //div[starts-with(@id, ‘dynamic’)] (Locates a div element with an ID starting with ‘dynamic’)

Dynamic XPath expressions are often necessary when working with web pages with dynamic or frequently changing content, such as those generated by JavaScript or populated from databases.

Conclusion

And that wraps it up!

In this blog, we’ve discussed everything about XPath and its pivotal role in Selenium test automation. XPath remains crucial for testers and automation engineers working on web applications with complex or dynamic structures.

By implementing the advice and techniques outlined in this blog, you can enhance the precision and robustness of your Selenium scripts, ensuring accurate and reliable element identification. Leveraging a cloud-based cross-browser testing platform like LambdaTest can greatly expand your test coverage to complement further the robust XPath-based element identification in your Selenium tests.

 

Visit more nvosstock