ref(tests): Update replay integration tests to avoid flakes. (#9025)

Resolves: #8975

Refactored most flaky replay tests to `Promise.all` pattern to reduce
flakiness.

Author: onurtemizkan

packages/browser-integration-tests/suites/replay/bufferMode/test.ts

@@ -84,12 +84,13 @@ sentryTest(
     await reqErrorPromise;
     expect(callsToSentry).toEqual(2);
 
-    await page.evaluate(async () => {
-      const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
-      await replayIntegration.flush();
-    });
-
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([
+      reqPromise0,
+      page.evaluate(async () => {
+        const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
+        await replayIntegration.flush();
+      }),
+    ]);
 
     // 2 errors, 1 flush
     await reqErrorPromise;
@@ -226,12 +227,13 @@ sentryTest(
     await reqErrorPromise;
     expect(callsToSentry).toEqual(2);
 
-    await page.evaluate(async () => {
-      const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
-      await replayIntegration.flush({ continueRecording: false });
-    });
-
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([
+      reqPromise0,
+      page.evaluate(async () => {
+        const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay;
+        await replayIntegration.flush({ continueRecording: false });
+      }),
+    ]);
 
     // 2 errors, 1 flush
     await reqErrorPromise;
@@ -346,9 +348,12 @@ sentryTest(
 
     // Error sample rate is now at 1.0, this error should create a replay
     const reqErrorPromise1 = waitForErrorRequest(page);
-    await page.click('#error2');
-    // 1 unsampled error, 1 sampled error -> 1 flush
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([
+      // 1 unsampled error, 1 sampled error -> 1 flush
+      reqPromise0,
+      page.click('#error2'),
+    ]);
+
     const reqError1 = await reqErrorPromise1;
     const errorEvent1 = envelopeRequestParser(reqError1);
     expect(callsToSentry).toEqual(3);

packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts

@@ -10,8 +10,6 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
     sentryTest.skip();
   }
 
-  const reqPromise0 = waitForReplayRequest(page, 0);
-
   await page.route('https://dsn.ingest.sentry.io/**/*', route => {
     return route.fulfill({
       status: 200,
@@ -20,10 +18,11 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
     });
   });
 
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
-  await page.goto(url);
-  await reqPromise0;
+  await Promise.all([page.goto(url), reqPromise0]);
 
   const reqPromise1 = waitForReplayRequest(
     page,
@@ -38,11 +37,10 @@ sentryTest('should capture console messages in replay', async ({ getLocalTestPat
   await page.click('[data-log]');
 
   // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
-  await page.click('[data-log]');
-
+  const [req1] = await Promise.all([reqPromise1, page.click('[data-log]')]);
   await forceFlushReplay();
 
-  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+  const { breadcrumbs } = getCustomRecordingEvents(req1);
 
   expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
     expect.arrayContaining([
@@ -65,8 +63,6 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     sentryTest.skip();
   }
 
-  const reqPromise0 = waitForReplayRequest(page, 0);
-
   await page.route('https://dsn.ingest.sentry.io/**/*', route => {
     return route.fulfill({
       status: 200,
@@ -75,10 +71,11 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     });
   });
 
+  const reqPromise0 = waitForReplayRequest(page, 0);
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
-  await page.goto(url);
-  await reqPromise0;
+  await Promise.all([page.goto(url), reqPromise0]);
 
   const reqPromise1 = waitForReplayRequest(
     page,
@@ -90,14 +87,10 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath,
     5_000,
   );
 
-  await page.click('[data-log-large]');
-
-  // Sometimes this doesn't seem to trigger, so we trigger it twice to be sure...
-  await page.click('[data-log-large]');
-
+  const [req1] = await Promise.all([reqPromise1, page.click('[data-log-large]')]);
   await forceFlushReplay();
 
-  const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1);
+  const { breadcrumbs } = getCustomRecordingEvents(req1);
 
   expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual(
     expect.arrayContaining([

packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts

@@ -50,26 +50,25 @@ sentryTest(
 
     const url = await getLocalTestPath({ testDir: __dirname });
 
-    await page.goto(url);
-    await page.click('#go-background');
-    await new Promise(resolve => setTimeout(resolve, 1000));
+    await Promise.all([
+      page.goto(url),
+      page.click('#go-background'),
+      new Promise(resolve => setTimeout(resolve, 1000)),
+    ]);
 
     expect(callsToSentry).toEqual(0);
 
-    await page.click('#error');
-    const req0 = await reqPromise0;
+    const [req0] = await Promise.all([reqPromise0, page.click('#error')]);
 
     expect(callsToSentry).toEqual(2); // 1 error, 1 replay event
 
-    await page.click('#go-background');
-    const req1 = await reqPromise1;
-    await reqErrorPromise;
+    const [req1] = await Promise.all([reqPromise1, page.click('#go-background'), reqErrorPromise]);
 
     expect(callsToSentry).toEqual(3); // 1 error, 2 replay events
 
     await page.click('#log');
-    await page.click('#go-background');
-    const req2 = await reqPromise2;
+
+    const [req2] = await Promise.all([reqPromise2, page.click('#go-background')]);
 
     const event0 = getReplayEvent(req0);
     const content0 = getReplayRecordingContent(req0);

packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts

@@ -10,8 +10,6 @@ sentryTest(
       sentryTest.skip();
     }
 
-    const reqPromise0 = waitForReplayRequest(page, 0);
-
     await page.route('https://dsn.ingest.sentry.io/**/*', route => {
       return route.fulfill({
         status: 200,
@@ -22,26 +20,17 @@ sentryTest(
 
     const url = await getLocalTestPath({ testDir: __dirname });
 
-    await page.goto(url);
-    const res0 = await reqPromise0;
-
-    const reqPromise1 = waitForReplayRequest(page);
-
-    void page.click('#button-add');
+    const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]);
     await forceFlushReplay();
-    const res1 = await reqPromise1;
 
-    const reqPromise2 = waitForReplayRequest(page);
-
-    void page.click('#button-modify');
+    const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add')]);
     await forceFlushReplay();
-    const res2 = await reqPromise2;
 
-    const reqPromise3 = waitForReplayRequest(page);
+    const [res2] = await Promise.all([waitForReplayRequest(page), page.click('#button-modify')]);
+    await forceFlushReplay();
 
-    void page.click('#button-remove');
+    const [res3] = await Promise.all([waitForReplayRequest(page), page.click('#button-remove')]);
     await forceFlushReplay();
-    const res3 = await reqPromise3;
 
     const replayData0 = getReplayRecordingContent(res0);
     const replayData1 = getReplayRecordingContent(res1);

packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts

@@ -15,8 +15,6 @@ sentryTest(
       sentryTest.skip();
     }
 
-    const reqPromise0 = waitForReplayRequest(page, 0);
-
     await page.route('https://dsn.ingest.sentry.io/**/*', route => {
       return route.fulfill({
         status: 200,
@@ -25,23 +23,24 @@ sentryTest(
       });
     });
 
+    const reqPromise0 = waitForReplayRequest(page, 0);
+
     const url = await getLocalTestPath({ testDir: __dirname });
 
-    await page.goto(url);
-    const res0 = await reqPromise0;
+    const [res0] = await Promise.all([reqPromise0, page.goto(url)]);
+    await forceFlushReplay();
 
     const reqPromise1 = waitForReplayRequest(page);
 
-    void page.click('#button-add');
+    const [res1] = await Promise.all([reqPromise1, page.click('#button-add')]);
     await forceFlushReplay();
-    const res1 = await reqPromise1;
 
     // replay should be stopped due to mutation limit
     let replay = await getReplaySnapshot(page);
     expect(replay.session).toBe(undefined);
     expect(replay._isEnabled).toBe(false);
 
-    void page.click('#button-modify');
+    await page.click('#button-modify');
     await forceFlushReplay();
 
     await page.click('#button-remove');

packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts

@@ -11,9 +11,6 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa
     sentryTest.skip();
   }
 
-  const reqPromise0 = waitForReplayRequest(page, 0);
-  const reqPromise1 = waitForReplayRequest(page, 1);
-
   await page.route('https://dsn.ingest.sentry.io/**/*', route => {
     return route.fulfill({
       status: 200,
@@ -22,33 +19,42 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa
     });
   });
 
+  const reqPromise0 = waitForReplayRequest(page, 0);
+  const reqPromise1 = waitForReplayRequest(page, 1);
+
   const url = await getLocalTestPath({ testDir: __dirname });
 
   await page.goto(url);
 
   await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2));
 
-  await page.reload();
-  await page.click('#button1');
+  await Promise.all([page.reload(), page.click('#button1')]);
 
   // After the second reload, we should have a new session (because we exceeded max age)
   const reqPromise3 = waitForReplayRequest(page, 0);
 
   await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2 + 100));
 
-  void page.click('#button1');
-  await page.evaluate(`Object.defineProperty(document, 'visibilityState', {
+  const [req0, req1] = await Promise.all([
+    reqPromise0,
+    reqPromise1,
+    page.click('#button1'),
+    page.evaluate(
+      `Object.defineProperty(document, 'visibilityState', {
     configurable: true,
     get: function () {
       return 'hidden';
     },
   });
-  document.dispatchEvent(new Event('visibilitychange'));`);
 
-  const replayEvent0 = getReplayEvent(await reqPromise0);
+  document.dispatchEvent(new Event('visibilitychange'));`,
+    ),
+  ]);
+
+  const replayEvent0 = getReplayEvent(req0);
   expect(replayEvent0).toEqual(getExpectedReplayEvent({}));
 
-  const replayEvent1 = getReplayEvent(await reqPromise1);
+  const replayEvent1 = getReplayEvent(req1);
   expect(replayEvent1).toEqual(
     getExpectedReplayEvent({
       segment_id: 1,