Categories
JavaScript Answers

How to wait until an element is visible with Puppeteer and JavaScript?

Spread the love

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

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

How to wait until an element is visible with Puppeteer and JavaScript?

To wait until an element is visible with Puppeteer and JavaScript, we can use the waitForFunction method.

For instance, we write

await page.waitForFunction(
  "document.querySelector('.btnNext') && document.querySelector('.btnNext').clientHeight !== 0"
);
await page.waitForFunction(
  "document.querySelector('.btnNext') && document.querySelector('.btnNext').style.visibility !== 'hidden'"
);

const btnNext = await page.$(".btnNext");
await btnNext.click();

to call waitForFunction with a string with expressions that checks if the element has a non-zero height and its visibility isn’t hidden.

After that, we get the element with $ and call click to click it.

Conclusion

To wait until an element is visible with Puppeteer and JavaScript, we can use the waitForFunction method.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.