Question

33

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

rated 0 times [ 39] [ 6] / answers: 1 / hits: 47842 / 7 Years ago, fri, december 8, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseg

Add To Favorites

Follow

Total Points: 460

Total Questions: 96

Total Answers: 90

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

answered 7 Years ago victorr · Accepted Answer

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.