page.waitForSelector() with hidden === true always succeeds in some situations

• Puppeteer version: 1.20.0
• Platform / OS version: macOS 10.14.6
• URLs (if applicable): (private)
• Node.js version: 12.7.0

What steps will reproduce the problem? If I run the following TypeScript code, Selector found will always be logged to the console no matter what selector is waited for.

import puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    //slowMo: 100
  });
  const page = await browser.newPage();
  await page.goto('https://www.google.com/');
  const navigationPromise = page.waitForNavigation();
  //await navigationPromise // uncomment to fix
  await page.waitForSelector('any-text-you-like', { hidden: true, timeout: 0 });
  console.log('Selector found')
})();

This is not the case if hidden: true is changed to visible: true.

In my particular use case there may be pauses and more than one redirect before the correct webpage (which doesn’t have fixed URL) loads so I’m using waitForSelector() with a hidden element like <div id="my-secret-element-id" style="display: none;"> to detect when the correct web page is loaded. But this is not working due to this issue and awaiting e.g. page.waitForNavigation({'waitUntil': 'networkidle0'}); doesn’t solve the issue.

What is the expected result?

Console should not show Selector found unless the selector has actually been found.

What happens instead?

Console does show Selector found.

[J-Rojas]

It definitely works. I tested this rigorously after suspecting some errors, but it turns out I wasn’t handling race conditions very well. As suggested by @paperbackdragon, waitForSelector(..., { hidden: true }) may fail if the node is not in the DOM. You should proceed a call of hidden: true with a await waitForSelector(...) to ensure you are correctly waiting for the node to be visible before testing that it is hidden, if you expect it to appear then disappear within your test case.

You should also try await page.waitForNavigation({waitUntil: 'load'}) after navigation to ensure the DOM is fully parsed and available.

[paperbackdragon]

Reading the docs for waitForSelector, I see this bit from where it talks about hidden:

wait for element to not be found in the DOM or to be hidden

To me that means that using { hidden: true } will result in a success if the selector is not found on the page, meaning the element was not found in the DOM.

That said, if it’s not meant to work that way then I’d be interested to know, because I’ve been using it with that assumption.