Context:

  System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    Memory: 10.23 GB / 31.34 GB
    Container: Yes
  Binaries:
    Node: 14.15.1 - ~/.local/share/nvm/v14.15.1/bin/node
    npm: 6.14.8 - ~/.local/share/nvm/v14.15.1/bin/npm
  Languages:
    Bash: 5.0.17 - /usr/bin/bash
  npmPackages:
    playwright: 1.9.2 => 1.9.2
    playwright-core: 1.9.2 => 1.9.2

• Browser: Chromium

Code Snippet

Proprietary project, but I got a nice picture.

The CSS of the custom element has this when this happens:

:host([hidden]) {
  display: none;
}

Describe the bug

// this fails since it gets stuck here
  await page.waitForSelector('#loaderIcon', {
    state: 'hidden',
  });

I checked with the Inspector and saw this.

  pw:api waiting for selector "#loaderIcon" to be hidden +1ms
  pw:api   selector resolved to visible <xxx-v0-icon name="dial" id="loaderIcon"></xxx-v0-icon> +20ms

I am not sure if the above is failing either due to:

1. It has problem with the web component <xxx-base-v0-loader> being hidden (through the "advanced" CSS above), but the ID of the element waiting to be hidden is a child element.
2. The inspector gets stuck at the above, never re-trying for it to be hidden. Usually I see retries in the inspector (or when using DEBUG=pw:api) but not this time. So maybe it was visible (expected) but then got hidden, but it was never retried if it was?