×
☰ See All Chapters

Absolute xpath in Puppeteer

xpath is the xml path of an element in the html tree along with certain conditions and attributes forming an expression. xpath is one of the locator in puppeteer using which we identify objects or elements when we are unable to locate the elements by using ID, class, name and tagname. If elements are not static in page and dynamically changing then xpath locator is the useful locator.

xpath are of 2 types:

  1. Absolute xpath         

  2. Relative xpath 

Absolute xpath

1.

Absolute xpath refers to the path of the element starting from the root to the destination element.  While writing the absolute xpath, we use single forward slash (/) to traverse through each immediate child element in the html tree.

2.

Example:

In the below sample html code:

<!DOCTYPE html>

<html>

<head></head>

<body>

        <a href="www.tools4testing.com">tools4testing</a>

</body>

</html>

Absolute xpath can be written in the following ways:

html/body/a

or

./html/body/a

Note : dot (.) refers to the current document or the current web page, using dot is optional

3.

If there are multiple siblings with same tagname, then the index starts from 1. In case of multiple siblings with same tagname, if we don’t use index, then it considers ALL the siblings.

Example:

<!DOCTYPE html>

<html>

<head></head>

<body>

        <a href="www.tools4testing.com">tools4testing</a> </br>

        <a href="www.java4coding.com">java4coding</a>

</body>

</html>

html/body/a[1] : tools4testing

html/body/a[2] : java4coding

Using Google Chrome browser to find the absolute xpath

Right click web element and select Inspect Element. It will launch a window containing source code of the page and in the code the html tag which is rendering the selected element will be highlighted. Now Right click on that code> Select Copy > Select Copy full XPath

absolute-xpath-in-puppeteer-0
 

Pipeline Operator / OR condition (|) in absolute xpath

We use this operator to identify more than one element in different nodes of html tree. Puppeteer after finding 1st matching element it stores the address of that element in some reference variable and start traversing from the root node to identify other matching elements. Once after identifying all the elements it consolidated all the address of matching elements and returns it.

Considering the below sample html code, below are the different Absolute xpath examples

<html>

</head>

<body>

        <table align="center" width=90% cellspacing="2" cellpadding="2">

                <tr>

                        <td><a href="#">A</a></td>

                        <td><a href="#">B</a></td>

                </tr>

                <tr>

                        <td><a href="#">C</a></td>

                        <td><a href="#">D</a></td>

                </tr>

        </table>

</body>

</html>

 

Absolute xpath expressions

Matching Element

/html/body/table/tr[1]/td/a[1]

A

/html/body/table/tr[1]/td/a[2]

B

/html/body/table/tr[2]/td/a[1]

C

/html/body/table/tr[2]/td/a[2]

D

/html/body/table/tr[1]

AB

/html/body/table/tr[2]

CD

/html/body/table/tr[1]/td[1]|html/body/table/tr[2]/td[1]

AC

/html/body/table/tr[1]/td[1]|html/body/table/tr[2]/td[2]

BD

/html/body/table/tr[1]/td[1]|html/body/table/tr[2]/td[2]

AD

/html/body/table/tr[1]/td[2]|html/body/table/tr[2]/td[1]

BC

/html/body/table/tr[1]|html/body/table/tr[2]/td[1]

ABC

/html/body/table/tr[1]|html/body/table/tr[2]/td[2]

ABD

/html/body/table/tr[1]|html/body/table/tr[2]

ABCD

 

You can write the script and test these using our Test Page

absolute-xpath-in-puppeteer-1
 

When you click on the link you will get its alert and this you can use it for confirmation.

absolute-xpath-in-puppeteer-2
 

import { launch, Page } from 'puppeteer';

example();

async function example() {

    const browser = await launch({headless : false});

    const page = await browser.newPage();

    await page.setViewport({ width: 1366, height: 768});

    await page.goto('https://www.tools4testing.com/contents/puppeteer/testpages/puppeteer-absolute-xpath-testpage');

    await enterDetails(page);

    //wait for some time before closing, specify time in milliseconds

    await wait(5000);

    //Close browser

    await browser.close();

}

 

async function enterDetails(page: Page) : Promise<void> {

    const element = (await page.$x("/html/body/table[1]/tbody/tr[1]/td[1]/a"))[0];

    element.click();

}

 

//wait if needed

async function wait(time) {

    return new Promise(function(resolve) {

        setTimeout(resolve, time)

    });

}

Click here to learn to execute puppeteer example using typescript

 

All Chapters
Author