Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(input): perform hit target check during input (#9546)
This replaces previous `checkHitTarget` heuristic that took place before the action
with a new `setupHitTargetInterceptor` that works during the action:
- Before the action we set up capturing listeners on the window.
- During the action we ensure that event target is the element we expect to interact with.
- After the action we clear the listeners.
This should catch the "layout shift" issues where things move
between action point calculation and the actual action.
Possible issues:
- **Risk:** `{ trial: true }` might dispatch move events like `mousemove` or `pointerout`,
because we do actually move the mouse but prevent all other events.
- **Timing**: The timing of "hit target check" has moved, so this may affect different web pages
in different ways, for example expose more races. In this case, we should retry the click as before.
- **No risk**: There is still a possibility of mis-targeting with iframes shifting around,
because we only intercept in the target frame. This behavior does not change.
There is an opt-out environment variable PLAYWRIGHT_NO_LAYOUT_SHIFT_CHECK that reverts to previous behavior.- Loading branch information
Showing
6 changed files
with
287 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| /** | ||
| * Copyright (c) Microsoft Corporation. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { contextTest as it, expect } from './config/browserTest'; | ||
|
|
||
| it('should block all events when hit target is wrong', async ({ page, server }) => { | ||
| await page.goto(server.PREFIX + '/input/button.html'); | ||
| await page.evaluate(() => { | ||
| const blocker = document.createElement('div'); | ||
| blocker.style.position = 'absolute'; | ||
| blocker.style.width = '400px'; | ||
| blocker.style.height = '400px'; | ||
| blocker.style.left = '0'; | ||
| blocker.style.top = '0'; | ||
| document.body.appendChild(blocker); | ||
|
|
||
| const allEvents = []; | ||
| (window as any).allEvents = allEvents; | ||
| for (const name of ['mousedown', 'mouseup', 'click', 'dblclick', 'auxclick', 'contextmenu', 'pointerdown', 'pointerup']) { | ||
| window.addEventListener(name, e => allEvents.push(e.type)); | ||
| blocker.addEventListener(name, e => allEvents.push(e.type)); | ||
| } | ||
| }); | ||
|
|
||
| const error = await page.click('button', { timeout: 1000 }).catch(e => e); | ||
| expect(error.message).toContain('page.click: Timeout 1000ms exceeded.'); | ||
|
|
||
| // Give it some time, just in case. | ||
| await page.waitForTimeout(1000); | ||
| const allEvents = await page.evaluate(() => (window as any).allEvents); | ||
| expect(allEvents).toEqual([]); | ||
| }); | ||
|
|
||
| it('should block click when mousedown succeeds but mouseup fails', async ({ page, server }) => { | ||
| await page.goto(server.PREFIX + '/input/button.html'); | ||
| await page.$eval('button', button => { | ||
| button.addEventListener('mousedown', () => { | ||
| button.style.marginLeft = '100px'; | ||
| }); | ||
|
|
||
| const allEvents = []; | ||
| (window as any).allEvents = allEvents; | ||
| for (const name of ['mousedown', 'mouseup', 'click', 'dblclick', 'auxclick', 'contextmenu', 'pointerdown', 'pointerup']) | ||
| button.addEventListener(name, e => allEvents.push(e.type)); | ||
| }); | ||
|
|
||
| await page.click('button'); | ||
| expect(await page.evaluate('result')).toBe('Clicked'); | ||
| const allEvents = await page.evaluate(() => (window as any).allEvents); | ||
| expect(allEvents).toEqual([ | ||
| // First attempt failed. | ||
| 'pointerdown', 'mousedown', | ||
| // Second attempt succeeded. | ||
| 'pointerdown', 'mousedown', 'pointerup', 'mouseup', 'click', | ||
| ]); | ||
| }); | ||
|
|
||
| it('should not block programmatic events', async ({ page, server }) => { | ||
| await page.goto(server.PREFIX + '/input/button.html'); | ||
| await page.$eval('button', button => { | ||
| button.addEventListener('mousedown', () => { | ||
| button.style.marginLeft = '100px'; | ||
| button.dispatchEvent(new MouseEvent('click')); | ||
| }); | ||
|
|
||
| const allEvents = []; | ||
| (window as any).allEvents = allEvents; | ||
| button.addEventListener('click', e => { | ||
| if (!e.isTrusted) | ||
| allEvents.push(e.type); | ||
| }); | ||
| }); | ||
|
|
||
| await page.click('button'); | ||
| expect(await page.evaluate('result')).toBe('Clicked'); | ||
| const allEvents = await page.evaluate(() => (window as any).allEvents); | ||
| // We should get one programmatic click on each attempt. | ||
| expect(allEvents).toEqual([ | ||
| 'click', 'click', | ||
| ]); | ||
| }); | ||
|
|
||
| it('should click the button again after document.write', async ({ page, server }) => { | ||
| await page.goto(server.PREFIX + '/input/button.html'); | ||
| await page.click('button'); | ||
| expect(await page.evaluate('result')).toBe('Clicked'); | ||
|
|
||
| await page.evaluate(() => { | ||
| document.open(); | ||
| document.write('<button onclick="window.result2 = true"></button>'); | ||
| document.close(); | ||
| }); | ||
| await page.click('button'); | ||
| expect(await page.evaluate('result2')).toBe(true); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.