[BUG] waitForSelector can not work

Context:

• Playwright Version: 1.6.1
• Operating System:
  • Windows 10 Enterprise 20H2 19042.685
  • Ubuntu 16.04
• Node.js version: 12.13.0
• Browser: Chromium
• Extra:
  • jest: 26.6.3
  • typescript: 4.0.5
  • ts-jest: 26.4.4

Code Snippet

Below is simplified code

const {chromium, webkit, firefox} = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await (await browser.newContext({
    viewport: {
      width: 1920,
      height: 1080
    }
  })).newPage();
  const selector = ".test-selector";

  // It works
  const elHandle = await page.$(selector);

  // Timeout error, stable reproduce
  const elHandle = await page.waitForSelector(selector);

  // It works
  const elHandle = await page.waitForSelector(selector, { state: "attached" });
})();

Describe the bug

We’re sure that selected element has content by screenshots, and we check the API document to make sure it has the bounding box by printing $(selector).getBoundingClientRect() in the console on headless: false mode.

So we suspect it’s a bug caused by waitForSelector with default options.

[aslushnikov]

Looks like Playwright served you well! 🔥

[Fanlalala]

Hi @aslushnikov & @Joouis , this issue is caused by elm.getBoundingClientReact().width = 0. So selectorEvaluator.isVisible(https://github.com/microsoft/playwright/blob/b67e0221117cc0dca11ae3717b70442649078afe/src/server/injected/selectorEvaluator.ts#L538) will return false. This only happens on office-ui-fabric-react panel element. We do not think it is playwright’s bug.