From 6d4ad264ad3e38acd3204a9e3781eba5c3999546 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Thu, 14 Sep 2023 10:33:57 +0100 Subject: [PATCH 1/7] ref(tests): Update replay integration tests to avoid flakes. --- .../suites/replay/bufferMode/test.ts | 36 +++++++++++-------- .../suites/replay/captureConsoleLog/test.ts | 29 ++++++--------- .../suites/replay/errors/errorMode/test.ts | 19 +++++----- .../largeMutations/defaultOptions/test.ts | 19 ++++------ .../largeMutations/mutationLimit/test.ts | 17 ++++----- .../suites/replay/maxReplayDuration/test.ts | 26 ++++++++------ .../suites/replay/multiple-pages/test.ts | 36 +++++++++---------- .../suites/replay/requests/test.ts | 33 +++++++++-------- 8 files changed, 100 insertions(+), 115 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts index f049267a51c1..11a3ab1ea823 100644 --- a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts +++ b/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([ + await page.evaluate(async () => { + const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay; + await replayIntegration.flush(); + }), + reqPromise0, + ]); // 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([ + page.evaluate(async () => { + const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay; + await replayIntegration.flush({ continueRecording: false }); + }), + reqPromise0, + ]); // 2 errors, 1 flush await reqErrorPromise; @@ -346,9 +348,13 @@ 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([ + page.click('#error2'), + + // 1 unsampled error, 1 sampled error -> 1 flush + reqPromise0, + ]); + const reqError1 = await reqErrorPromise1; const errorEvent1 = envelopeRequestParser(reqError1); expect(callsToSentry).toEqual(3); diff --git a/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts b/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts index c0ceed092995..0343d6423217 100644 --- a/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts +++ b/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,9 @@ 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]'); - - await forceFlushReplay(); + const [, , req1] = await Promise.all([page.click('[data-log]'), forceFlushReplay(), reqPromise1]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual( expect.arrayContaining([ @@ -65,8 +62,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 +70,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 +86,9 @@ 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]'); - - await forceFlushReplay(); + const [, , req1] = await Promise.all([page.click('[data-log-large]'), forceFlushReplay(), reqPromise1]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs.filter(breadcrumb => breadcrumb.category === 'console')).toEqual( expect.arrayContaining([ diff --git a/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts b/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts index 15e9ab60dc3c..a83a622d739e 100644 --- a/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts +++ b/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([page.click('#error'), reqPromise0]); 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([page.click('#go-background'), reqPromise1, 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([page.click('#go-background'), reqPromise2]); const event0 = getReplayEvent(req0); const content0 = getReplayRecordingContent(req0); diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts b/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts index b7d0e558b844..1fa23aa00e34 100644 --- a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts +++ b/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, @@ -20,28 +18,23 @@ 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([page.goto(url), reqPromise0]); const reqPromise1 = waitForReplayRequest(page); - void page.click('#button-add'); - await forceFlushReplay(); - const res1 = await reqPromise1; + const [, , res1] = await Promise.all([page.click('#button-add'), forceFlushReplay(), reqPromise1]); const reqPromise2 = waitForReplayRequest(page); - void page.click('#button-modify'); - await forceFlushReplay(); - const res2 = await reqPromise2; + const [, , res2] = await Promise.all([page.click('#button-modify'), forceFlushReplay(), reqPromise2]); const reqPromise3 = waitForReplayRequest(page); - void page.click('#button-remove'); - await forceFlushReplay(); - const res3 = await reqPromise3; + const [, , res3] = await Promise.all([page.click('#button-remove'), forceFlushReplay(), reqPromise3]); const replayData0 = getReplayRecordingContent(res0); const replayData1 = getReplayRecordingContent(res1); diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts b/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts index eb144fa012ef..25d5f980762e 100644 --- a/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts +++ b/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,27 +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([page.goto(url), reqPromise0]); const reqPromise1 = waitForReplayRequest(page); - void page.click('#button-add'); - await forceFlushReplay(); - const res1 = await reqPromise1; + const [, , res1] = await Promise.all([page.click('#button-add'), forceFlushReplay(), 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 forceFlushReplay(); + await Promise.all([page.click('#button-modify'), await forceFlushReplay()]); - await page.click('#button-remove'); - await forceFlushReplay(); + await Promise.all([page.click('#button-remove'), await forceFlushReplay()]); const replayData0 = getReplayRecordingContent(res0); expect(replayData0.fullSnapshots.length).toBe(1); diff --git a/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts b/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts index a40387159bfc..fecf7863aaca 100644 --- a/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts +++ b/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([ + 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'));`, + ), + reqPromise0, + reqPromise1, + ]); + + const replayEvent0 = getReplayEvent(req0); expect(replayEvent0).toEqual(getExpectedReplayEvent({})); - const replayEvent1 = getReplayEvent(await reqPromise1); + const replayEvent1 = getReplayEvent(req1); expect(replayEvent1).toEqual( getExpectedReplayEvent({ segment_id: 1, diff --git a/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index 956397c84a49..63aaeb8b1562 100644 --- a/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -56,8 +56,7 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); - await page.goto(url); - const req0 = await reqPromise0; + const [, req0] = await Promise.all([page.goto(url), reqPromise0]); const replayEvent0 = getReplayEvent(req0); const recording0 = getReplayRecordingContent(req0); @@ -65,9 +64,8 @@ sentryTest( expect(normalize(recording0.fullSnapshots)).toMatchSnapshot('seg-0-snap-full'); expect(recording0.incrementalSnapshots.length).toEqual(0); - await page.click('#go-background'); + const [, req1] = await Promise.all([page.click('#go-background'), reqPromise1]); - const req1 = await reqPromise1; const replayEvent1 = getReplayEvent(req1); const recording1 = getReplayRecordingContent(req1); @@ -97,9 +95,8 @@ sentryTest( // ----------------------------------------------------------------------------------------- // Test page reload - await page.reload(); + const [, req2] = await Promise.all([page.reload(), reqPromise2]); - const req2 = await reqPromise2; const replayEvent2 = getReplayEvent(req2); const recording2 = getReplayRecordingContent(req2); @@ -107,9 +104,8 @@ sentryTest( expect(normalize(recording2.fullSnapshots)).toMatchSnapshot('seg-2-snap-full'); expect(recording2.incrementalSnapshots.length).toEqual(0); - await page.click('#go-background'); + const [, req3] = await Promise.all([page.click('#go-background'), reqPromise3]); - const req3 = await reqPromise3; const replayEvent3 = getReplayEvent(req3); const recording3 = getReplayRecordingContent(req3); @@ -137,9 +133,8 @@ sentryTest( // ----------------------------------------------------------------------------------------- // Test subsequent link navigation to another page - await page.click('a'); + const [, req4] = await Promise.all([page.click('a'), reqPromise4]); - const req4 = await reqPromise4; const replayEvent4 = getReplayEvent(req4); const recording4 = getReplayRecordingContent(req4); @@ -161,9 +156,8 @@ sentryTest( expect(normalize(recording4.fullSnapshots)).toMatchSnapshot('seg-4-snap-full'); expect(recording4.incrementalSnapshots.length).toEqual(0); - await page.click('#go-background'); + const [, req5] = await Promise.all([page.click('#go-background'), reqPromise5]); - const req5 = await reqPromise5; const replayEvent5 = getReplayEvent(req5); const recording5 = getReplayRecordingContent(req5); @@ -207,9 +201,8 @@ sentryTest( // ----------------------------------------------------------------------------------------- // Test subsequent navigation without a page reload (i.e. SPA navigation) - await page.click('#spa-navigation'); + const [, req6] = await Promise.all([page.click('#spa-navigation'), reqPromise6]); - const req6 = await reqPromise6; const replayEvent6 = getReplayEvent(req6); const recording6 = getReplayRecordingContent(req6); @@ -231,9 +224,8 @@ sentryTest( expect(recording6.fullSnapshots.length).toEqual(0); expect(normalize(recording6.incrementalSnapshots)).toMatchSnapshot('seg-6-snap-incremental'); - await page.click('#go-background'); + const [, req7] = await Promise.all([page.click('#go-background'), reqPromise7]); - const req7 = await reqPromise7; const replayEvent7 = getReplayEvent(req7); const recording7 = getReplayRecordingContent(req7); @@ -279,9 +271,11 @@ sentryTest( // // ----------------------------------------------------------------------------------------- // // And just to finish this off, let's go back to the index page - await page.click('a'); + const [, req8] = await Promise.all([ + page.click('a'), + reqPromise8 + ]); - const req8 = await reqPromise8; const replayEvent8 = getReplayEvent(req8); const recording8 = getReplayRecordingContent(req8); @@ -293,9 +287,11 @@ sentryTest( expect(normalize(recording8.fullSnapshots)).toMatchSnapshot('seg-8-snap-full'); expect(recording8.incrementalSnapshots.length).toEqual(0); - await page.click('#go-background'); + const [, req9] = await Promise.all([ + page.click('#go-background'), + reqPromise9 + ]); - const req9 = await reqPromise9; const replayEvent9 = getReplayEvent(req9); const recording9 = getReplayRecordingContent(req9); diff --git a/packages/browser-integration-tests/suites/replay/requests/test.ts b/packages/browser-integration-tests/suites/replay/requests/test.ts index ba1d6ec5d0a2..dfb16327f7a8 100644 --- a/packages/browser-integration-tests/suites/replay/requests/test.ts +++ b/packages/browser-integration-tests/suites/replay/requests/test.ts @@ -10,9 +10,6 @@ sentryTest('replay recording should contain fetch request span', async ({ getLoc 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, @@ -29,15 +26,18 @@ sentryTest('replay recording should contain fetch request span', async ({ getLoc }); }); + const reqPromise0 = waitForReplayRequest(page, 0); + const reqPromise1 = waitForReplayRequest(page, 1); + const url = await getLocalTestPath({ testDir: __dirname }); - await page.goto(url); - await page.click('#go-background'); - const { performanceSpans: spans0 } = getReplayRecordingContent(await reqPromise0); + const [, req0] = await Promise.all([Promise.all([page.goto(url), page.click('#go-background')]), reqPromise0]); + + const { performanceSpans: spans0 } = getReplayRecordingContent(req0); const receivedResponse = page.waitForResponse('https://example.com'); - await page.click('#fetch'); - await receivedResponse; + + await Promise.all([page.click('#fetch'), receivedResponse]); const { performanceSpans: spans1 } = getReplayRecordingContent(await reqPromise1); @@ -50,9 +50,6 @@ sentryTest('replay recording should contain XHR request span', async ({ getLocal 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, @@ -69,15 +66,17 @@ sentryTest('replay recording should contain XHR request span', async ({ getLocal }); }); + const reqPromise0 = waitForReplayRequest(page, 0); + const reqPromise1 = waitForReplayRequest(page, 1); + + const url = await getLocalTestPath({ testDir: __dirname }); - await page.goto(url); - await page.click('#go-background'); - const { performanceSpans: spans0 } = getReplayRecordingContent(await reqPromise0); + const [, req0] = await Promise.all([Promise.all([page.goto(url), page.click('#go-background')]), reqPromise0]); - const receivedResponse = page.waitForResponse('https://example.com'); - await page.click('#xhr'); - await receivedResponse; + const { performanceSpans: spans0 } = getReplayRecordingContent(req0); + + await Promise.all([page.click('#xhr'), page.waitForResponse('https://example.com')]) const { performanceSpans: spans1 } = getReplayRecordingContent(await reqPromise1); From d44f401948195dcc907c4aa2d411dd266b4040ad Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 19 Sep 2023 13:40:00 +0100 Subject: [PATCH 2/7] Fix linter. --- .../suites/replay/multiple-pages/test.ts | 10 ++-------- .../suites/replay/requests/test.ts | 3 +-- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index 63aaeb8b1562..c7f591b97982 100644 --- a/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -271,10 +271,7 @@ sentryTest( // // ----------------------------------------------------------------------------------------- // // And just to finish this off, let's go back to the index page - const [, req8] = await Promise.all([ - page.click('a'), - reqPromise8 - ]); + const [, req8] = await Promise.all([page.click('a'), reqPromise8]); const replayEvent8 = getReplayEvent(req8); const recording8 = getReplayRecordingContent(req8); @@ -287,10 +284,7 @@ sentryTest( expect(normalize(recording8.fullSnapshots)).toMatchSnapshot('seg-8-snap-full'); expect(recording8.incrementalSnapshots.length).toEqual(0); - const [, req9] = await Promise.all([ - page.click('#go-background'), - reqPromise9 - ]); + const [, req9] = await Promise.all([page.click('#go-background'), reqPromise9]); const replayEvent9 = getReplayEvent(req9); const recording9 = getReplayRecordingContent(req9); diff --git a/packages/browser-integration-tests/suites/replay/requests/test.ts b/packages/browser-integration-tests/suites/replay/requests/test.ts index dfb16327f7a8..260ae3ab28aa 100644 --- a/packages/browser-integration-tests/suites/replay/requests/test.ts +++ b/packages/browser-integration-tests/suites/replay/requests/test.ts @@ -69,14 +69,13 @@ sentryTest('replay recording should contain XHR request span', async ({ getLocal const reqPromise0 = waitForReplayRequest(page, 0); const reqPromise1 = waitForReplayRequest(page, 1); - const url = await getLocalTestPath({ testDir: __dirname }); const [, req0] = await Promise.all([Promise.all([page.goto(url), page.click('#go-background')]), reqPromise0]); const { performanceSpans: spans0 } = getReplayRecordingContent(req0); - await Promise.all([page.click('#xhr'), page.waitForResponse('https://example.com')]) + await Promise.all([page.click('#xhr'), page.waitForResponse('https://example.com')]); const { performanceSpans: spans1 } = getReplayRecordingContent(await reqPromise1); From 8e74fedf0066a97c9f763dbcf8a056e47738091c Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 19 Sep 2023 16:09:46 +0100 Subject: [PATCH 3/7] Refactor `defaultOptions` tests further. --- .../largeMutations/defaultOptions/test.ts | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts b/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts index 1fa23aa00e34..f84423b7b49b 100644 --- a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts +++ b/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts @@ -18,23 +18,12 @@ sentryTest( }); }); - const reqPromise0 = waitForReplayRequest(page, 0); - const url = await getLocalTestPath({ testDir: __dirname }); - const [, res0] = await Promise.all([page.goto(url), reqPromise0]); - - const reqPromise1 = waitForReplayRequest(page); - - const [, , res1] = await Promise.all([page.click('#button-add'), forceFlushReplay(), reqPromise1]); - - const reqPromise2 = waitForReplayRequest(page); - - const [, , res2] = await Promise.all([page.click('#button-modify'), forceFlushReplay(), reqPromise2]); - - const reqPromise3 = waitForReplayRequest(page); - - const [, , res3] = await Promise.all([page.click('#button-remove'), forceFlushReplay(), reqPromise3]); + const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); + const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add'), forceFlushReplay()]); + const [res2] = await Promise.all([waitForReplayRequest(page), page.click('#button-modify'), forceFlushReplay()]); + const [res3] = await Promise.all([waitForReplayRequest(page), page.click('#button-remove'), forceFlushReplay()]); const replayData0 = getReplayRecordingContent(res0); const replayData1 = getReplayRecordingContent(res1); From 17d8a511abc9473f2e2ce49dedf686eac4f5d303 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 19 Sep 2023 16:35:18 +0100 Subject: [PATCH 4/7] Refactor more. --- .../suites/replay/bufferMode/test.ts | 13 ++++++------ .../suites/replay/captureConsoleLog/test.ts | 6 ++++-- .../suites/replay/errors/errorMode/test.ts | 6 +++--- .../largeMutations/defaultOptions/test.ts | 13 +++++++++--- .../largeMutations/mutationLimit/test.ts | 12 +++++++---- .../suites/replay/maxReplayDuration/test.ts | 6 +++--- .../suites/replay/multiple-pages/test.ts | 20 +++++++++---------- .../suites/replay/requests/test.ts | 10 ++++------ 8 files changed, 48 insertions(+), 38 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts index 11a3ab1ea823..443f5ecb5afe 100644 --- a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts +++ b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts @@ -84,12 +84,12 @@ sentryTest( await reqErrorPromise; expect(callsToSentry).toEqual(2); - const [, req0] = await Promise.all([ + const [req0] = await Promise.all([ + reqPromise0, await page.evaluate(async () => { const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay; await replayIntegration.flush(); }), - reqPromise0, ]); // 2 errors, 1 flush @@ -227,12 +227,12 @@ sentryTest( await reqErrorPromise; expect(callsToSentry).toEqual(2); - const [, req0] = await Promise.all([ + const [req0] = await Promise.all([ + reqPromise0, page.evaluate(async () => { const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay; await replayIntegration.flush({ continueRecording: false }); }), - reqPromise0, ]); // 2 errors, 1 flush @@ -348,11 +348,10 @@ sentryTest( // Error sample rate is now at 1.0, this error should create a replay const reqErrorPromise1 = waitForErrorRequest(page); - const [, req0] = await Promise.all([ - page.click('#error2'), - + const [req0] = await Promise.all([ // 1 unsampled error, 1 sampled error -> 1 flush reqPromise0, + page.click('#error2'), ]); const reqError1 = await reqErrorPromise1; diff --git a/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts b/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts index 0343d6423217..13353bf1fb6c 100644 --- a/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts +++ b/packages/browser-integration-tests/suites/replay/captureConsoleLog/test.ts @@ -37,7 +37,8 @@ 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... - const [, , req1] = await Promise.all([page.click('[data-log]'), forceFlushReplay(), reqPromise1]); + const [req1] = await Promise.all([reqPromise1, page.click('[data-log]')]); + await forceFlushReplay(); const { breadcrumbs } = getCustomRecordingEvents(req1); @@ -86,7 +87,8 @@ sentryTest('should capture very large console logs', async ({ getLocalTestPath, 5_000, ); - const [, , req1] = await Promise.all([page.click('[data-log-large]'), forceFlushReplay(), reqPromise1]); + const [req1] = await Promise.all([reqPromise1, page.click('[data-log-large]')]); + await forceFlushReplay(); const { breadcrumbs } = getCustomRecordingEvents(req1); diff --git a/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts b/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts index a83a622d739e..4bb4c45ae978 100644 --- a/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts +++ b/packages/browser-integration-tests/suites/replay/errors/errorMode/test.ts @@ -58,17 +58,17 @@ sentryTest( expect(callsToSentry).toEqual(0); - const [, req0] = await Promise.all([page.click('#error'), reqPromise0]); + const [req0] = await Promise.all([reqPromise0, page.click('#error')]); expect(callsToSentry).toEqual(2); // 1 error, 1 replay event - const [, req1] = await Promise.all([page.click('#go-background'), reqPromise1, 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'); - const [, req2] = await Promise.all([page.click('#go-background'), reqPromise2]); + const [req2] = await Promise.all([reqPromise2, page.click('#go-background')]); const event0 = getReplayEvent(req0); const content0 = getReplayRecordingContent(req0); diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts b/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts index f84423b7b49b..efbd3384ec20 100644 --- a/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts +++ b/packages/browser-integration-tests/suites/replay/largeMutations/defaultOptions/test.ts @@ -21,9 +21,16 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); const [res0] = await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add'), forceFlushReplay()]); - const [res2] = await Promise.all([waitForReplayRequest(page), page.click('#button-modify'), forceFlushReplay()]); - const [res3] = await Promise.all([waitForReplayRequest(page), page.click('#button-remove'), forceFlushReplay()]); + await forceFlushReplay(); + + const [res1] = await Promise.all([waitForReplayRequest(page), page.click('#button-add')]); + await forceFlushReplay(); + + const [res2] = await Promise.all([waitForReplayRequest(page), page.click('#button-modify')]); + await forceFlushReplay(); + + const [res3] = await Promise.all([waitForReplayRequest(page), page.click('#button-remove')]); + await forceFlushReplay(); const replayData0 = getReplayRecordingContent(res0); const replayData1 = getReplayRecordingContent(res1); diff --git a/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts b/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts index 25d5f980762e..4c10e9db0436 100644 --- a/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts +++ b/packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts @@ -27,20 +27,24 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); - const [, res0] = await Promise.all([page.goto(url), reqPromise0]); + const [res0] = await Promise.all([reqPromise0, page.goto(url)]); + await forceFlushReplay(); const reqPromise1 = waitForReplayRequest(page); - const [, , res1] = await Promise.all([page.click('#button-add'), forceFlushReplay(), reqPromise1]); + const [res1] = await Promise.all([reqPromise1, page.click('#button-add')]); + await forceFlushReplay(); // replay should be stopped due to mutation limit let replay = await getReplaySnapshot(page); expect(replay.session).toBe(undefined); expect(replay._isEnabled).toBe(false); - await Promise.all([page.click('#button-modify'), await forceFlushReplay()]); + await page.click('#button-modify'); + await forceFlushReplay(); - await Promise.all([page.click('#button-remove'), await forceFlushReplay()]); + await page.click('#button-remove'); + await forceFlushReplay(); const replayData0 = getReplayRecordingContent(res0); expect(replayData0.fullSnapshots.length).toBe(1); diff --git a/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts b/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts index fecf7863aaca..2890f58691b5 100644 --- a/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts +++ b/packages/browser-integration-tests/suites/replay/maxReplayDuration/test.ts @@ -35,7 +35,9 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa await new Promise(resolve => setTimeout(resolve, MAX_REPLAY_DURATION / 2 + 100)); - const [, , req0, req1] = await Promise.all([ + const [req0, req1] = await Promise.all([ + reqPromise0, + reqPromise1, page.click('#button1'), page.evaluate( `Object.defineProperty(document, 'visibilityState', { @@ -47,8 +49,6 @@ sentryTest('keeps track of max duration across reloads', async ({ getLocalTestPa document.dispatchEvent(new Event('visibilitychange'));`, ), - reqPromise0, - reqPromise1, ]); const replayEvent0 = getReplayEvent(req0); diff --git a/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts b/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts index c7f591b97982..4b04a61995a4 100644 --- a/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts +++ b/packages/browser-integration-tests/suites/replay/multiple-pages/test.ts @@ -56,7 +56,7 @@ sentryTest( const url = await getLocalTestPath({ testDir: __dirname }); - const [, req0] = await Promise.all([page.goto(url), reqPromise0]); + const [req0] = await Promise.all([reqPromise0, page.goto(url)]); const replayEvent0 = getReplayEvent(req0); const recording0 = getReplayRecordingContent(req0); @@ -64,7 +64,7 @@ sentryTest( expect(normalize(recording0.fullSnapshots)).toMatchSnapshot('seg-0-snap-full'); expect(recording0.incrementalSnapshots.length).toEqual(0); - const [, req1] = await Promise.all([page.click('#go-background'), reqPromise1]); + const [req1] = await Promise.all([reqPromise1, page.click('#go-background')]); const replayEvent1 = getReplayEvent(req1); const recording1 = getReplayRecordingContent(req1); @@ -95,7 +95,7 @@ sentryTest( // ----------------------------------------------------------------------------------------- // Test page reload - const [, req2] = await Promise.all([page.reload(), reqPromise2]); + const [req2] = await Promise.all([reqPromise2, page.reload()]); const replayEvent2 = getReplayEvent(req2); const recording2 = getReplayRecordingContent(req2); @@ -104,7 +104,7 @@ sentryTest( expect(normalize(recording2.fullSnapshots)).toMatchSnapshot('seg-2-snap-full'); expect(recording2.incrementalSnapshots.length).toEqual(0); - const [, req3] = await Promise.all([page.click('#go-background'), reqPromise3]); + const [req3] = await Promise.all([reqPromise3, page.click('#go-background')]); const replayEvent3 = getReplayEvent(req3); const recording3 = getReplayRecordingContent(req3); @@ -133,7 +133,7 @@ sentryTest( // ----------------------------------------------------------------------------------------- // Test subsequent link navigation to another page - const [, req4] = await Promise.all([page.click('a'), reqPromise4]); + const [req4] = await Promise.all([reqPromise4, page.click('a')]); const replayEvent4 = getReplayEvent(req4); const recording4 = getReplayRecordingContent(req4); @@ -156,7 +156,7 @@ sentryTest( expect(normalize(recording4.fullSnapshots)).toMatchSnapshot('seg-4-snap-full'); expect(recording4.incrementalSnapshots.length).toEqual(0); - const [, req5] = await Promise.all([page.click('#go-background'), reqPromise5]); + const [req5] = await Promise.all([reqPromise5, page.click('#go-background')]); const replayEvent5 = getReplayEvent(req5); const recording5 = getReplayRecordingContent(req5); @@ -201,7 +201,7 @@ sentryTest( // ----------------------------------------------------------------------------------------- // Test subsequent navigation without a page reload (i.e. SPA navigation) - const [, req6] = await Promise.all([page.click('#spa-navigation'), reqPromise6]); + const [req6] = await Promise.all([reqPromise6, page.click('#spa-navigation')]); const replayEvent6 = getReplayEvent(req6); const recording6 = getReplayRecordingContent(req6); @@ -224,7 +224,7 @@ sentryTest( expect(recording6.fullSnapshots.length).toEqual(0); expect(normalize(recording6.incrementalSnapshots)).toMatchSnapshot('seg-6-snap-incremental'); - const [, req7] = await Promise.all([page.click('#go-background'), reqPromise7]); + const [req7] = await Promise.all([reqPromise7, page.click('#go-background')]); const replayEvent7 = getReplayEvent(req7); const recording7 = getReplayRecordingContent(req7); @@ -271,7 +271,7 @@ sentryTest( // // ----------------------------------------------------------------------------------------- // // And just to finish this off, let's go back to the index page - const [, req8] = await Promise.all([page.click('a'), reqPromise8]); + const [req8] = await Promise.all([reqPromise8, page.click('a')]); const replayEvent8 = getReplayEvent(req8); const recording8 = getReplayRecordingContent(req8); @@ -284,7 +284,7 @@ sentryTest( expect(normalize(recording8.fullSnapshots)).toMatchSnapshot('seg-8-snap-full'); expect(recording8.incrementalSnapshots.length).toEqual(0); - const [, req9] = await Promise.all([page.click('#go-background'), reqPromise9]); + const [req9] = await Promise.all([reqPromise9, page.click('#go-background')]); const replayEvent9 = getReplayEvent(req9); const recording9 = getReplayRecordingContent(req9); diff --git a/packages/browser-integration-tests/suites/replay/requests/test.ts b/packages/browser-integration-tests/suites/replay/requests/test.ts index 260ae3ab28aa..52d78a144787 100644 --- a/packages/browser-integration-tests/suites/replay/requests/test.ts +++ b/packages/browser-integration-tests/suites/replay/requests/test.ts @@ -31,13 +31,11 @@ sentryTest('replay recording should contain fetch request span', async ({ getLoc const url = await getLocalTestPath({ testDir: __dirname }); - const [, req0] = await Promise.all([Promise.all([page.goto(url), page.click('#go-background')]), reqPromise0]); + const [req0] = await Promise.all([reqPromise0, page.goto(url), page.click('#go-background')]); const { performanceSpans: spans0 } = getReplayRecordingContent(req0); - const receivedResponse = page.waitForResponse('https://example.com'); - - await Promise.all([page.click('#fetch'), receivedResponse]); + await Promise.all([page.waitForResponse('https://example.com'), page.click('#fetch')]); const { performanceSpans: spans1 } = getReplayRecordingContent(await reqPromise1); @@ -71,11 +69,11 @@ sentryTest('replay recording should contain XHR request span', async ({ getLocal const url = await getLocalTestPath({ testDir: __dirname }); - const [, req0] = await Promise.all([Promise.all([page.goto(url), page.click('#go-background')]), reqPromise0]); + const [req0] = await Promise.all([reqPromise0, page.goto(url), page.click('#go-background')]); const { performanceSpans: spans0 } = getReplayRecordingContent(req0); - await Promise.all([page.click('#xhr'), page.waitForResponse('https://example.com')]); + await Promise.all([page.waitForResponse('https://example.com'), page.click('#xhr')]); const { performanceSpans: spans1 } = getReplayRecordingContent(await reqPromise1); From f036137203d1073eace272fed9f4ed4f4d40d37c Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Mon, 25 Sep 2023 16:11:13 +0100 Subject: [PATCH 5/7] Update packages/browser-integration-tests/suites/replay/bufferMode/test.ts Co-authored-by: Billy Vong --- .../browser-integration-tests/suites/replay/bufferMode/test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts index 443f5ecb5afe..2c7c3f199579 100644 --- a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts +++ b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts @@ -86,7 +86,7 @@ sentryTest( const [req0] = await Promise.all([ reqPromise0, - await page.evaluate(async () => { + page.evaluate(async () => { const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay; await replayIntegration.flush(); }), From de2e5c39d227887f46ed4ddd9fcb35a9d4294001 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Mon, 25 Sep 2023 20:44:47 +0100 Subject: [PATCH 6/7] Fix linter. --- .../browser-integration-tests/suites/replay/bufferMode/test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts index 2c7c3f199579..c4da79faa1d9 100644 --- a/packages/browser-integration-tests/suites/replay/bufferMode/test.ts +++ b/packages/browser-integration-tests/suites/replay/bufferMode/test.ts @@ -86,7 +86,7 @@ sentryTest( const [req0] = await Promise.all([ reqPromise0, - page.evaluate(async () => { + page.evaluate(async () => { const replayIntegration = (window as unknown as Window & { Replay: Replay }).Replay; await replayIntegration.flush(); }), From d5c0ba3ab9e43c826a89611443d90f5eddff8be9 Mon Sep 17 00:00:00 2001 From: Onur Temizkan Date: Tue, 26 Sep 2023 10:54:34 +0100 Subject: [PATCH 7/7] Refactor `slowClick` tests. --- .../replay/slowClick/clickTargets/test.ts | 39 ++++---- .../suites/replay/slowClick/disable/test.ts | 20 ++-- .../suites/replay/slowClick/ignore/test.ts | 39 ++++---- .../replay/slowClick/multiClick/test.ts | 40 ++++---- .../suites/replay/slowClick/mutation/test.ts | 99 +++++++++---------- .../suites/replay/slowClick/scroll/test.ts | 40 ++++---- .../suites/replay/slowClick/timeout/test.ts | 39 ++++---- .../replay/slowClick/windowOpen/test.ts | 5 +- 8 files changed, 145 insertions(+), 176 deletions(-) diff --git a/packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts index 59bfb2ea26e8..8074f34a40fb 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/clickTargets/test.ts @@ -35,8 +35,6 @@ import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -47,18 +45,19 @@ import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); - }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); + }), - await page.click(`#${id}`); + page.click(`#${id}`), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); @@ -92,8 +91,6 @@ import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -104,18 +101,18 @@ import { getCustomRecordingEvents, shouldSkipReplayTest, waitForReplayRequest } const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); - - await page.click(`#${id}`); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click(`#${id}`), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { diff --git a/packages/browser-integration-tests/suites/replay/slowClick/disable/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/disable/test.ts index 1a88d992714e..aef218a63cae 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/disable/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/disable/test.ts @@ -8,8 +8,6 @@ sentryTest('does not capture slow click when slowClickTimeout === 0', async ({ g sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -20,18 +18,18 @@ sentryTest('does not capture slow click when slowClickTimeout === 0', async ({ g const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mutationButton'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click('#mutationButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { diff --git a/packages/browser-integration-tests/suites/replay/slowClick/ignore/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/ignore/test.ts index 15e891b22e52..f80789d46a78 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/ignore/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/ignore/test.ts @@ -8,8 +8,6 @@ sentryTest('click is ignored on ignoreSelectors', async ({ getLocalTestUrl, page sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -20,18 +18,18 @@ sentryTest('click is ignored on ignoreSelectors', async ({ getLocalTestUrl, page const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mutationIgnoreButton'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click('#mutationIgnoreButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { @@ -60,8 +58,6 @@ sentryTest('click is ignored on div', async ({ getLocalTestUrl, page }) => { sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -72,18 +68,19 @@ sentryTest('click is ignored on div', async ({ getLocalTestUrl, page }) => { const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), - await page.click('#mutationDiv'); + await page.click('#mutationDiv'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { diff --git a/packages/browser-integration-tests/suites/replay/slowClick/multiClick/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/multiClick/test.ts index cdb099d82a18..a21327058a81 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/multiClick/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/multiClick/test.ts @@ -13,8 +13,6 @@ sentryTest('captures multi click when not detecting slow click', async ({ getLoc sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -25,18 +23,18 @@ sentryTest('captures multi click when not detecting slow click', async ({ getLoc const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.multiClick'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mutationButtonImmediately', { clickCount: 4 }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.multiClick'); + }), + page.click('#mutationButtonImmediately', { clickCount: 4 }), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.multiClick'); @@ -65,15 +63,16 @@ sentryTest('captures multi click when not detecting slow click', async ({ getLoc // When this has been flushed, the timeout has exceeded - so add a new click now, which should trigger another multi click - const reqPromise2 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); - - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.multiClick'); - }); + const [req2] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mutationButtonImmediately', { clickCount: 3 }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.multiClick'); + }), + page.click('#mutationButtonImmediately', { clickCount: 3 }), + ]); - const { breadcrumbs: breadcrumbb2 } = getCustomRecordingEvents(await reqPromise2); + const { breadcrumbs: breadcrumbb2 } = getCustomRecordingEvents(req2); const slowClickBreadcrumbs2 = breadcrumbb2.filter(breadcrumb => breadcrumb.category === 'ui.multiClick'); @@ -106,8 +105,6 @@ sentryTest('captures multiple multi clicks', async ({ getLocalTestUrl, page, for sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -118,8 +115,7 @@ sentryTest('captures multiple multi clicks', async ({ getLocalTestUrl, page, for const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); let multiClickBreadcrumbCount = 0; diff --git a/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts index cb5b9160d13b..196719783229 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts @@ -8,8 +8,6 @@ sentryTest('mutation after threshold results in slow click', async ({ forceFlush sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -20,19 +18,20 @@ sentryTest('mutation after threshold results in slow click', async ({ forceFlush const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); await forceFlushReplay(); - await reqPromise0; - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); - }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); + }), - await page.click('#mutationButton'); + page.click('#mutationButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); @@ -69,8 +68,6 @@ sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => { sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -81,18 +78,18 @@ sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => { const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - void page.click('#mutationButton', { clickCount: 4 }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); + }), + page.click('#mutationButton', { clickCount: 4 }), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); const multiClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.multiClick'); @@ -131,8 +128,6 @@ sentryTest('immediate mutation does not trigger slow click', async ({ forceFlush sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -143,19 +138,19 @@ sentryTest('immediate mutation does not trigger slow click', async ({ forceFlush const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); await forceFlushReplay(); - await reqPromise0; - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); - - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mutationButtonImmediately'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click('#mutationButtonImmediately'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { @@ -183,8 +178,6 @@ sentryTest('inline click handler does not trigger slow click', async ({ forceFlu sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -195,19 +188,19 @@ sentryTest('inline click handler does not trigger slow click', async ({ forceFlu const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); await forceFlushReplay(); - await reqPromise0; - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); - - await page.click('#mutationButtonInline'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click('#mutationButtonInline'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { @@ -235,8 +228,6 @@ sentryTest('mouseDown events are considered', async ({ getLocalTestUrl, page }) sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -247,18 +238,18 @@ sentryTest('mouseDown events are considered', async ({ getLocalTestUrl, page }) const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mouseDownButton'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click('#mouseDownButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { diff --git a/packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts index a8e59752fc4a..1f5b672ff659 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/scroll/test.ts @@ -8,8 +8,6 @@ sentryTest('immediate scroll does not trigger slow click', async ({ getLocalTest sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -20,18 +18,18 @@ sentryTest('immediate scroll does not trigger slow click', async ({ getLocalTest const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#scrollButton'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click'); + }), + page.click('#scrollButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); expect(breadcrumbs).toEqual([ { @@ -59,8 +57,6 @@ sentryTest('late scroll triggers slow click', async ({ getLocalTestUrl, page }) sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -71,18 +67,18 @@ sentryTest('late scroll triggers slow click', async ({ getLocalTestUrl, page }) const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#scrollLateButton'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); + }), + page.click('#scrollLateButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); diff --git a/packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts index ed53bc2d5fb4..6e6a1f13e3b6 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/timeout/test.ts @@ -8,8 +8,6 @@ sentryTest('mutation after timeout results in slow click', async ({ getLocalTest sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -20,18 +18,18 @@ sentryTest('mutation after timeout results in slow click', async ({ getLocalTest const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; - - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); - }); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - await page.click('#mutationButtonLate'); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); + }), + page.click('#mutationButtonLate'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); @@ -65,8 +63,6 @@ sentryTest('console.log results in slow click', async ({ getLocalTestUrl, page } sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -77,18 +73,19 @@ sentryTest('console.log results in slow click', async ({ getLocalTestUrl, page } const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); - const reqPromise1 = waitForReplayRequest(page, (event, res) => { - const { breadcrumbs } = getCustomRecordingEvents(res); + const [req1] = await Promise.all([ + waitForReplayRequest(page, (event, res) => { + const { breadcrumbs } = getCustomRecordingEvents(res); - return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); - }); + return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); + }), - await page.click('#consoleLogButton'); + page.click('#consoleLogButton'), + ]); - const { breadcrumbs } = getCustomRecordingEvents(await reqPromise1); + const { breadcrumbs } = getCustomRecordingEvents(req1); const slowClickBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.category === 'ui.slowClickDetected'); diff --git a/packages/browser-integration-tests/suites/replay/slowClick/windowOpen/test.ts b/packages/browser-integration-tests/suites/replay/slowClick/windowOpen/test.ts index 4c9401234ea2..98ca0cc4c2a0 100644 --- a/packages/browser-integration-tests/suites/replay/slowClick/windowOpen/test.ts +++ b/packages/browser-integration-tests/suites/replay/slowClick/windowOpen/test.ts @@ -8,8 +8,6 @@ sentryTest('window.open() is considered for slow click', async ({ getLocalTestUr sentryTest.skip(); } - const reqPromise0 = waitForReplayRequest(page, 0); - await page.route('https://dsn.ingest.sentry.io/**/*', route => { return route.fulfill({ status: 200, @@ -20,8 +18,7 @@ sentryTest('window.open() is considered for slow click', async ({ getLocalTestUr const url = await getLocalTestUrl({ testDir: __dirname }); - await page.goto(url); - await reqPromise0; + await Promise.all([waitForReplayRequest(page, 0), page.goto(url)]); const reqPromise1 = waitForReplayRequest(page, (event, res) => { const { breadcrumbs } = getCustomRecordingEvents(res);