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?

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?

• javascript
• cucumber
• puppeteer

• I found the solution by using the elementHandle.boundingBox() method, which returns null if the element is not visible in the viewport. – patricia Commented Feb 19, 2018 at 10:34
• finally, how do you doing? I'm stuck like you. Thanks – jvrdom Commented May 9, 2018 at 3:12
• Why doesn't this work though? I'm in the same situation. Why does Puppeteer offer this as an API if it doesn't work. – GN. Commented Sep 3, 2020 at 21:57

1 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.
}