How to wait for N seconds in Puppeteer

Puppeteer is a Node library that provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

This article will demonstrate the options you can use in order to add a time delay in Puppeteer before executing the next line. There are a few options to do so, we can either build our own functionality to add some delay, or we can use the Puppeteer built-in functions, Let’s check both options and see how it can be done.


Examples

1- Using custom delay implementation.

We can create the following JS delay function, that will delay the execution of the next line for N seconds.

const delay = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

In the above function, we’ve passed a parameter milliseconds to the setTimeout function, along with the resolve function from the Promise.

The setTimeout will call the resolve function after it waits for the milliseconds time, then the delay function will return to its outer scope and will continue in executing the next line.

Samples:

const delay = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

async function LaunchBrowser() {
    console.log('Starting...');
    // let browser = await puppeteer.launch();
    // 👇👇 Wait for 2 seconds
    await delay(2000);
    // 👇👇 This log will show after 2 seconds
    console.log('Logging after 2 seconds');
    // 👇👇 Wait for 5 seconds
    await delay(5000);
    // 👇👇 This log will show after 5 seconds
    console.log('Logging after 5 seconds');
}

(async () => {
    await LaunchBrowser();
})();

And so on and so forth you can call the delay function whenever you want and can pass the suitable waiting time as a parameter.

Note that, every 1000 milliseconds = 1 second, and because the setTimeout function accepts the delay parameter in milliseconds, that’s why we had to pass the time in milliseconds.


2- Using Puppeteer built-in wait functions.

Puppeteer comes with already built-in wait functions for different use cases, an example of those functions:

  • waitForSelector: Wait for the selector to appear in page. If at the moment of calling the method the selector already exists, the method will return immediately. If the selector doesn’t appear after the timeout milliseconds of waiting, the function will throw.
  • waitForXPath: Wait for the xpath to appear in page. If at the moment of calling the method the xpath already exists, the method will return immediately. If the xpath doesn’t appear after the timeout milliseconds of waiting, the function will throw.
  • waitForNavigation: Waits for the page to navigate to a new URL or to reload. It is useful when you run code that will indirectly cause the page to navigate.
  • waitForNetworkIdle: Waits for when the network is idle.
  • waitForResponse: Waits for HTTP request response.
  • waitForFunction: Waits for a function to finish evaluating in the page/frame context.

There are also some other functionalities that come from Puppeteer you can use for waiting.


Wrap

It’s much better and easier to go with the puppeteer built-in functionalities to wait for something to happen and act accordingly, I’m pretty sure Puppeteer does cover most of the use-cases anyone would face.

If Puppeteer functionalities still not providing what you want, then go for the custom delay implementation we’ve added in Option1.


Photo from Unsplash.

Related Posts

How to remove highcharts.com credits link

How to remove highcharts.com credits link

Highcharts is a popular JavaScript charting library that offers a wide range of interactive and customizable charts for developers. However, if you’re using the free version of…

Highcharts Place text in the center of a pie chart

Highcharts Place text in the center of a pie chart

To place text in the center of a pie chart in Highcharts, you can use the chart.renderer object to create a custom label and position it in…

Test design breakpoints using jest and react-testing-library

Test responsive design using jest and react-testing-library

Testing design breakpoints in React applications is an important aspect of front-end development. It ensures that the components look and behave as expected on different screen sizes….

Testing React-Query with Jest and React-testing-library

Testing React-Query with Jest and React-testing-library

Introduction In this article we will cover the basic usage of testing useQuery hook from tanstack/react-query library, along with how to test it using jest and react-testing-library….

Highcharts How To Change Series Color with examples

Highcharts How To Change Series Color with examples

To change the color of a series in Highcharts, there are a set of options we are going to discover in this article. Option 1: Using the…

A quick introduction to Javascript shadow DOM

A quick introduction to Javascript shadow DOM

Introduction JavaScript Shadow DOM is a powerful tool for creating isolated and reusable components in web development. It allows developers to create custom elements with their own…

Leave a Reply

%d bloggers like this: