kyfx
/
playwright
mirror of https://github.com/microsoft/playwright.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore: properly initialize Touch arguments in TouchEvent (#34200)

This commit is contained in:
Yury Semikhatsky 2025-01-03 12:16:01 -08:00 committed by GitHub
parent dca95ba609
commit 8b45ea6f2f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 69 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/playwright-core/src/server/injected/injectedScript.ts
View File

@ -996,13 +996,20 @@ export class InjectedScript {
return { stop };
}
dispatchEvent(node: Node, type: string, eventInit: Object) {
dispatchEvent(node: Node, type: string, eventInitObj: Object) {
let event;
eventInit = { bubbles: true, cancelable: true, composed: true, ...eventInit };
const eventInit: any = { bubbles: true, cancelable: true, composed: true, ...eventInitObj };
switch (eventType.get(type)) {
case 'mouse': event = new MouseEvent(type, eventInit); break;
case 'keyboard': event = new KeyboardEvent(type, eventInit); break;
case 'touch': event = new TouchEvent(type, eventInit); break;
case 'touch': {
eventInit.target ??= node;
eventInit.touches = eventInit.touches?.map((t: any) => t instanceof Touch ? t : new Touch({ ...t, target: t.target ?? node }));
eventInit.targetTouches = eventInit.targetTouches?.map((t: any) => t instanceof Touch ? t : new Touch({ ...t, target: t.target ?? node }));
eventInit.changedTouches = eventInit.changedTouches?.map((t: any) => t instanceof Touch ? t : new Touch({ ...t, target: t.target ?? node }));
event = new TouchEvent(type, eventInit);
break;
}
case 'pointer': event = new PointerEvent(type, eventInit); break;
case 'focus': event = new FocusEvent(type, eventInit); break;
case 'drag': event = new DragEvent(type, eventInit); break;

59
tests/library/locator-dispatchevent-touch.spec.ts Normal file
View File

@ -0,0 +1,59 @@
/**
* 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.use({ hasTouch: true });
it('should support touch points in touch event arguments', async ({ page, server, browserName }) => {
it.fixme(browserName === 'webkit', 'WebKit does not have Touch constructor');
await page.goto(server.EMPTY_PAGE);
await page.setContent(`
<div data-testid='outer' style="position: absolute; width: 120px; height: 120px; background-color: red;">
<div data-testid='inner' style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background-color: green; z-index: 3;">inner</div>
</div>`);
const outer = page.getByTestId('outer');
await outer.evaluate(el => {
const events = [];
(window as any).events = events;
el.addEventListener('touchstart', (e: TouchEvent) => events.push('touchstart: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
el.addEventListener('touchmove', (e: TouchEvent) => events.push('touchmove: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
el.addEventListener('touchend', (e: TouchEvent) => events.push('touchend: ' + [...e.touches].map(t => `${t.constructor.name}(id: ${t.identifier}, clientX: ${t.clientX}, clientY: ${t.clientY})`)));
});
const touches = [{ identifier: 0, clientX: 61, clientY: 60 }, { identifier: 1, clientX: 59, clientY: 60 }];
const inner = page.getByTestId('inner');
await inner.dispatchEvent('touchstart', {
touches,
changedTouches: touches,
targetTouches: touches,
});
await inner.dispatchEvent('touchmove', {
touches,
changedTouches: touches,
targetTouches: touches,
});
await inner.dispatchEvent('touchend', {
touches: [],
changedTouches: touches,
targetTouches: [],
});
expect(await page.evaluate(() => (window as any).events)).toEqual([
'touchstart: Touch(id: 0, clientX: 61, clientY: 60),Touch(id: 1, clientX: 59, clientY: 60)',
'touchmove: Touch(id: 0, clientX: 61, clientY: 60),Touch(id: 1, clientX: 59, clientY: 60)',
'touchend: ',
]);
});