puppeteer: how to wait until an element is visible?

Question

I would like to know if I can tell puppeteer to wait until an element is displayed.

const inputValidate = await page.$(         


        

Answer 1

You can use page.waitFor(), page.waitForSelector(), or page.waitForXPath() to wait for an element on a page:

// Selectors

const css_selector = '.btnNext';
const xpath_selector = '//*[contains(concat(" ", normalize-space(@class), " "), " btnNext ")]';

// Wait for CSS Selector

await page.waitFor(css_selector);
await page.waitForSelector(css_selector);

// Wait for XPath Selector

await page.waitFor(xpath_selector);
await page.waitForXPath(xpath_selector);

Note: In reference to a frame, you can also use frame.waitFor(), frame.waitForSelector(), or frame.waitForXPath().