[BUG] Misclick when some element overlays the target's iframe

[eatonjl]

Context:

• Playwright Version: 1.22
• Operating System: Mac (12.4 Monterey)
• Node.js version: v16.15.0
• Browser: Any
• Extra: N/A

Code Snippet

N/A (Can provide something if needed)

Describe the bug

I was noticing an issue when writing tests. I would see situations where tests would fail for odd reasons. In the trace files it would show that the specified button was found, visible, and clickable, and it would click the button. But the image on that part of the trace files shows the interacting click (indicated by a red circle) clicking into thin air (so to speak). The button hadn't loaded yet. At first I thought this was an issue with our web application. I had our developers look at it with me to see if we were doing something to make Playwright think it was visible before it actually was.

The issue is that the developer could not reproduce the issue. The tests ran fine on their machine. I then ran the tests in TeamCity and they also worked fine. I then ran the tests on my M1 MacBook Pro, using Parallels, and they were fine. The only time it has issues is when I run the tests directly on my M1 Pro MacBook on Mac OS.

Does anyone else have this issue on the new M1 MacBooks?

[rwoll]

Related thread #12660 (comment), but let's keep the discussion on this Issue since PRs once merged are not triaged/monitored.

[pavelfeldman]

M1 Pro is fast, so when you are not slowing it down with parallels and such, things run faster and surface the race conditions your test has. I'd guess this is a hydration issue: button is visible, but the listener has not yet been attached to it. The artifact of the thin air could also be due to the delay in the rasterization. I.e. everything is ready in DOM, but pixels have not been rasterized for the screencast that tracing is recording.

Try opening devtools, turning on Slow 3G in the network panel, reload the page, do the scenario by hand and click the button once you see it. When lazy hydration is used, often times it results in no-effect click.

[eatonjl]

@pavelfeldman & @rwoll, I did a bit more investigation with one of our developers. It turns out (at least in one instance) that the click is getting intercepted without Playwright knowing it. I am not sure a good way to show you, so here is what I have:
You can download and extract this zip file to access the demo html page we made.
https://www.filehosting.org/file/details/4754107/demo.zip
Then, using this code, you can run the test:

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

test('billy', async ({ page }) => {
  await page.goto('file:///Users/jeaton/Desktop/demo/index.html');
  await page.frameLocator('iframe').locator('text=Button').click();
  page.once('dialog', (dialog) => {
    console.log(`Dialog message: ${dialog.message()}`);
    dialog.dismiss().catch(() => {});
  });

  page.once('dialog', dialog => {
    console.log(`Dialog message: ${dialog.message()}`);
    dialog.dismiss().catch(() => {});
  });
  await page.locator('text=Button').click();
});

What you can see in this test is that Playwright sees the first button as clickable and visible. It initiates the click, but nothing happens. This is because there is an overlay over the page. The button is in an iframe. However, the second button is seen as clickable and visible, but errors out because of the overlay. So, it would seem that playwright thinks elements in frames that are obscured by overlays are clickable. Would it be safe to say that this is a bug?

[eatonjl]

On most machines, the overlay disappears before Playwright can initiate the click. On my machine, however, the click gets initiated while the overlay is present, which is why the click action never happens.

[X-GitHub-De1ivery]

بتاريخ الخميس، 9 يونيو 2022، جاء من Joe Eaton ***@***.***>:

…

@pavelfeldman <https://github.com/pavelfeldman> & @rwoll <https://github.com/rwoll>, I did a bit more investigation with one of our developers. It turns out (at least in one instance) that the click is getting intercepted without Playwright knowing it. I am not sure a good way to show you, so here is what I have: You can download and extract this zip file to access the demo html page we made. https://www.filehosting.org/file/details/4754107/demo.zip Then, using this code, you can run the test: import { test } from ***@***.***/test'; test('billy', async ({ page }) => { await page.goto('file:///Users/jeaton/Desktop/demo/index.html'); await page.frameLocator('iframe').locator('text=Button').click(); page.once('dialog', (dialog) => { console.log(`Dialog message: ${dialog.message()}`); dialog.dismiss().catch(() => {}); }); page.once('dialog', dialog => { console.log(`Dialog message: ${dialog.message()}`); dialog.dismiss().catch(() => {}); }); await page.locator('text=Button').click(); }); What you can see in this test is that Playwright sees the first button as clickable and visible. It initiates the click, but nothing happens. This is because there is an overlay over the page. The button is in an iframe. However, the second button is seen as clickable and visible, but errors out because of the overlay. So, it would seem that playwright thinks elements in frames that are obscured by overlays are clickable. Would it be safe to say that this is a bug? — Reply to this email directly, view it on GitHub <#14752 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AY5PVFBP73IJ665WOCQ3VG3VOJCH7ANCNFSM5YKH4JCQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[pavelfeldman]

This sounds like c4581e5

You can try npm i playwright/test@next to verify!

[eatonjl]

@pavelfeldman I tried that, but got this error:
0 verbose cli [
0 verbose cli '/usr/local/bin/node',
0 verbose cli '/usr/local/bin/npm',
0 verbose cli 'i',
0 verbose cli 'playwright/test@next'
0 verbose cli ]
1 info using npm@8.5.5
2 info using node@v16.15.0
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 1ms
5 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 0ms
6 timing config:load:builtin Completed in 0ms
7 timing config:load:cli Completed in 1ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/Users/jeaton/Documents/GitHub/pt-automation/PolicyTechAutomationTests/.npmrc Completed in 0ms
10 timing config:load:project Completed in 2ms
11 timing config:load:file:/Users/jeaton/.npmrc Completed in 1ms
12 timing config:load:user Completed in 1ms
13 timing config:load:file:/usr/local/etc/npmrc Completed in 1ms
14 timing config:load:global Completed in 1ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:credentials Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 7ms
19 timing npm:load:configload Completed in 7ms
20 timing npm:load:setTitle Completed in 4ms
21 timing config:load:flatten Completed in 1ms
22 timing npm:load:display Completed in 1ms
23 verbose logfile /Users/jeaton/.npm/_logs/2022-06-09T21_17_06_561Z-debug-0.log
24 timing npm:load:logFile Completed in 3ms
25 timing npm:load:timers Completed in 0ms
26 timing npm:load:configScope Completed in 0ms
27 timing npm:load Completed in 17ms
28 timing arborist:ctor Completed in 0ms
29 silly logfile start cleaning logs, removing 1 files
30 timing idealTree:init Completed in 9ms
31 timing idealTree Completed in 10ms
32 timing command:i Completed in 13ms
33 verbose stack Error: ENOENT: no such file or directory, open '/Users/jeaton/Documents/GitHub/pt-automation/PolicyTechAutomationTests/playwright/test@next/package.json'
34 verbose cwd /Users/jeaton/Documents/GitHub/pt-automation/PolicyTechAutomationTests
35 verbose Darwin 21.5.0
36 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "playwright/test@next"
37 verbose node v16.15.0
38 verbose npm v8.5.5
39 error code ENOENT
40 error syscall open
41 error path /Users/jeaton/Documents/GitHub/pt-automation/PolicyTechAutomationTests/playwright/test@next/package.json
42 error errno -2
43 error enoent ENOENT: no such file or directory, open '/Users/jeaton/Documents/GitHub/pt-automation/PolicyTechAutomationTests/playwright/test@next/package.json'
44 error enoent This is related to npm not being able to find a file.
44 error enoent
45 verbose exit -2
46 timing npm Completed in 94ms
47 verbose unfinished npm timer reify 1654809426641
48 verbose unfinished npm timer reify:loadTrees 1654809426643
49 verbose unfinished npm timer idealTree:userRequests 1654809426652
50 verbose code -2
51 error A complete log of this run can be found in:
51 error /Users/jeaton/.npm/_logs/2022-06-09T21_17_06_561Z-debug-0.log

[rwoll]

You can try npm i playwright/test@next to verify!

There was a typo in this (missing @ at the start of the package name). It should be:

$ npm i @playwright/test@next

[eatonjl]

@rwoll and @pavelfeldman, I confirmed that my version is now 1.23.0-alpha-jun-10-2022 but I had the same experience. Tired it on the demo build we sent you and it still tried to click the button that had an overlay on it. You can try it with the demo as well and see the results.