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

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

As others have already observed, invoking the click() on the ancestor that listens to the mouse event seems to work around the issue.

Instead of figuring out complicated selectors, you might as well select your favorite element in your preferred way and then use XPath get to the interactive ancestor:

await page.locator('.myclass').first().locator('xpath=../..').click(); - in this example, I’m clicking the element two levels above the “myclass” element

Definitely not a solution, but hopefully saves someone’s precious time.

Thanks for the investigation and the workaround @dgozman. It fills me with joy to have “Romimine”, which is the name we gave to the cat living in our garden, now part of the codebase of Playwright and used to fix an issue in chromium. 😂