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.
