Check visibility in viewport (puppeteer)

Question

How can I check with Puppeteer whether an HTML element is visible within the viewport (the visible area) or not? For example if I have to scroll to be able to see a button, then it's not visible.

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

The page.waitForSelector function is not what I'm looking for, because it only checks if the element is in the DOM and is not hidden with CSS properties.

Is there any method to check an element's visibility in the viewport?

Answer 1

You can use elementHandle.isIntersectingViewport() to check if an element is visible within the current viewport:

const example = await page.$('#example');

if (await example.isIntersectingViewport()) {
  // The element IS visible within the current viewport.
} else {
  // The element IS NOT visible within the current viewport.
}