How to wait for a page to load in Puppeteer?

When scraping dynamic web pages with Puppeteer and NodeJS we need to wait for the page to fully load before we retrieve the page source. Using Puppeteer's waitForSelector method we can wait for a specific element to appear on the page which indicates that the web page has fully loaded and then we can grab the page source:

const puppeteer = require('puppeteer');

async function run() {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("https://httpbin.dev/");
    // wait for the selector appear on the page in this case we wait for "Auth" drop down to appear:
    await page.waitForSelector('#operations-tag-Auth', {timeout: 5_000});
    console.log(await page.content());
    browser.close();
}

run();
Question tagged: Puppeteer, Headless Browsers

Related Posts

How to Scrape With Headless Firefox

Discover how to use headless Firefox with Selenium, Playwright, and Puppeteer for web scraping, including practical examples for each library.

How to Use Chrome Extensions with Playwright, Puppeteer and Selenium

In this article, we'll explore different useful Chrome extensions for web scraping. We'll also explain how to install Chrome extensions with various headless browser libraries, such as Selenium, Playwright and Puppeteer.

Web Scraping With Puppeteer - 2024 Puppeteer Tutorial

Introduction to using Puppeteer in Nodejs for web scraping dynamic web pages and web apps. Tips and tricks, best practices and example project.