puppeteer: how to wait until an element is visible?

Solution 1:

I think you can use page.waitForSelector(selector[, options]) function for that purpose.

const puppeteer = require('puppeteer');

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

To check the options avaible, please see the github link.

Solution 2:

If you want to ensure the element is actually visible, you have to use

page.waitForSelector('#myId', {visible: true})

Otherwise you are just looking for the element in the DOM and not checking for visibility.