Puppeteer: element is visible, yet `page.waitForSelector` says it is NOT

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 5.2.1
• Platform / OS version: OS X
• URLs (if applicable):
• Node.js version: 10.22

What steps will reproduce the problem?

Please include code that reproduces the issue.

await page.waitForSelector(".test", {
  visible: true,
});

I’m setting headless: false.

I’m looking right at .test in the DOM of launched browser window.

And yet…

await page.waitForSelector(".test", {
  visible: true,
});

Never resolves. Why?

OK, Let’s try this another way…

const d = await page.waitForSelector(".test", {
  timeout: 1222,
});
debugger;
try {
  await d.click(".test");
} catch (e) {
  debugger;
  console.log(e);
}

Again…

Error: Node is either not visible or not an HTMLElement

I’m SEEING .test element with my eyes. It’s there.

WHY does this fail??

[niveinii]

might just be a shot in the dark but try setting the viewport to a full screen:

await page.setViewport({width: 1860, height: 1400});

[OrKoN]

Generally, the could be multiple reasons for this to fail: 1) the element is outside of the viewport 2) there are multiple elements with the same selectors and the one that gets queried for is not visible 3) the element has zero width/height but has visible children. Without a specific repro it’s hard to say if there is a bug. Also, we have tests for this functions so it’s working in general, but I won’t rule out some edge cases. So please re-open the issue with a repro if it still happens in the latest version.