test(replay): Normalize time offset in DOM snapshots (#7219)

Lms24 · web-flow · commit aa1d4e569b35 · 2023-02-17T14:53:24.000+01:00
Normalize timeOffset entry in snapshots to avoid flakiness
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 18,
         "id": 9,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental-chromium b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-1-snap-incremental-chromium
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 18,
         "id": 9,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 18,
         "id": 9,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental-chromium b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-3-snap-incremental-chromium
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 18,
         "id": 9,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 90,
         "id": 12,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental-chromium b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-5-snap-incremental-chromium
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 90,
         "id": 12,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental
@@ -6,7 +6,7 @@
         "x": 157,
         "y": 90,
         "id": 15,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental-chromium b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-6-snap-incremental-chromium
@@ -6,7 +6,7 @@
         "x": 157,
         "y": 90,
         "id": 15,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-7-snap-incremental b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-7-snap-incremental
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 90,
         "id": 12,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-7-snap-incremental-chromium b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-7-snap-incremental-chromium
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 90,
         "id": 12,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-9-snap-incremental b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-9-snap-incremental
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 18,
         "id": 9,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-9-snap-incremental-chromium b/packages/integration-tests/suites/replay/multiple-pages/test.ts-snapshots/seg-9-snap-incremental-chromium
@@ -6,7 +6,7 @@
         "x": 41,
         "y": 18,
         "id": 9,
-        "timeOffset": 0
+        "timeOffset": [timeOffset]
       }
     ]
   },
diff --git a/packages/integration-tests/utils/replayHelpers.ts b/packages/integration-tests/utils/replayHelpers.ts
@@ -214,9 +214,12 @@ export function shouldSkipReplayTest(): boolean {
  * Takes a replay recording payload and returns a normalized string representation.
  * This is necessary because the DOM snapshots contain absolute paths to other HTML
  * files which break the tests on different machines.
+ * Also, we need to normalize any time offsets as they can vary and cause flakes.
  */
 export function normalize(obj: unknown): string {
   const rawString = JSON.stringify(obj, null, 2);
-  const normalizedString = rawString.replace(/"file:\/\/.+(\/.*\.html)"/g, '"$1"');
+  const normalizedString = rawString
+    .replace(/"file:\/\/.+(\/.*\.html)"/gm, '"$1"')
+    .replace(/"timeOffset":\s*-?\d+/gm, '"timeOffset": [timeOffset]');
   return normalizedString;
 }

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`"x": 41,`
`7`	`7`	`"y": 18,`
`8`	`8`	`"id": 9,`
`9`		`- "timeOffset": 0`
	`9`	`+ "timeOffset": [timeOffset]`
`10`	`10`	`}`
`11`	`11`	`]`
`12`	`12`	`},`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`"x": 41,`
`7`	`7`	`"y": 90,`
`8`	`8`	`"id": 12,`
`9`		`- "timeOffset": 0`
	`9`	`+ "timeOffset": [timeOffset]`
`10`	`10`	`}`
`11`	`11`	`]`
`12`	`12`	`},`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`"x": 157,`
`7`	`7`	`"y": 90,`
`8`	`8`	`"id": 15,`
`9`		`- "timeOffset": 0`
	`9`	`+ "timeOffset": [timeOffset]`
`10`	`10`	`}`
`11`	`11`	`]`
`12`	`12`	`},`