[BUG] Chromium: Cannot click, element intercepts pointer events

[creage]

Context:

• Playwright Version: 1.20.0
• Operating System: Windows10
• Node.js version: LTS 16
• Browser: Chromium only

Describe the bug
Trying to click on the ElementHandle, located by ElementHandle.waitForSelector() - fails in Chroimum with error

attempting click action
      waiting for element to be visible, enabled and stable
      element is visible, enabled and stable
      scrolling into view if needed
      done scrolling
      performing click action
      <span class="selection">…</span> intercepts pointer events

Works fine in Webkit and Firefox, was working fine in all browsers before 1.20.0 upgrade.

[pavelfeldman]

Thanks for your report. Is there a page we could repro it on?

[Tallyb]

FWIW - we experienced the same. Downgrade to 1.19 solved it. Not sure if I can make a small repro.

[jnizet]

I have the same problem. A test that passed with 1.19 now fails with 1.20. Here are some additional details:

I have a link looking like this:

<a href="/activities/42"><h3>Foo</h3></a>

Using await page.click('text=Foo'); fails on chromium, but passes on the other browsers.

Changing it to await page.click('text=Foo', { force: true }); makes it pass on chromium, but then fails on webkit.

Changing it to await page.click('a:has-text("Foo")'); makes it pass everywhere.

To make things even more confusing, the failure on webkit happens on Github actions (Ubuntu VM), but doesn't happen locally (macOS).

[dgozman]

@jnizet Any chance for a repro script/test with the page url?

[jnizet]

Hi @dgozman

Here's a repro for the chromium issue.
Steps to reproduce:

• unzip the repro.zip file. It contains an index.html and some assets that have been generated by exporting a page of my actual Angular-based application.
• cd into playwright-repro
• run a web server serving files in that directory, on port 8080 (I use the http-server NPM package)
• execute the following test file (with playwright 1.20). The first test fails on chromium only. The other two are workarounds to make the test pass.

import { test } from '@playwright/test';

test.describe('Activities', () => {
  test('should click activities', async ({ page }) => {
    await page.goto('http://localhost:8080/index.html');
    const romimineCard = page.locator('.card', { hasText: 'Romimine' });
    await test.expect(romimineCard.locator('h3')).toHaveText('Romimine');

    await page.click('text=Romimine');
  });

  test('should click activities with force', async ({ page }) => {
    await page.goto('http://localhost:8080/index.html');
    const romimineCard = page.locator('.card', { hasText: 'Romimine' });
    await test.expect(romimineCard.locator('h3')).toHaveText('Romimine');

    await page.click('text=Romimine', { force: true });
  });

  test('should click activities with a', async ({ page }) => {
    await page.goto('http://localhost:8080/index.html');
    const romimineCard = page.locator('.card', { hasText: 'Romimine' });
    await test.expect(romimineCard.locator('h3')).toHaveText('Romimine');

    await page.click('a:has-text("Romimine")');
  });
});

repro.zip

[dgozman]

Investigation notes:

• document.elementsFromPoint() returns elements in the different order for some reason. Previously it was [h3.card-title.fs-4, a, ...], now it is [a, h3.card-title.fs-4, ...].
• Bisected Chromium down to https://chromium.googlesource.com/chromium/src/+log/f571b4214647f380beaf90bdf04bb97689e23d40..53508758bcbeb7e0fb70e87a7bed02de277bd602. Suspecting this change: https://chromium.googlesource.com/chromium/src/+/4a76c96d2a4021257e691058c1fe1fb60d9d8327
• Filed https://bugs.chromium.org/p/chromium/issues/detail?id=1307458.

[joecuevasjr]

I'm experiencing a similar(or the same) issue as the original poster on Playwright .NET v1.20.1, with the same error on Chromium. I did not experience the issue on 1.19.0. However, Firefox and WebKit continue to work.

My issue originates on a call to .Locator().ClickAsync();
Downgrading back to v1.19 resolves my issue.

Thanks!