test: Make some replay tests less flaky

?? let's see if this makes sense...

Author: mydea

dev-packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/fetch/captureResponseSize/test.ts

@@ -3,9 +3,9 @@ import { expect } from '@playwright/test';
 import { sentryTest } from '../../../../../utils/fixtures';
 import { envelopeRequestParser, waitForErrorRequest } from '../../../../../utils/helpers';
 import {
-  getCustomRecordingEvents,
+  collectReplayRequests,
+  getReplayPerformanceSpans,
   shouldSkipReplayTest,
-  waitForReplayRequest,
 } from '../../../../../utils/replayHelpers';
 
 sentryTest('captures response size from Content-Length header if available', async ({ getLocalTestPath, page }) => {
@@ -35,7 +35,10 @@ sentryTest('captures response size from Content-Length header if available', asy
   });
 
   const requestPromise = waitForErrorRequest(page);
-  const replayRequestPromise1 = waitForReplayRequest(page, 0);
+
+  const replayRequestPromise = collectReplayRequests(page, recordingEvents => {
+    return getReplayPerformanceSpans(recordingEvents).some(span => span.op === 'resource.fetch');
+  });
 
   const url = await getLocalTestPath({ testDir: __dirname });
   await page.goto(url);
@@ -67,9 +70,8 @@ sentryTest('captures response size from Content-Length header if available', asy
     },
   });
 
-  const replayReq1 = await replayRequestPromise1;
-  const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
-  expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+  const { replayRecordingSnapshots } = await replayRequestPromise;
+  expect(getReplayPerformanceSpans(replayRecordingSnapshots).filter(span => span.op === 'resource.fetch')).toEqual([
     {
       data: {
         method: 'GET',
@@ -123,7 +125,10 @@ sentryTest('captures response size without Content-Length header', async ({ getL
   });
 
   const requestPromise = waitForErrorRequest(page);
-  const replayRequestPromise1 = waitForReplayRequest(page, 0);
+
+  const replayRequestPromise = collectReplayRequests(page, recordingEvents => {
+    return getReplayPerformanceSpans(recordingEvents).some(span => span.op === 'resource.fetch');
+  });
 
   const url = await getLocalTestPath({ testDir: __dirname });
   await page.goto(url);
@@ -155,9 +160,8 @@ sentryTest('captures response size without Content-Length header', async ({ getL
     },
   });
 
-  const replayReq1 = await replayRequestPromise1;
-  const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
-  expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+  const { replayRecordingSnapshots } = await replayRequestPromise;
+  expect(getReplayPerformanceSpans(replayRecordingSnapshots).filter(span => span.op === 'resource.fetch')).toEqual([
     {
       data: {
         method: 'GET',
@@ -208,7 +212,10 @@ sentryTest('captures response size from non-text response body', async ({ getLoc
   });
 
   const requestPromise = waitForErrorRequest(page);
-  const replayRequestPromise1 = waitForReplayRequest(page, 0);
+
+  const replayRequestPromise = collectReplayRequests(page, recordingEvents => {
+    return getReplayPerformanceSpans(recordingEvents).some(span => span.op === 'resource.fetch');
+  });
 
   const url = await getLocalTestPath({ testDir: __dirname });
   await page.goto(url);
@@ -241,9 +248,8 @@ sentryTest('captures response size from non-text response body', async ({ getLoc
     },
   });
 
-  const replayReq1 = await replayRequestPromise1;
-  const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
-  expect(performanceSpans1.filter(span => span.op === 'resource.fetch')).toEqual([
+  const { replayRecordingSnapshots } = await replayRequestPromise;
+  expect(getReplayPerformanceSpans(replayRecordingSnapshots).filter(span => span.op === 'resource.fetch')).toEqual([
     {
       data: {
         method: 'POST',

dev-packages/browser-integration-tests/utils/replayHelpers.ts

@@ -104,6 +104,49 @@ export function waitForReplayRequest(
   );
 }
 
+/**
+ * Collect replay requests until a given callback is satisfied.
+ * This can be used to ensure we wait correctly,
+ *  when we don't know in which request a certain replay event/snapshot will be.
+ */
+export function collectReplayRequests(
+  page: Page,
+  callback: (replayRecordingEvents: RecordingSnapshot[], replayEvents: ReplayEvent[]) => boolean,
+): Promise<{ replayEvents: ReplayEvent[]; replayRecordingSnapshots: RecordingSnapshot[] }> {
+  const replayEvents: ReplayEvent[] = [];
+  const replayRecordingSnapshots: RecordingSnapshot[] = [];
+
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  const promise = page.waitForResponse(res => {
+    const req = res.request();
+
+    const event = getReplayEventFromRequest(req);
+
+    if (!event) {
+      return false;
+    }
+
+    replayEvents.push(event);
+    replayRecordingSnapshots.push(...getDecompressedRecordingEvents(req));
+
+    try {
+      return callback(replayRecordingSnapshots, replayEvents);
+    } catch {
+      return false;
+    }
+  });
+
+  const replayRequestPromise = async (): Promise<{
+    replayEvents: ReplayEvent[];
+    replayRecordingSnapshots: RecordingSnapshot[];
+  }> => {
+    await promise;
+    return { replayEvents, replayRecordingSnapshots };
+  };
+
+  return replayRequestPromise();
+}
+
 /**
  * Wait until a callback returns true, collecting all replay responses along the way.
  * This can be useful when you don't know if stuff will be in one or multiple replay requests.
@@ -246,14 +289,14 @@ function getAllCustomRrwebRecordingEvents(recordingEvents: RecordingEvent[]): Cu
   return recordingEvents.filter(isCustomSnapshot).map(event => event.data);
 }
 
-function getReplayBreadcrumbs(recordingEvents: RecordingSnapshot[], category?: string): Breadcrumb[] {
+export function getReplayBreadcrumbs(recordingEvents: RecordingSnapshot[], category?: string): Breadcrumb[] {
   return getAllCustomRrwebRecordingEvents(recordingEvents)
     .filter(data => data.tag === 'breadcrumb')
     .map(data => data.payload)
     .filter(payload => !category || payload.category === category);
 }
 
-function getReplayPerformanceSpans(recordingEvents: RecordingEvent[]): PerformanceSpan[] {
+export function getReplayPerformanceSpans(recordingEvents: RecordingSnapshot[]): PerformanceSpan[] {
   return getAllCustomRrwebRecordingEvents(recordingEvents)
     .filter(data => data.tag === 'performanceSpan')
     .map(data => data.payload) as PerformanceSpan[];