How to use wait in puppeteer || change default timeout in puppeteer

Wait and puppeteer and change the default timeout in puppeteer. In this puppeteer tutorial, We will see how to use wait and change the default timeout wait for an element and for the page loading.

Wait in puppeteer

As you know the wait is the most important topic in automation. Basically, wait for help us to find and element on a page. It means during the automation before interact with any element make sure that element is loaded properly on the page.

As you know mainly there are two types of the wait. explicit and implicit wait or in other words we can say dynamic and static wait.

Explicit wait in puppeteer

Explicit wait or static wait is used to wait for a fixed or static time frame. for example, I set explicit wait like 50 sec. it means it will wait 50 sec before executing the next line of code.

page.waitFor(time in ms) function is used to perform explicit wait in puppeteer.

await page.waitFor(50000);

Implicit wait in puppeteer

Implicit wait or dynamic wait is used to wait for an element in between the time frame. for example, If I set implicit wait for 50sec it means if the element is found before 50 sec. Let’s say in 30 sec then it will execute the next line of code after 30 sec.

page.waitForSelector() and page.waitForXPath() is used to wait for an element.
await page.waitForXPath('//h1');
await page.waitForSelector('#developer-name');

Default timeout in puppeteer

By default, the timeout is 30 sec in puppeteer. But we can change it according to the requirement.

page.setDefaultTimeout(ms) is used to change the default timeout.

page.setDefaultNavigationTimeout(ms) is used to change the navigation timeout.

  await page.setDefaultTimeout(10000);
//Change default navigation time
  await page.setDefaultNavigationTimeout(20000);

Example of wait in puppeteer

In the below script we are going to use all the types of the wait. Let’s understand the scenario.

  • Launch browser
  • Change the default time out as 5 sec.
  • Change the navigation timeout 10sec.
  • Wait for an element by XPath.
  • Wait for an element by the selector.
  • Implicit wait for 20 sec before closing the browser.
const puppeteer = require('puppeteer')
const expect = require('chai').expect

describe("Wait in puppeteer",()=>{
     it("Puppeteer example 1",async()=>{
    const browser = await puppeteer.launch({
      headless:false,
      slowMo:100
    })
    const page = await browser.newPage()

    //change the defualt wait time
    await page.setDefaultTimeout(5000);

    //change the defualt naviagation wait time
    await page.setDefaultNavigationTimeout(10000);
    await page.goto("https://devexpress.github.io/testcafe/example/");
 
    // Wait for xpath..
    await page.waitForXPath('//h1');
    const Message =  await page.$eval('H1', ele => ele.textContent);
    console.log("Heading text: "+Message);

     //wait for selector..
    await page.waitForSelector('#populate');
    const count =  await page.$$eval('p', ele => ele.length);
    console.log("Count p tag in the page: "+count);
    
    expect(Message).to.be.a('string','Example');
    expect(count).to.equal(9);
    expect(Message).to.include('Exa');


    //Implicit wait..
    await page.waitFor(20000);
    await page.close();

  });

    });