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 an absolute and relative XPath?

In an *absolute XPath*, you traverse from the top of the hierarchy, say `html` or `body` node, until the target node in the DOM.

In a _relative XPath_, as the name suggests, we can start locating the element from anywhere in the hierarchy tree, including the same exact node.

Let’s look at the example below, where the same node is identified using one absolute and multiple relative XPaths:


* Absolute XPath
  ```xml
   /html/body/div/ul/li[@id='xyz']
  ```

* Relative XPath
  ```xml
  //ul/li[@id='xyz']
  ```
  Or,

  ```xml
   //li[@id='xyz']
  ```

  Or,

  ```xml
   //*[@id='xyz']
  ```

All of them will work and identify the same node. Now, let’s understand why we use one over the other while writing XPath expressions.

### Which one is better and why?

We should **always** use **relative** XPath expressions. Absolute XPath expressions will break if there is any small change in the webpage in the top-level hierarchy nodes w.r.t. to the context node.

*Example:*

Say a new paragraph described by `p` in the HTML is introduced before the `ul` node in the above example. In this case, absolute XPath will fail to locate the node/element, while relative XPath will still continue to work.

The new absolute XPath after the change would be:

   ```xml
     /html/body/div/p/ul/li[@id='xyz']
   ```

The addition of the new element won’t impact the relative XPath expression, as it would continue to locate the element on the webpage.

> ***Please Note*** - The XPath expression starting with **`//`** refers to **relative** XPath, and the expression starting with **`/`** refers to **absolute** XPath, as you can see in the above examples.

### Example code

Let’s understand the example code below, which demonstrates the difference between absolute and relative XPath expressions. 

* Webpage: http://codetoautomate.com/xpath-demo-educative/
* Element: Select ‘apple’ from the fruits dropdown list.


* Absolute XPath for identifying the above element:  `/html[1]/body[1]/div[1]/div[1]/div[1]/div[1]/div[1]/main[1]/article[1]/div[1]/div[1]/div[1]/div[2]/div[2]/p[4]/select[1]/option[@value='apple']`

* Relative XPath for identifying the above element:  `//option[@value='apple']`

* Have a look at the code below:


# What is an absolute and relative XPath?

In an *absolute XPath*, you traverse from the top of the hierarchy, say `html` or `body` node, until the target node in the DOM.

In a _relative XPath_, as the name suggests, we can start locating the element from anywhere in the hierarchy tree, including the same exact node.

Let’s look at the example below, where the same node is identified using one absolute and multiple relative XPaths:


* Absolute XPath
  ```xml
   /html/body/div/ul/li[@id='xyz']
  ```

* Relative XPath
  ```xml
  //ul/li[@id='xyz']
  ```
  Or,

  ```xml
   //li[@id='xyz']
  ```

  Or,

  ```xml
   //*[@id='xyz']
  ```

All of them will work and identify the same node. Now, let’s understand why we use one over the other while writing XPath expressions.

# Which one is better and why?

We should **always** use **relative** XPath expressions. Absolute XPath expressions will break if there is any small change in the webpage in the top-level hierarchy nodes w.r.t. to the context node.

*Example:*

Say a new paragraph described by `p` in the HTML is introduced before the `ul` node in the above example. In this case, absolute XPath will fail to locate the node/element, while relative XPath will still continue to work.

The new absolute XPath after the change would be:

   ```xml
     /html/body/div/p/ul/li[@id='xyz']
   ```

The addition of the new element won’t impact the relative XPath expression, as it would continue to locate the element on the webpage.

> ***Please Note*** - The XPath expression starting with **`//`** refers to **relative** XPath, and the expression starting with **`/`** refers to **absolute** XPath, as you can see in the above examples.

# Example code

Let’s understand the example code below, which demonstrates the difference between absolute and relative XPath expressions. 

* Webpage: http://codetoautomate.com/xpath-demo-educative/
* Element: Select ‘apple’ from the fruits dropdown list.


* Absolute XPath for identifying the above element:  `/html[1]/body[1]/div[1]/div[1]/div[1]/div[1]/div[1]/main[1]/article[1]/div[1]/div[1]/div[1]/div[2]/div[2]/p[4]/select[1]/option[@value='apple']`

* Relative XPath for identifying the above element:  `//option[@value='apple']`

* Have a look at the code below:


Let’s find out about the difference between absolute and relative XPath in this lesson.

__default

Absolute and Relative XPath

What is an absolute and relative XPath?