How to handle puppeteer waits efficiently?

Question

The below code is working fine with the added delay of 75secs but that delay is not static, it changes according to the size of the file so I want to remove that delay and substitute that with a better solution. After clicking on "Save & Continue" button, the page fetches data for 2-4 mins and then it clicks on the "Let's start" button.

I tried delay function and it's working fine with it but since fetching the data is not static, I want a better solution.

//function to add delays
const delay = (time) => new Promise((resolve) => setTimeout(resolve, time));

//another save and continue click
const saveContBtn2 = await page.waitForSelector(
  '::-p-xpath(//button[text()="Save & Continue"])'
);
await saveContBtn2.click();

//let's start click
await delay(75000);
const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"])'
);
await letsStart.click();

Answer 1

Don't use manual delays. All waiting functions in Puppeteer can be configured for longer timeouts. You only need to update

const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"])'
);

to

const letsStart = await page.waitForSelector(
  '::-p-xpath(//button[text()="Let\'s start"]',
  {timeout: TIMEOUT} // You can pass 0 here to disable timeout entirely
);

Answer 2

Puppeteer has an inbuilt function called page.waitForNetworkIdle();. Refer to the docs.

It waits till all the network requests have stopped, so it automatically handles any duration of wait times.

Hence, you can change your code to:

const saveContBtn2 = await page.waitForSelector('::-p-xpath(//button[text()="Save & Continue"])');
await saveContBtn2.click();

await page.waitForNetworkIdle();

const letsStart = await page.waitForSelector('::-p-xpath(//button[text()="Let\'s start"])');
await letsStart.click();

If after downloading the resource, you need some time to render the second button, use the timeout argument to the page.waitForSelector(...). Refer to the docs.

const GLOBAL_TIMEOUT = 60_000;
const saveContBtn2 = await page.waitForSelector('::-p-xpath(//button[text()="Save & Continue"])');
await saveContBtn2.click();

await page.waitForNetworkIdle();

const letsStart = await page.waitForSelector('::-p-xpath(//button[text()="Let\'s start"])', options = {timeout: GLOBAL_TIMEOUT});
await letsStart.click();

Or, you can set a timeout globally for the Page via:

page.setDefaultTimeout(GLOBAL_TIMEOUT);

For more details, refer to the docs.