From 8b45ea6f2f1c176d63909a2c4199008177f687ae Mon Sep 17 00:00:00 2001
From: Yury Semikhatsky <yurys@chromium.org>
Date: Fri, 3 Jan 2025 12:16:01 -0800
Subject: [PATCH] chore: properly initialize Touch arguments in TouchEvent
 (#34200)

---
 .../src/server/injected/injectedScript.ts     | 13 +++-
 .../locator-dispatchevent-touch.spec.ts       | 59 +++++++++++++++++++
 2 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 tests/library/locator-dispatchevent-touch.spec.ts

diff --git a/packages/playwright-core/src/server/injected/injectedScript.ts b/packages/playwright-core/src/server/injected/injectedScript.ts
index 21fcca69a4c2e..c3d6e296e5d14 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 0000000000000..c811c847f096f
--- /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(`
+      <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: ',
+  ]);
+});