Puppeteer - Synchronization

Puppeteer Page class contains methods to achieve synchronization. These methods are used to wait for an action/element on the page. It waits for criteria to be met (a true value). For example, we often wait for a text to appear on the page.

Synchronization methods

The synchronization methods in Puppeteer are psted below −

waitFor

This method is used to wait for a specific amount of time before resolving a Promise.

Syntax

The syntax is as follows −

await page.waitFor(4000)

waitForSelector

This method is used to wait for an element to be visible or disappear from the webpage.

Syntax

The syntax is as follows −

page.waitForSelector(
   selector,
   {options : value}
)

The waitForSelector accepts two parameters. The first parameter is the selector value of an element. The second parameter is the array of options. The options are psted below −

Visible − Puppeteer shall wait till an element locator is visible on the page. The default value is false.

Hidden − Puppeteer shall wait till an element locator is hidden from the page. The default value is false.

Timeout − The maximum wait time for an element in milpseconds. The default value is 30000. If the timeout is set to zero, this is discarded.

The default wait time can be modified by using the method given below −

page.setDefaultTimeout(6000)

For example,

let l = await page.waitForSelector( "#ltxt", { visible: true } )

waitForXpath

This method is used to wait for element/elements identified by xpath to be visible or disappear from the webpage.

Syntax

The syntax is as follows −

page.waitXpath(
   Xpath value,
   {options : value}
)

The waitForXpath accepts two parameters. The first parameter is the xpath selector value of an element. The second parameter is the array of options. The options are psted below −

Visible − Puppeteer shall wait till an element locator is visible on the page. The default value is false.

Hidden − Puppeteer shall wait till an element locator is hidden from the page. The default value is false.

Timeout − The maximum wait time for an element in milpseconds. The default value is 30000. If the timeout is set to zero, this is discarded.

The default wait time can be modified using the below method −

page.setDefaultTimeout(6000)

For example,

let x= await page.waitForXPath( "//*[@name= search ]", { visible: true } )

waitForFunction

This method is used to wait till the provided function returns a true value.

Syntax

The syntax is as follows −

page.waitForFunction(
   pagefunction,
   {options : value},
   pagefunction args
)

The waitForFunction has the following parameters −

The pagefunction is the function to be executed. For example,

page.waitForFunction("document.getElementById( txt ).value ===  text ", {})

This function shall wait till the value of the element with id is equal to text.

The option is an array of waiting parameters. They are - polpng (the interval at which the pagefunction should be executed in milpseconds) and timeout (The maximum time the Puppeteer shall wait for the pagefunction to return true value).

The pagefunction args are the arguments passed to the pagefunction function.

In the below image, let us input text - Puppeteer and then press Enter.

After pressing Enter, a new window having the search results with text - About 39 results should open up.

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-cpck on the folder where the node_modules folder is created, then cpck on the New file button.

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

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

//Puppeteer pbrary
const pt= require( puppeteer )
async function waitImplementation(){
   //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 edit box
   const f = await page.$("#gsc-i-id1")
   //enter text
   f.type("Puppeteer")
   //wait for sometime
   await page.waitForTimeout(4000)
   //press Enter
   await page.keyboard.press( Enter )
   //wait for an element xpath
   await page.waitForXPath("//span[@class= gsc-result-info ]")
   //identify element
   const t = await page.$(".gsc-result-info")
   //obtain text
   const text = await (await t.getProperty( textContent )).jsonValue()
   console.log("Text is: " + text)
}
waitImplementation()

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