What's the best way to verify element visibility using Puppeteer and vanilla JavaScript?

Other Questions Puppeteer
1

I’m trying to figure out how to check if a DOM element is visible using Puppeteer and vanilla JavaScript. I don’t want to use jQuery. By visible, I mean the element isn’t hidden by CSS tricks like display: none or other methods.

Here’s what I’ve got so far to check if my #menu element isn’t hidden by display: none:

const elementVisible = await page.$eval('#menu', (el) => {
  return window.getComputedStyle(el).display !== 'none'
})

But this only checks for display: none. How can I make a more comprehensive check for element visibility? Are there other CSS properties or techniques I should consider?

I’m new to Puppeteer and could use some guidance on best practices for this kind of task. Any tips or code examples would be super helpful. Thanks!

2

Having worked extensively with Puppeteer, I’ve found that checking element visibility can be trickier than it seems. One approach I’ve used successfully is combining multiple checks:

const isVisible = await page.$eval('#menu', el => {
    const style = window.getComputedStyle(el);
    const rect = el.getBoundingClientRect();
    return style.display !== 'none' &&
           style.visibility !== 'hidden' &&
           parseFloat(style.opacity) > 0 &&
           rect.width > 0 && rect.height > 0 &&
           rect.top < window.innerHeight && rect.bottom > 0 &&
           rect.left < window.innerWidth && rect.right > 0;
});

This code not only checks for common CSS properties like display, visibility, and opacity but also confirms the element’s dimensions and position within the viewport. This comprehensive check has proven reliable in detecting hidden elements. It’s also important to handle potential exceptions and timeouts to ensure a robust implementation.

3

hey there, i’ve dealt with this before. don’t forget to check for transform: scale(0) or clip-path: inset(100%) - these can make elements invisible too. also, position matters. if it’s outside viewport or behind other stuff, it’s technically not visible. maybe try combining those checks with what you already have?

4

I’ve tackled this issue before in my web scraping projects. Here’s what I’ve found works well:

First, expand your visibility check to include more CSS properties. Something like this has worked for me:

const isVisible = await page.$eval('#menu', el => {
    const style = window.getComputedStyle(el);
    return style.display !== 'none' && 
           style.visibility !== 'hidden' && 
           style.opacity !== '0' &&
           el.offsetWidth > 0 && 
           el.offsetHeight > 0;
});

This covers most common ways elements are hidden. But don’t forget about positioning! An element might be technically visible but off-screen. You can check for this with:

const isInViewport = await page.$eval('#menu', el => {
    const rect = el.getBoundingClientRect();
    return rect.top < window.innerHeight && rect.bottom > 0;
});

Combine these checks for a pretty robust visibility test. Hope this helps!