Get puppeteer to produce a touch event - this also uncovered an error…

… where a subsequent click would be picked up as a touch (see `thisEventKey` change)
eoghanmurray · Jul 27, 2023 · 20ee07e · 20ee07e
1 parent 3c2d4bd
commit 20ee07e
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
@@ -242,6 +242,7 @@ function initMouseInteractionObserver({
         return;
       }
       let pointerType: PointerTypes | null = null;
+      let thisEventKey = eventKey;
       if ('pointerType' in event) {
         Object.keys(PointerTypes).forEach(
           (pointerKey: keyof typeof PointerTypes) => {
@@ -256,12 +257,12 @@ function initMouseInteractionObserver({
         if (pointerType === PointerTypes.Touch) {
           if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) {
             // we are actually listening on 'pointerdown'
-            eventKey = 'TouchStart';
+            thisEventKey = 'TouchStart';
           } else if (
             MouseInteractions[eventKey] === MouseInteractions.MouseUp
           ) {
             // we are actually listening on 'pointerup'
-            eventKey = 'TouchEnd';
+            thisEventKey = 'TouchEnd';
           }
         } else if (pointerType == PointerTypes.Pen) {
           // TODO: these will get incorrectly emitted as MouseDown/MouseUp
@@ -282,7 +283,7 @@ function initMouseInteractionObserver({
       const id = mirror.getId(target);
       const { clientX, clientY } = e;
       callbackWrapper(mouseInteractionCb)({
-        type: MouseInteractions[eventKey],
+        type: MouseInteractions[thisEventKey],
         id,
         x: clientX,
         y: clientY,

diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap
@@ -1551,6 +1551,33 @@ exports[`record integration tests can record clicks 1`] = `
       \\"pointerType\\": 0
     }
   },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 7,
+      \\"id\\": 18,
+      \\"pointerType\\": 2
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 9,
+      \\"id\\": 18,
+      \\"pointerType\\": 2
+    }
+  },
+  {
+    \\"type\\": 3,
+    \\"data\\": {
+      \\"source\\": 2,
+      \\"type\\": 2,
+      \\"id\\": 18,
+      \\"pointerType\\": 2
+    }
+  },
   {
     \\"type\\": 3,
     \\"data\\": {

diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts
@@ -67,6 +67,18 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'link.html'));
     await page.click('span');
+
+    // also tap on the span
+    const span = await page.waitForSelector('span');
+    const center = await page.evaluate((el) => {
+      const { x, y, width, height } = el.getBoundingClientRect();
+      return {
+        x: Math.round(x + width / 2),
+        y: Math.round(y + height / 2),
+      };
+    }, span);
+    await page.touchscreen.tap(center.x, center.y);
+
     await page.click('a');
 
     const snapshots = await page.evaluate('window.snapshots');