fix: update touchscreen tests (#11960)

puppeteer · Feb 21, 2024 · 013bd0b · 013bd0b
1 parent 70ad3b2
commit 013bd0b
Show file tree

Hide file tree

Showing 4 changed files with 265 additions and 149 deletions.
diff --git a/packages/puppeteer-core/src/cdp/Input.ts b/packages/puppeteer-core/src/cdp/Input.ts
@@ -10,16 +10,16 @@ import type {CDPSession} from '../api/CDPSession.js';
 import type {Point} from '../api/ElementHandle.js';
 import {
   Keyboard,
-  type KeyDownOptions,
-  type KeyPressOptions,
   Mouse,
   MouseButton,
+  Touchscreen,
+  type KeyDownOptions,
+  type KeyPressOptions,
+  type KeyboardTypeOptions,
   type MouseClickOptions,
   type MouseMoveOptions,
   type MouseOptions,
   type MouseWheelOptions,
-  Touchscreen,
-  type KeyboardTypeOptions,
 } from '../api/Input.js';
 import {
   _keyDefinitions,
@@ -573,6 +573,7 @@ export class CdpTouchscreen extends Touchscreen {
           y: Math.round(y),
           radiusX: 0.5,
           radiusY: 0.5,
+          force: 0.5,
         },
       ],
       modifiers: this.#keyboard._modifiers,
@@ -588,6 +589,7 @@ export class CdpTouchscreen extends Touchscreen {
           y: Math.round(y),
           radiusX: 0.5,
           radiusY: 0.5,
+          force: 0.5,
         },
       ],
       modifiers: this.#keyboard._modifiers,

diff --git a/test/TestExpectations.json b/test/TestExpectations.json
@@ -3287,12 +3287,6 @@
     "parameters": ["chrome", "webDriverBiDi"],
     "expectations": ["FAIL"]
   },
-  {
-    "testIdPattern": "[touchscreen.spec] Touchscreen Touchscreen.prototype.touchMove should work",
-    "platforms": ["darwin", "linux", "win32"],
-    "parameters": ["cdp", "chrome"],
-    "expectations": ["FAIL"]
-  },
   {
     "testIdPattern": "[touchscreen.spec] Touchscreen Touchscreen.prototype.touchMove should work",
     "platforms": ["darwin", "linux", "win32"],

diff --git a/test/assets/input/touchscreen.html b/test/assets/input/touchscreen.html
@@ -4,7 +4,7 @@
     <title>Touch test</title>
   </head>
 
-  <body>
+  <body style="touch-action: none">
     <style>
       button {
         box-sizing: border-box;
@@ -20,103 +20,53 @@
     <button>Click target</button>
     <script>
       var allEvents = [];
-      globalThis.addEventListener(
-        "touchstart",
-        (event) => {
-          allEvents.push({
-            type: "touchstart",
-            touches: [...event.changedTouches].map((touch) => [
-              touch.clientX,
-              touch.clientY,
-              touch.radiusX,
-              touch.radiusY,
-            ]),
-          });
-        },
-        true,
-      );
-      globalThis.addEventListener(
-        "touchmove",
-        (event) => {
-          allEvents.push({
-            type: "touchmove",
-            touches: [...event.changedTouches].map((touch) => [
-              touch.clientX,
-              touch.clientY,
-              touch.radiusX,
-              touch.radiusY,
-            ]),
-          });
-        },
-        true,
-      );
-      globalThis.addEventListener(
-        "touchend",
-        (event) => {
-          allEvents.push({
-            type: "touchend",
-            touches: [...event.changedTouches].map((touch) => [
-              touch.clientX,
-              touch.clientY,
-              touch.radiusX,
-              touch.radiusY,
-            ])
-          });
-        },
-        true,
-      );
-      globalThis.addEventListener(
-        "pointerdown",
-        (event) => {
-          allEvents.push({
-            type: "pointerdown",
-            x: event.x,
-            y: event.y,
-            width: event.width,
-            height: event.height,
-          });
-        },
-        true,
-      );
-      globalThis.addEventListener(
-        "pointermove",
-        (event) => {
-          allEvents.push({
-            type: "pointermove",
-            x: event.x,
-            y: event.y,
-            width: event.width,
-            height: event.height,
-          });
-        },
-        true,
-      );
-      globalThis.addEventListener(
-        "pointerup",
-        (event) => {
-          allEvents.push({
-            type: "pointerup",
-            x: event.x,
-            y: event.y,
-            width: event.width,
-            height: event.height,
-          });
-        },
-        true,
-      );
-      globalThis.addEventListener(
-        "click",
-        (event) => {
-          allEvents.push({
-            type: "click",
-            x: event.x,
-            y: event.y,
-            width: event.width,
-            height: event.height,
-          });
-        },
-        true,
-      );
+      for (const name of ["touchstart", "touchmove", "touchend"]) {
+        globalThis.addEventListener(
+          name,
+          (event) => {
+            allEvents.push({
+              type: name,
+              changedTouches: [...event.changedTouches].map((touch) => ({
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+                radiusX: touch.radiusX,
+                radiusY: touch.radiusY,
+                force: touch.force,
+              })),
+              activeTouches: [...event.touches].map((touch) => ({
+                clientX: touch.clientX,
+                clientY: touch.clientY,
+                radiusX: touch.radiusX,
+                radiusY: touch.radiusY,
+                force: touch.force,
+              })),
+            });
+          },
+          true,
+        );
+      }
+      for (const name of ['pointerdown', 'pointermove', 'pointerup', 'click']) {
+        globalThis.addEventListener(
+          name,
+          (event) => {
+            allEvents.push({
+              type: name,
+              x: event.x,
+              y: event.y,
+              width: event.width,
+              height: event.height,
+              altitudeAngle: event.altitudeAngle,
+              azimuthAngle: event.azimuthAngle,
+              pressure: event.pressure,
+              pointerType: event.pointerType,
+              twist: event.twist,
+              tiltX: event.tiltX,
+              tiltY: event.tiltY,
+            });
+          },
+          true,
+        );
+      }
     </script>
   </body>
 </html>