chore: properly initialize Touch arguments in TouchEvent

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) => 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;

tests/page/page-dispatchevent.spec.ts

@@ -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: ',
+  ]);
+});