[BUG] Page.click throws "Node is either not visible or not an HTMLElement" if element animates from outside the viewport

[dialupdev]

Context:

• Playwright Version: 1.0.1
• Operating System: macOS
• Node version: 12.16.3
• Browser: Chromium

Describe the bug

Hey team. I'm seeing some flakiness in my tests and I'm having a hard time pinning it down with a repro. This only happens around 5% of the time, and the code isn't changing in between test runs, so it's been difficult to find a way to debug. I don't see anything strange about the element. It does animate in from outside the viewport though, so that's something.

Here's the LOC that's throwing:

playwright/src/dom.ts

Line 209 in 4bf5742

throw new Error('Node is either not visible or not an HTMLElement');

I read through the method source, but it's bit hard for me to parse exactly what's going on. The selector I'm using is definitely referring to an HTML element, so maybe the problem is that it's not visible. I'm trying to understand why this method would throw if the element isn't visible though. Shouldn't Playwright wait for up to 30s for the element to become visible?

I'm going to try to create a repro, but it would help to have a bit of context before diving in.

Thanks for taking a look!

[dgozman]

Thanks for filing!

I would like to understand the problem a bit more. One possible explanation is that we failed to detect the animation. Take a look at "Element is animating in, but temporarily pauses in the middle" section here. Are you doing something similar, but animating from outside the viewport?

[dialupdev]

Thanks for looking into this @dgozman!

I managed to create a minimal repro of this issue. The sidebar opens after a 1s delay just to ensure the bug is demonstrated. In the real app there's no delay, which is probably why it passes some of the time.

const { chromium } = require('playwright-chromium');

(async () => {
  const browser = await chromium.launch({
    headless: false,
  });
  const page = await browser.newPage();

  await page.goto('https://qjmuh.csb.app/', { waitUntil: 'networkidle' });
  await page.click('.panel-button');
  await page.click('.bing-button');
  await page.waitForTimeout(1000);

  // We should be on bing.com right now but we're still on the original page because the second click didn't work

  await browser.close();
})();

Please let me know if there's anything else I can provide that would be helpful in figuring this out.