test(browser-integration): Tweak promises a bit to reduce flakes in replay tests (#9477)

...maybe


Based on what we did in #9025

Author: billyvg

packages/browser-integration-tests/suites/integrations/Breadcrumbs/dom/click/test.ts

@@ -33,9 +33,7 @@ sentryTest('captures Breadcrumb for clicks & debounces them for a second', async
   await page.waitForTimeout(1000);
   await page.click('#button2');
 
-  await page.evaluate('Sentry.captureException("test exception")');
-
-  const eventData = await promise;
+  const [eventData] = await Promise.all([promise, page.evaluate('Sentry.captureException("test exception")')]);
 
   expect(eventData.exception?.values).toHaveLength(1);
 

packages/browser-integration-tests/suites/replay/extendNetworkBreadcrumbs/xhr/captureRequestHeaders/test.ts

@@ -54,7 +54,7 @@ sentryTest('captures request headers', async ({ getLocalTestPath, page, browserN
     /* eslint-enable */
   });
 
-  const request = await requestPromise;
+  const [request, replayReq1] = await Promise.all([requestPromise, replayRequestPromise1]);
   const eventData = envelopeRequestParser(request);
 
   expect(eventData.exception?.values).toHaveLength(1);
@@ -71,7 +71,6 @@ sentryTest('captures request headers', async ({ getLocalTestPath, page, browserN
     },
   });
 
-  const replayReq1 = await replayRequestPromise1;
   const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
   expect(performanceSpans1.filter(span => span.op === 'resource.xhr')).toEqual([
     {
@@ -142,7 +141,8 @@ sentryTest(
       /* eslint-enable */
     });
 
-    const request = await requestPromise;
+    const [request, replayReq1] = await Promise.all([requestPromise, replayRequestPromise1]);
+
     const eventData = envelopeRequestParser(request);
 
     expect(eventData.exception?.values).toHaveLength(1);
@@ -159,7 +159,6 @@ sentryTest(
       },
     });
 
-    const replayReq1 = await replayRequestPromise1;
     const { performanceSpans: performanceSpans1 } = getCustomRecordingEvents(replayReq1);
     expect(performanceSpans1.filter(span => span.op === 'resource.xhr')).toEqual([
       {

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

@@ -57,22 +57,24 @@ sentryTest(
     const url = await getLocalTestPath({ testDir: __dirname });
 
     await page.goto(url);
-    const fullSnapshot = getFullRecordingSnapshots(await reqPromise0);
+
+    const text = 'test';
+
+    const [req0] = await Promise.all([reqPromise0, page.locator('#input').fill(text)]);
+    await forceFlushReplay();
+
+    const fullSnapshot = getFullRecordingSnapshots(req0);
     const stringifiedSnapshot = JSON.stringify(fullSnapshot);
     expect(stringifiedSnapshot.includes('Submit form')).toBe(false);
     expect(stringifiedSnapshot.includes('Unmasked button')).toBe(true);
 
-    const text = 'test';
-
-    await page.locator('#input').fill(text);
+    const [req1] = await Promise.all([reqPromise1, page.locator('#input-unmasked').fill(text)]);
     await forceFlushReplay();
 
-    const snapshots = getIncrementalRecordingSnapshots(await reqPromise1).filter(isInputMutation);
+    const snapshots = getIncrementalRecordingSnapshots(req1).filter(isInputMutation);
     const lastSnapshot = snapshots[snapshots.length - 1];
     expect(lastSnapshot.data.text).toBe('*'.repeat(text.length));
 
-    await page.locator('#input-unmasked').fill(text);
-    await forceFlushReplay();
     const snapshots2 = getIncrementalRecordingSnapshots(await reqPromise2).filter(isInputMutation);
     const lastSnapshot2 = snapshots2[snapshots2.length - 1];
     expect(lastSnapshot2.data.text).toBe(text);
@@ -120,18 +122,18 @@ sentryTest(
 
     await page.goto(url);
 
-    await reqPromise0;
-
     const text = 'test';
 
-    await page.locator('#textarea').fill(text);
+    await Promise.all([reqPromise0, page.locator('#textarea').fill(text)]);
+    await forceFlushReplay();
+
+    const [req1] = await Promise.all([reqPromise1, page.locator('#textarea-unmasked').fill(text)]);
     await forceFlushReplay();
-    const snapshots = getIncrementalRecordingSnapshots(await reqPromise1).filter(isInputMutation);
+
+    const snapshots = getIncrementalRecordingSnapshots(req1).filter(isInputMutation);
     const lastSnapshot = snapshots[snapshots.length - 1];
     expect(lastSnapshot.data.text).toBe('*'.repeat(text.length));
 
-    await page.locator('#textarea-unmasked').fill(text);
-    await forceFlushReplay();
     const snapshots2 = getIncrementalRecordingSnapshots(await reqPromise2).filter(isInputMutation);
     const lastSnapshot2 = snapshots2[snapshots2.length - 1];
     expect(lastSnapshot2.data.text).toBe(text);