Puppeteer - Xpath Functions

To determine an element uniquely, we can either take the help of any of the attributes within the html tag or we can use a combination of attributes on the html tag. Mostly the id attribute is used since it is unique to a page.

However, if the id attribute is not present, we can use other attributes like the class, name, and so on. In case the attributes like id, name, and class are not present, we can utilise a distinct attribute available to only that tag or a combination of attributes and their values to identify an element. For this, we have to use the xpath expression.

If there are duplicate attributes or no attribute for an element, then the function text() is used to identify an element. In order to use the text() function, it is mandatory that the element should have a text visible on the page.

Syntax

The syntax for the use of text() function is as follows −

//tagname[text()='visible text on element']

If the value of an element or the text is partially dynamic in nature or very lengthy, we can use the contains() function. In order to use the contains() function, it is mandatory that the element should either have an attribute value or a text.

Syntax

The syntax for the use of contains() function is as follows −

//tagname[contains(@attribute,'value')]
//tagname[contains(text(),'visible text on element')]

If the text of an element begins with a particular text, we can use the starts-with() function to it.

Syntax

The syntax for the use of starts-with() function is as follows −

//tagname[starts-with(text(),'visible text on element')

In all the above functions, tagname is optional. Instead of tagname, we can use the symbol *.

In the below image, let us identify the element - Library with the help of its displayed text and then click on it.

Library

The xpath for the element shall be //*[text()='Library'].

Here, we are working with the xpath selector, so we have to use the method: page.$x(xpath value). The detail on this method is discussed in the Chapter - Puppeteer Locators.

To begin, follow Steps 1 to 2 from the Chapter of Basic Test on Puppeteer which are as follows −

Step 1 − Create a new file within the directory where the node_modules folder is created (location where the Puppeteer and Puppeteer core have been installed).

The details on Puppeteer installation is discussed in the Chapter of Puppeteer Installation.

Right-click on the folder where the node_modules folder is created, then click on the New file button.

Node Modules

Step 2 − Enter a filename, say testcase1.js.

Testcase1.JS

Step 3 − Add the below code within the testcase1.js file created.

//Puppeteer library
const pt= require('puppeteer')
async function selectorFunTextXpath(){
   //launch browser in headless mode
   const browser = await pt.launch()
   //browser new page
   const page = await browser.newPage()
   //launch URL
   await page.goto('https://www.tutorialspoint.com/index.htm')
   //identify element with xpath function - text() then click
   const b = (await page.$x("//*[text()='Library']"))[0]
   b.click()
   //wait for sometime
   await page.waitForTimeout(4000)
   //obtain URL after click
   console.log(await page.url())
}
selectorFunTextXpath()

Step 4 − Execute the code with the command given below −

node <filename>

So in our example, we shall run the following command −

node testcase1.js
Testcase

After the command has been successfully executed, the URL of the page navigated on clicking the element Library - https://www.tutorialspoint.com/tutorialslibrary.htm gets printed in the console.

Advertisements