performance.tar.gz

Puppeteer

XPath, or XML path, is a query language used for locating a node from a DOM. It is one of the most common ways of identifying an element while writing Selenium UI tests.

In this course, you will learn various techniques for writing an expression that identifies a complex locator. In the process, you will also learn the tips and tricks of writing an efficient and optimized locator. We have used puppeteer with Javascript to demonstrate evaluating an XPath expression in this course.

This course is designed for both beginner and intermediate level developers, as well as QA engineers who want to master the art of writing effective XPath expressions.

Mastering XPath for Selenium

# What is a dynamic XPath?

The standard way of writing XPath may not work if the element path on the webpage changes dynamically.

Let’s say there is a table whose rows are shown based on a data set, which can vary from time to time. Sometimes, it will have 4 rows, and other times, it will have 6 or 7.

Another example is when a node/element attribute’s value is always dynamic and keeps on changing with page reload; in that case, you simply can’t use an attribute’s value to identify the unique element reliably every single time.


# How to handle dynamic XPaths?

## Example HTML considered for demonstration

Let us consider an example. Take a look at the following HTML structure:






The above HTML is a representation of the table below:

| 9 | 4 | 7 |
| - | - | - |
| 2 | 5 | 1 |
| 3 | 6 | 8 |



# Problem statement

Find the `id` of the `<tr>` tag that has the cell having `<span>` with the value `1`. Please note that every time we refresh the page, the `id`, which is a random number, changes, and the structure of the HTML table numbered from `1` to `9` will be randomly distributed. The cell with the value `1` is not necessarily always the cell in `2 x 3`.

> **Note:** In the HTML table, the cell with value `1` is present in the 2nd row, 3rd column. The XPath index starts at 1. So the cell with value `1` is `2 x 3`.

## How do we do it?

The best way to uniquely find an element on the DOM is by the `id` attribute. But what to do if the `id`, even though it is unique, changes every time we refresh the web page?

Some of the ways we should not write XPath:

* `//div[@id = 'grid']//tr[2]/td[3]/div/span[text() = '1']/parent::div/parent::td/parent::tr/attribute::id`

   In the above XPath cell **2 X 3** is hardcoded, and an absolute XPath is given. The XPath expression will break if the location of `<span>` or the DOM changes.  

The only constant we know is that there is a cell with value `1`. There are multiple ways we can solve this problem. Here are some of the approaches:

(1) **Using ancestors:**

`//div[@id = 'grid']//span[text() = '1']/ancestor::tr/attribute::id`

In the above XPath, from `<div>` with `id` `'grid'`, we navigate to `<span>` with `text() = '1'`, which is the known constant to us. From there, we navigate to the top using the `ancestor` `<tr>` tag. Once the target `<tr>` is found, we fetch the attribute `id`. 

(2) **Using descendant:**

`//div[@id = 'grid']//tr[descendant::span[text() = '1']]/attribute::id`

In the above XPath, from `<div>` with `id` `'grid'`, we navigate to the `<tr>` having a `descendant` `<span>` with `text() = '1'`. Once the target `<tr>` is found, we fetch the attribute `id`. 


In both approaches, as discussed, the only constant we know is the `<span>` with value `1`. Passing that as an argument when forming the XPath, we can dynamically form the XPath and make it agnostic to changes in the DOM as well, i.e., even if any new DOM element is introduced between the nodes, our XPath will still work.

To make our XPath more stable, we can add more attributes (in our case, `@class`) so that we will always be able to find the node in the DOM uniquely.

So, we can form the XPath like the following:



Learn how to write XPath expression when the value of the attribute is dynamic.

__default

Dynamic XPath

What is a dynamic XPath?