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("http://httpbin.org/");
    // 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();

Related Posts

Web Scraping With a Headless Browser: Puppeteer

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

Scraping Dynamic Websites Using Web Browsers

Introduction to using web automation tools such as Puppeteer, Playwright, Selenium and ScrapFly to render dynamic websites for web scraping