Sometimes, we want to wait until an element is visible with Puppeteer.

In this article, we’ll look at how to wait until an element is visible with Puppeteer.

How to wait until an element is visible with Puppeteer?

To wait until an element is visible with Puppeteer, we call the page.waitForSelector method.

For instance, we write

const puppeteer = require('puppeteer');

const wait = async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage();
  await page
    .waitForSelector('#myId')
  console.log('got it')
  browser.close();
}

to call puppeteer.launch to launch Puppeteer.

Then we call browser.newPage to open the page.

And then we call page.waitForSelector with the CSS selector of the element we want to wait for.

Then once we’re done, we call browser.close to close the browser.

Conclusion

To wait until an element is visible with Puppeteer, we call the page.waitForSelector method.