How can I check that an element is visible with Puppeteer and pure JavaScript?

javascript css node.js puppeteer visibility
aknuds1 picture aknuds1 · Dec 8, 2017 · Viewed 23.1k times · Source

I wish to check that a DOM element is visible with Puppeteer and pure JavaScript (not jQuery), how can I do this? By visible I mean that the element is displayed through CSS, and not hidden (f.ex. by display: none).

For example, I can determine whether my element #menu is not hidden via CSS rule display: none, in the following way: 

const isNotHidden = await page.$eval('#menu', (elem) => {
  return elem.style.display !== 'none'
})

How can I determine in general though if the element is hidden or not, and not just through display: none?

Answer

aknuds1 picture aknuds1 · Dec 8, 2017

I found that Puppeteer has an API method for this purpose: Page.waitForSelector, via its visible option. I wasn't aware of the latter option, but it lets you wait until an element is visible.

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

Conversely you can wait for an element to be hidden, via the hidden option.

I think this is the idiomatic answer, with regards to the Puppeteer API. Thanks to Colin Cline though as I think his answer is probably useful as a general JavaScript solution.

Related questions

Webpack - sass loader cannot find images

The sass loader doc says: "If you're just generating CSS without passing it to the css-loader, it must be relative to your web root". So i did as it tells, I have my index.html in my project root, then …

Read More
Module not found: Error: Can't resolve 'css-loader'

I'm using css-loader and get following error: ERROR in ./src/pages/home/index.js Module not found: Error: Can't resolve 'css-loader' in '/Users/jian/Documents/sina/webpack-barbarian-test' @ ./src/pages/home/index.js 2:0-20 @ multi ../webpack-barbarian/node_modules/webpack-dev-server/client?…

Read More
Minify Scripts/CSS in production mode with node.js

I have a web app that runs in node. All the (client) Javascript/CSS files are not minified at the moment to make it easier to debug. When I am going into production, I would like to minify these scripts. …

Read More