[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

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. 😂