Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore: properly initialize Touch arguments in TouchEvent

Browse source
This commit is contained in:
Yury Semikhatsky 2025-01-02 16:13:36 -08:00
parent 04a3574f80
commit cfa64a8ad0
2 changed files with 49 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) => new Touch({ ...t, target: t.target ?? node }));
eventInit.targetTouches = eventInit.targetTouches?.map((t: any) => new Touch({ ...t, target: t.target ?? node }));
eventInit.changedTouches = eventInit.changedTouches?.map((t: any) => 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;

39
tests/page/page-dispatchevent.spec.ts
View file

@ -229,3 +229,42 @@ it('should throw if argument is from different frame', async ({ page, server })
.rejects.toThrow('JSHandles can be evaluated only in the context they were created!');
}
});
it('should support touch points in touch event arguments', async ({ page, server }) => {
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,
targeTouches: touches,
});
await inner.dispatchEvent('touchmove', {
touches,
changedTouches: touches,
targeTouches: touches,
});
await inner.dispatchEvent('touchend', {
touches: [],
changedTouches: touches,
targeTouches: [],
});
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: ',
]);
});