[BUG] Page.click() doesn't work when pointer-events: none is toggled off

[celeryclub]

Context:

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

Code Snippet

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

(async () => {
  const browser = await chromium.launch({
    headless: false,
    args: ['--window-size=1280,720'],
  });
  const page = await browser.newPage();

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

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

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

Describe the bug

Hey team. Hope all is well and you had a great weekend.

I have a page with a button that's not clickable until 5s after the page loads. I'd expect playwright to still click the button since this is well within the 30s default timeout, but it doesn't appear to wait for pointer-events to be enabled. It seems like it tries to click it before they're enabled and fails and never tries again.

Here's a link to the code sandbox for easy viewing of the source code. https://codesandbox.io/s/awesome-dijkstra-f1t94?file=/src/App.js

Thanks for taking a look!

[dgozman]

Hi Steve. This one sounds like it is catching a real bug on the website. I would think that the real user will try to click on the button, and nothing is going to happen. At least that's what I did myself. Perhaps, in the real app it looks differently? What do you think?

[celeryclub]

Thanks for looking into this @dgozman. In the real app, the page is in a loading state and the developer added pointer-events: none to the "Change filter" button until the current loading is finished. There may be a better way to handle this in the app code, since it could be confusing if the load takes a few moments and the user tries to click the button.

So yes, maybe we should change the app code. :) But I just want to double-check - do you consider this a bug in playwright? Is this use case of toggling pointer-events meant to be supported?