From aee1f454c8c0ebf89ceee3778b00ecf84d6bc216 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 21 Aug 2025 11:04:07 +0200 Subject: [PATCH 1/9] Skip `timeStampedPointRange` for Playwright recordings --- packages/shared/test-suites/RecordingTestMetadata.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/shared/test-suites/RecordingTestMetadata.ts b/packages/shared/test-suites/RecordingTestMetadata.ts index da139e0a520..0a3268500ec 100644 --- a/packages/shared/test-suites/RecordingTestMetadata.ts +++ b/packages/shared/test-suites/RecordingTestMetadata.ts @@ -924,11 +924,6 @@ export async function processPlaywrightTestRecording( timeStampedPointRange: getPlaywrightTestTimeStampedPointRange(events), }; } else if (isTestRecordingV3(testRecording)) { - if (!testRecording.timeStampedPointRange) { - testRecording.timeStampedPointRange = getPlaywrightTestTimeStampedPointRange( - testRecording.events - ); - } return testRecording; } else { // This function does not support the legacy TestItem format From 593a8fdd3989e9a222248981bb0792f0a7de4dec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 21 Aug 2025 12:15:53 +0200 Subject: [PATCH 2/9] skip it for v2 too --- packages/shared/test-suites/RecordingTestMetadata.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/test-suites/RecordingTestMetadata.ts b/packages/shared/test-suites/RecordingTestMetadata.ts index 0a3268500ec..dfa77277a9f 100644 --- a/packages/shared/test-suites/RecordingTestMetadata.ts +++ b/packages/shared/test-suites/RecordingTestMetadata.ts @@ -921,7 +921,7 @@ export async function processPlaywrightTestRecording( id, result, source, - timeStampedPointRange: getPlaywrightTestTimeStampedPointRange(events), + timeStampedPointRange: null }; } else if (isTestRecordingV3(testRecording)) { return testRecording; From c11df9a837ebe0c5a807235cc03e4293d1cb31d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 21 Aug 2025 12:20:35 +0200 Subject: [PATCH 3/9] fmt --- packages/shared/test-suites/RecordingTestMetadata.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/test-suites/RecordingTestMetadata.ts b/packages/shared/test-suites/RecordingTestMetadata.ts index dfa77277a9f..3868f624666 100644 --- a/packages/shared/test-suites/RecordingTestMetadata.ts +++ b/packages/shared/test-suites/RecordingTestMetadata.ts @@ -921,7 +921,7 @@ export async function processPlaywrightTestRecording( id, result, source, - timeStampedPointRange: null + timeStampedPointRange: null, }; } else if (isTestRecordingV3(testRecording)) { return testRecording; From a91ee92e810ec335a0f0a6be52bd630f3dfa1f1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 4 Sep 2025 14:44:52 +0200 Subject: [PATCH 4/9] fix thing --- .../TestSuite/views/TestRecording/useTestEventContextMenu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/components/TestSuite/views/TestRecording/useTestEventContextMenu.tsx b/src/ui/components/TestSuite/views/TestRecording/useTestEventContextMenu.tsx index 44f41599e93..2f4ba693094 100644 --- a/src/ui/components/TestSuite/views/TestRecording/useTestEventContextMenu.tsx +++ b/src/ui/components/TestSuite/views/TestRecording/useTestEventContextMenu.tsx @@ -111,7 +111,7 @@ function PlayToHereMenuItem({ testEvent }: { testEvent: TestEvent }) { const beginTimeStampedPoint = testRecording.timeStampedPointRange?.begin ?? null; const endPoint = getTestEventExecutionPoint(testEvent); - if (beginTimeStampedPoint == null || endPoint == null) { + if (endPoint == null) { return null; } @@ -120,7 +120,7 @@ function PlayToHereMenuItem({ testEvent }: { testEvent: TestEvent }) { dispatch( startPlayback({ - beginTime: beginTimeStampedPoint.time, + beginTime: beginTimeStampedPoint?.time ?? 0, endTime: getTestEventTime(testEvent), }) ); From b0774d2de9c206c716dc0e64d13e2dcb87d61581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 4 Sep 2025 16:01:43 +0200 Subject: [PATCH 5/9] fix a thing, maybe --- .../TestSuite/views/TestRecording/Panel.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/ui/components/TestSuite/views/TestRecording/Panel.tsx b/src/ui/components/TestSuite/views/TestRecording/Panel.tsx index 98a0631e2c5..ad03509a70f 100644 --- a/src/ui/components/TestSuite/views/TestRecording/Panel.tsx +++ b/src/ui/components/TestSuite/views/TestRecording/Panel.tsx @@ -52,18 +52,18 @@ export default function Panel() { // to match the range of the test recording. Experimentation shows there can be some renders // where the focus range and test range are mismatched, so try to avoid caching in those cases. const enableCache = - focusWindow && - testRecording.timeStampedPointRange?.begin && - isExecutionPointsWithinRange( - focusWindow.begin.point, - testRecording.timeStampedPointRange.begin.point, - testRecording.timeStampedPointRange.end.point - ) && - isExecutionPointsWithinRange( - focusWindow.end.point, - testRecording.timeStampedPointRange.begin.point, - testRecording.timeStampedPointRange.end.point - ); + testRecording.testRunnerName === "playwright" || + (focusWindow && + isExecutionPointsWithinRange( + focusWindow.begin.point, + testRecording.timeStampedPointRange.begin.point, + testRecording.timeStampedPointRange.end.point + ) && + isExecutionPointsWithinRange( + focusWindow.end.point, + testRecording.timeStampedPointRange.begin.point, + testRecording.timeStampedPointRange.end.point + )); useImperativeIntervalCacheValues( testEventDetailsIntervalCache, From 8bffd8603e412e6bc4370fb717fd2535c0cef9fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 4 Sep 2025 16:07:24 +0200 Subject: [PATCH 6/9] fixed types --- src/ui/components/TestSuite/views/TestRecording/Panel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/components/TestSuite/views/TestRecording/Panel.tsx b/src/ui/components/TestSuite/views/TestRecording/Panel.tsx index ad03509a70f..c72ecc77e8c 100644 --- a/src/ui/components/TestSuite/views/TestRecording/Panel.tsx +++ b/src/ui/components/TestSuite/views/TestRecording/Panel.tsx @@ -54,6 +54,7 @@ export default function Panel() { const enableCache = testRecording.testRunnerName === "playwright" || (focusWindow && + testRecording.timeStampedPointRange && isExecutionPointsWithinRange( focusWindow.begin.point, testRecording.timeStampedPointRange.begin.point, From cb32e4c4263a59c66148298630f53893061552d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Thu, 4 Sep 2025 16:10:57 +0200 Subject: [PATCH 7/9] comment --- src/ui/components/TestSuite/views/TestRecording/Panel.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/ui/components/TestSuite/views/TestRecording/Panel.tsx b/src/ui/components/TestSuite/views/TestRecording/Panel.tsx index c72ecc77e8c..20ff49fc8c0 100644 --- a/src/ui/components/TestSuite/views/TestRecording/Panel.tsx +++ b/src/ui/components/TestSuite/views/TestRecording/Panel.tsx @@ -49,8 +49,12 @@ export default function Panel() { }); // We only want to cache the test event details when the focus window has been updated - // to match the range of the test recording. Experimentation shows there can be some renders + // to match the range of the test recording in the case of Cypress tests. Experimentation shows there can be some renders // where the focus range and test range are mismatched, so try to avoid caching in those cases. + // + // Entering the panel in the case of Playwright recording doesn't change the focus range. + // Playwright recordings are usually much shorter given each page is recorded separately + // and it's OK to prefetch all of the test event details for them right away. const enableCache = testRecording.testRunnerName === "playwright" || (focusWindow && From 7c61b372c564153c8dd1b26cd9e81132ba953278 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 5 Sep 2025 12:28:57 +0200 Subject: [PATCH 8/9] seek to the begin point of the playwright recording --- .../shared/test-suites/RecordingTestMetadata.ts | 2 +- .../TestSuite/views/TestSuiteContext.tsx | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/shared/test-suites/RecordingTestMetadata.ts b/packages/shared/test-suites/RecordingTestMetadata.ts index 3868f624666..6dec8611c44 100644 --- a/packages/shared/test-suites/RecordingTestMetadata.ts +++ b/packages/shared/test-suites/RecordingTestMetadata.ts @@ -931,7 +931,7 @@ export async function processPlaywrightTestRecording( } } -function getPlaywrightTestTimeStampedPointRange( +export function getPlaywrightTestTimeStampedPointRange( events: RecordingTestMetadataV3.TestRecording["events"] ) { const allEventsSections = Object.values(events); diff --git a/src/ui/components/TestSuite/views/TestSuiteContext.tsx b/src/ui/components/TestSuite/views/TestSuiteContext.tsx index 288557a2ab8..44be042acc2 100644 --- a/src/ui/components/TestSuite/views/TestSuiteContext.tsx +++ b/src/ui/components/TestSuite/views/TestSuiteContext.tsx @@ -11,7 +11,11 @@ import { import { FocusContext } from "replay-next/src/contexts/FocusContext"; import { SessionContext } from "replay-next/src/contexts/SessionContext"; import { TimelineContext } from "replay-next/src/contexts/TimelineContext"; -import { TestEvent, TestRecording } from "shared/test-suites/RecordingTestMetadata"; +import { + TestEvent, + TestRecording, + getPlaywrightTestTimeStampedPointRange, +} from "shared/test-suites/RecordingTestMetadata"; type TestSuiteContextType = { setTestRecording: (value: TestRecording | null) => Promise; @@ -57,8 +61,13 @@ export function TestSuiteContextRoot({ children }: PropsWithChildren) { sync: true, } ); - - seekToTime(timeStampedPointRange.begin.time, timeStampedPointRange.begin.point, false); + } + let beginPoint = timeStampedPointRange?.begin; + if (testRecording.testRunnerName === "playwright") { + beginPoint = getPlaywrightTestTimeStampedPointRange(testRecording.events)?.begin; + } + if (beginPoint) { + seekToTime(beginPoint.time, beginPoint.point, false); } } else { await updateForTimelineImprecise([0, duration], { From 6e52baeeada9af7efdc3c01496501e7440ec7d48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 5 Sep 2025 12:45:15 +0200 Subject: [PATCH 9/9] tweak the test --- packages/e2e-tests/tests/repaint-02.test.ts | 6 +++--- packages/e2e-tests/tests/repaint-03.test.ts | 5 ++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/e2e-tests/tests/repaint-02.test.ts b/packages/e2e-tests/tests/repaint-02.test.ts index 901ea128975..6f527269783 100644 --- a/packages/e2e-tests/tests/repaint-02.test.ts +++ b/packages/e2e-tests/tests/repaint-02.test.ts @@ -11,14 +11,14 @@ test("repaint-02: repaints on hover", async ({ }) => { await startTest(page, recordingId, testScope); - const initialScreenShot = await getGraphicsDataUrl(page); + const endingScreenShot = await getGraphicsDataUrl(page); const testLink = getTestRows(page).first(); await testLink.click(); - // Wait for the test to open and focus + // Wait for the test to open await waitFor(async () => { - await expect(await getGraphicsDataUrl(page)).not.toBe(initialScreenShot); + await expect(await getGraphicsDataUrl(page)).not.toBe(endingScreenShot); }); // By default, the screenshot shown should correspond to the start of the test diff --git a/packages/e2e-tests/tests/repaint-03.test.ts b/packages/e2e-tests/tests/repaint-03.test.ts index eb6c7a0a257..e6096256cd5 100644 --- a/packages/e2e-tests/tests/repaint-03.test.ts +++ b/packages/e2e-tests/tests/repaint-03.test.ts @@ -11,14 +11,13 @@ test("repaint-03: repaints on seek", async ({ pageWithMeta: { page, recordingId, await startTest(page, recordingId, testScope); const endingScreenShot = await getGraphicsDataUrl(page); - const initialFocusBeginTime = await getFocusBeginTime(page); const testLink = getTestRows(page).first(); await testLink.click(); - // Wait for the test to open and focus + // Wait for the test to open await waitFor(async () => { - await expect(await getFocusBeginTime(page)).not.toBe(initialFocusBeginTime); + await expect(await getGraphicsDataUrl(page)).not.toBe(endingScreenShot); }); // By default, the screenshot shown should correspond to the start of the test