Fix replay event snapshots

Allow to normalize number attributes to make it a bit less flaky

Author: mydea

packages/integration-tests/suites/replay/privacyBlock/test.ts

@@ -1,10 +1,12 @@
 import { expect } from '@playwright/test';
-import { EventType } from '@sentry-internal/rrweb';
-import type { RecordingEvent } from '@sentry/replay/build/npm/types/types';
 
 import { sentryTest } from '../../../utils/fixtures';
-import { envelopeRequestParser } from '../../../utils/helpers';
-import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+import {
+  getFullRecordingSnapshots,
+  normalize,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../utils/replayHelpers';
 
 sentryTest('should allow to manually block elements', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -24,8 +26,10 @@ sentryTest('should allow to manually block elements', async ({ getLocalTestPath,
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.goto(url);
-  const replayPayload = envelopeRequestParser<RecordingEvent[]>(await reqPromise0, 5);
-  const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot);
+  const snapshots = getFullRecordingSnapshots(await reqPromise0);
+  expect(snapshots.length).toEqual(1);
 
-  expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json');
+  const stringifiedSnapshot = normalize(snapshots[0], { normalizeNumberAttributes: ['rr_width', 'rr_height'] });
+
+  expect(stringifiedSnapshot).toMatchSnapshot('privacy.json');
 });

packages/integration-tests/suites/replay/privacyBlock/test.ts-snapshots/privacy-firefox.json

@@ -288,7 +288,7 @@
                 "attributes": {
                   "class": "nested-hide",
                   "rr_width": "1264px",
-                  "rr_height": "19.199996948242188px"
+                  "rr_height": "19px"
                 },
                 "childNodes": [],
                 "id": 40

packages/integration-tests/suites/replay/privacyDefault/test.ts

@@ -1,10 +1,12 @@
 import { expect } from '@playwright/test';
-import { EventType } from '@sentry-internal/rrweb';
-import type { RecordingEvent } from '@sentry/replay/build/npm/types/types';
 
 import { sentryTest } from '../../../utils/fixtures';
-import { envelopeRequestParser } from '../../../utils/helpers';
-import { shouldSkipReplayTest, waitForReplayRequest } from '../../../utils/replayHelpers';
+import {
+  getFullRecordingSnapshots,
+  normalize,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../utils/replayHelpers';
 
 sentryTest('should have the correct default privacy settings', async ({ getLocalTestPath, page }) => {
   if (shouldSkipReplayTest()) {
@@ -24,8 +26,11 @@ sentryTest('should have the correct default privacy settings', async ({ getLocal
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.goto(url);
-  const replayPayload = envelopeRequestParser<RecordingEvent[]>(await reqPromise0, 5);
-  const checkoutEvent = replayPayload.find(({ type }) => type === EventType.FullSnapshot);
 
-  expect(JSON.stringify(checkoutEvent?.data, null, 2)).toMatchSnapshot('privacy.json');
+  const snapshots = getFullRecordingSnapshots(await reqPromise0);
+  expect(snapshots.length).toEqual(1);
+
+  const stringifiedSnapshot = normalize(snapshots[0], { normalizeNumberAttributes: ['rr_width', 'rr_height'] });
+
+  expect(stringifiedSnapshot).toMatchSnapshot('privacy.json');
 });

packages/integration-tests/utils/replayHelpers.ts

@@ -133,7 +133,7 @@ export function getFullRecordingSnapshots(replayRequest: Request): RecordingSnap
   return events.filter(event => event.type === 2).map(event => event.data as RecordingSnapshot);
 }
 
-function getincrementalRecordingSnapshots(replayRequest: Request): RecordingSnapshot[] {
+function getIncrementalRecordingSnapshots(replayRequest: Request): RecordingSnapshot[] {
   const events = getDecompressedRecordingEvents(replayRequest) as RecordingEvent[];
   return events.filter(event => event.type === 3).map(event => event.data as RecordingSnapshot);
 }
@@ -144,7 +144,7 @@ function getDecompressedRecordingEvents(replayRequest: Request): RecordingEvent[
 
 export function getReplayRecordingContent(replayRequest: Request): RecordingContent {
   const fullSnapshots = getFullRecordingSnapshots(replayRequest);
-  const incrementalSnapshots = getincrementalRecordingSnapshots(replayRequest);
+  const incrementalSnapshots = getIncrementalRecordingSnapshots(replayRequest);
   const customEvents = getCustomRecordingEvents(replayRequest);
 
   return { fullSnapshots, incrementalSnapshots, ...customEvents };
@@ -216,10 +216,29 @@ export function shouldSkipReplayTest(): boolean {
  * 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 {
+export function normalize(
+  obj: unknown,
+  { normalizeNumberAttributes }: { normalizeNumberAttributes?: string[] } = {},
+): string {
   const rawString = JSON.stringify(obj, null, 2);
-  const normalizedString = rawString
+  let normalizedString = rawString
     .replace(/"file:\/\/.+(\/.*\.html)"/gm, '"$1"')
     .replace(/"timeOffset":\s*-?\d+/gm, '"timeOffset": [timeOffset]');
+
+  if (normalizeNumberAttributes?.length) {
+    // We look for: "attr": "123px", "123", "123%", "123em", "123rem"
+    const regex = new RegExp(
+      `"(${normalizeNumberAttributes
+        .map(attr => `(?:${attr})`)
+        .join('|')})":\\s*"([\\d\\.]+)((?:px)|%|(?:em)(?:rem))?"`,
+      'gm',
+    );
+
+    normalizedString = normalizedString.replace(regex, (_, attr, num, unit) => {
+      // Remove floating points here, to ensure this is a bit less flaky
+      return `"${attr}": "${parseInt(num, 10)}${unit || ''}"`;
+    });
+  }
+
   return normalizedString;
 }