playwright/tests/page/page-click-timeout-4.spec.ts
Dmitry Gozman 61ff52704c
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.
2021-11-05 17:31:28 -07:00

48 lines
2.0 KiB
TypeScript

/**
* Copyright 2018 Google Inc. All rights reserved.
* Modifications 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 { test as it, expect } from './pageTest';
it('should timeout waiting for stable position', async ({ page, server }) => {
await page.goto(server.PREFIX + '/input/button.html');
const button = await page.$('button');
await button.evaluate(button => {
button.style.transition = 'margin 5s linear 0s';
button.style.marginLeft = '200px';
});
const error = await button.click({ timeout: 3000 }).catch(e => e);
expect(error.message).toContain('elementHandle.click: Timeout 3000ms exceeded.');
expect(error.message).toContain('waiting for element to be visible, enabled and stable');
expect(error.message).toContain('element is not stable - waiting');
});
it('should click for the second time after first timeout', async ({ page, server, mode }) => {
it.skip(mode !== 'default');
await page.goto(server.PREFIX + '/input/button.html');
const __testHookBeforePointerAction = () => new Promise(f => setTimeout(f, 1500));
const error = await page.click('button', { timeout: 1000, __testHookBeforePointerAction } as any).catch(e => e);
expect(error.message).toContain('page.click: Timeout 1000ms exceeded.');
expect(await page.evaluate('result')).toBe('Was not clicked');
await page.waitForTimeout(2000);
expect(await page.evaluate('result')).toBe('Was not clicked');
await page.click('button');
expect(await page.evaluate('result')).toBe('Clicked');
});