Chore: Make tests less flakey & upgrade puppeteer to rrweb-snapshot test suite to run (#1084)

* Upgrade puppeteer to 17.1.3 in rrweb-snapshot

* Apply formatting changes

* Add ?

* Make tests less flakey

* Make attribute-setting more explicit

* Make test less flakey

* Make test less flakey

* Upgrade puppeteer for rrdom

* Use wait for request animation frame instead of timeout

* Force append to happen in second event

* Wait till iframe was loaded (now 100ms)

* Round the currentTime to 1 decimal place

packages/rrweb/test/html/frame2.html

@@ -13,6 +13,6 @@
     iframe5.id = 'five';
     setTimeout(() => {
       document.body.appendChild(iframe5);
-    }, 10);
+    }, 100);
   </script>
 </html>

packages/rrweb/test/integration.test.ts

@@ -672,7 +672,7 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'frame2.html'));
 
-    await page.waitForTimeout(10); // wait till frame was added to dom
+    await page.waitForSelector('iframe'); // wait for iframe to get added
     await waitForRAF(page); // wait till browser loaded contents of frame
 
     await page.evaluate(() => {

packages/rrweb/test/replayer.test.ts

@@ -798,8 +798,23 @@ describe('replayer', function () {
     events = ${JSON.stringify(adoptedStyleSheetModification)};
     const { Replayer } = rrweb;
     var replayer = new Replayer(events,{showDebug:true});
-    replayer.play();
-  `);
+    replayer.pause(0);
+
+    async function playTill(offsetTime) {
+      replayer.play();
+      return new Promise((resolve) => {
+        const checkTime = () => {
+          if (replayer.getCurrentTime() >= offsetTime) {
+            replayer.pause();
+            resolve(undefined);
+          } else {
+            requestAnimationFrame(checkTime);
+          }
+        };
+        checkTime();
+      });
+    }`);
+
     const iframe = await page.$('iframe');
     const contentDocument = await iframe!.contentFrame()!;
 
@@ -916,19 +931,19 @@ describe('replayer', function () {
       ).toBeTruthy();
     };
 
-    await page.waitForTimeout(235);
+    await page.evaluate(`playTill(250)`);
     await check250ms();
 
-    await page.waitForTimeout(50);
+    await page.evaluate(`playTill(300)`);
     await check300ms();
 
-    await page.waitForTimeout(100);
+    await page.evaluate(`playTill(400)`);
     await check400ms();
 
-    await page.waitForTimeout(100);
+    await page.evaluate(`playTill(500)`);
     await check500ms();
 
-    await page.waitForTimeout(100);
+    await page.evaluate(`playTill(600)`);
     await check600ms();
 
     // To test the correctness of replaying adopted stylesheet mutation events in the fast-forward mode.

packages/rrweb/test/utils.ts

@@ -185,6 +185,14 @@ function stringifySnapshots(snapshots: eventWithTime[]): string {
               }
             }
           });
+        } else if (
+          s.type === EventType.IncrementalSnapshot &&
+          s.data.source === IncrementalSource.MediaInteraction
+        ) {
+          // round the currentTime to 1 decimal place
+          if (s.data.currentTime) {
+            s.data.currentTime = Math.round(s.data.currentTime * 10) / 10;
+          }
         }
         delete (s as Optional<eventWithTime, 'timestamp'>).timestamp;
         return s as event;