×
☰ See All Chapters

Independent and dependent concept in xpath

When the text value of the elements is completely changing, then we can’t use functions like “contains ()”, “starts-with ()” etc. to handle those elements. In such cases, we identify the dynamically changing element using the nearby unique element. We call this concept as independent dependent xpath.

Steps to derive xpath expression using Independent dependent concept

To derive the steps we are considering the below sample html code. We have to locate the Input 2.

<html>

</head>

<body>

        <table>

                <tr>

                        <td>Input 1 : <input type="text" id="testId"></td>

                        <td>Input 2 : <input type="text"></td>

                </tr>

                <tr>

                        <td>Input 3 : <input type="text"></td>

                        <td>Input 4 : <input type="text"></td>

                </tr>

        </table>

</body>

</html>

  1. Identify the nearby element which is stable and can be located easily. In this case near to Input 2 we have Input 1. This input 1 is now independent element and Input 2 is dependent element. 

  2. Identify the immediate common parent of independent and dependent element. In this case the first <tr> is the common parent. 

  3. Derive the relative xpath to this common parent considering independent Input 1 as the relative reference. In this case we should move upwards from independent Input 1 to the common parent <tr>. Use ../ to move one step upwards. We have to use ../ twice one for <td> and one to reach common parent <tr>. 

xpath=//input[@id='testId']

Locates Input 1

xpath=//input[@id='testId']/../../

Locates Common Parent <tr>

Now navigate from common parent to the desired dependent element and derive the relative xpath. Finally it became as below:

xpath=//input[@id='testId']/../../td[2]/input

Locates Input 2

 

independent-and-dependent-concept-in-xpath-0
 

Different examples for forward traversing and backward traversing

Considering the below sample html code, below table lists out the different examples for forward and backward traversing

//input[@id='testId']/../       

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../../

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../../tr[2]

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../../tr[2]/td[1]

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../../tr[2]/td[1]/input

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../../tr[2]/td[2]

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

//input[@id='testId']/../../../tr[2]/td[2]/input

<table>

  <tr>

    <td>Input 1 : <input type="text" id="testId"></td>

    <td>Input 2 : <input type="text"></td>

  </tr>

  <tr>

    <td>Input 3 : <input type="text"></td>

    <td>Input 4 : <input type="text"></td>

  </tr>

</table>

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

independent-and-dependent-concept-in-xpath-1
 

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/independent-and-dependent-concept-in-xpath-testpage');

   

    await testXpath(page);

   

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

    await wait(5000);

   

    //Close browser

    await browser.close();

}

 

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

    const element = (await page.$x("//input[@id='testId']/../../../tr[2]/td[1]/input"))[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