diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts index 21fcca69a4..c3d6e296e5 100644 --- a/packages/playwright-core/src/server/injected/injectedScript.ts +++ b/packages/playwright-core/src/server/injected/injectedScript.ts @@ -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; diff --git a/tests/library/locator-dispatchevent-touch.spec.ts b/tests/library/locator-dispatchevent-touch.spec.ts new file mode 100644 index 0000000000..c811c847f0 --- /dev/null +++ b/tests/library/locator-dispatchevent-touch.spec.ts @@ -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(` +
+
inner
+
`); + 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: ', + ]); +});