Codegen/Recorder: not all clicks are being actioned nor recorded

[Thomas-Nagel]

Steps to reproduce

1. start “record new” in VS Code or codegen via cli npx playwright codegen
2. navigate to google.com (it opens chromium on my machine)
3. click on accept or reject cookies button
   -> the click is not actioned - and not recorded

A click e.g. on “More options” is actioned and recorded.

The locators are correctly shown, adding a check for "visibility" and other options via the "locator toolbar" is working fine

Created code:

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

test('test', async ({ page }) => {
await page.goto('https://www.google.com/');
});

Setup:
Playwright typescript 1.41 (as far as I can recall, it was no issue with 1.40.1)
Chromium Version 121.0.6167.57 (Developer Build) (64-bit)
MS Windows 10 and 11

[mxschmitt]

I can repro.

1.41.0-alpha-jan-1-2024 bad
1.41.0-alpha-dec-31-2023 good

Bisected to 214b373...7bffff5.

[Thomas-Nagel]

After the upgrade to Version 1.41.1, the issue got sorted.
Confirmation from our side that the sample used for reproducing the issue as well our real application is fixed.

[ruifigueira]

This issue was caused by a contribution of mine, sorry about that 😔

The reason why it fails with google buttons is because they have a nested div, something like:

<button>
  <div role="none">Accept all</div>
</button>

The recorder code ends up having the div as the hovered element, but its click event target is the button. In my change, recorder only handled clicks if hovered element and event target matched (this was my attempt to fix a problem with webkit and slider inputs, as described here)

I'll add a regression test to ensure buttons like the ones at google page are recorded properly.