yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(click): force any hover effects before waiting for hit target (#1869)

Browse Source 
This way, any on-hover animations or click blockers will be accounted for.
This commit is contained in:
Dmitry Gozman 2020-04-20 10:07:59 -07:00 committed by GitHub
parent 6231d50ba5
commit effeaaf852
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/dom.ts
View File

@ -226,6 +226,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
const point = position ? await this._offsetPoint(position) : await this._clickablePoint();
point.x = (point.x * 100 | 0) / 100;
point.y = (point.y * 100 | 0) / 100;
await this._page.mouse.move(point.x, point.y); // Force any hover effects before waiting for hit target.
if (!force)
await this._waitForHitTargetAt(point, deadline);

31
test/click.spec.js
View File

@ -198,6 +198,7 @@ describe('Page.click', function() {
'mouseover',
'mouseenter',
'mousemove',
'mousemove',
'mousedown',
'mouseup',
'click',
@ -596,6 +597,36 @@ describe('Page.click', function() {
expect(clicked).toBe(true);
expect(await page.evaluate(() => window.clicked)).toBe(true);
});
it('should fail when element is blocked on hover', async({page, server}) => {
await page.setContent(`<style>
container { display: block; position: relative; width: 200px; height: 50px; }
div, button { position: absolute; left: 0; top: 0; bottom: 0; right: 0; }
div { pointer-events: none; }
container:hover div { pointer-events: auto; background: red; }
</style>
<container>
<button onclick="window.clicked=true">Click me</button>
<div></div>
</container>`);
const error = await page.click('button', { timeout: 3000 }).catch(e => e);
expect(error.message).toBe('waiting for element to receive pointer events failed: timeout exceeded');
expect(await page.evaluate(() => window.clicked)).toBe(undefined);
});
it('should wait while element is blocked on hover', async({page, server}) => {
await page.setContent(`<style>
@keyframes move-out { from { marign-left: 0; } to { margin-left: 150px; } }
container { display: block; position: relative; width: 200px; height: 50px; }
div, button { position: absolute; left: 0; top: 0; bottom: 0; right: 0; }
div { pointer-events: none; }
container:hover div { pointer-events: auto; background: red; animation: 3s linear move-out; animation-fill-mode: forwards; }
</style>
<container>
<button onclick="window.clicked=true">Click me</button>
<div></div>
</container>`);
await page.click('button');
expect(await page.evaluate(() => window.clicked)).toBe(true);
});
});
describe('Page.check', function() {