fix: do not send rrweb script on each snapshot request (#1266)

* fix: do not send rrweb script on each snapshot request

* fix: collect tail of dom snapshots on the test end

* fix: perform cleanup of rrweb snapshots collection on test end

Author: shadowusr

src/browser/history/index.ts

@@ -3,8 +3,9 @@ import { Callstack } from "./callstack";
 import * as cmds from "./commands";
 import { isGroup, normalizeCommandArgs, runWithHooks, shouldRecordSnapshots } from "./utils";
 import { BrowserConfig } from "../../config/browser-config";
-import { TestStep, TestStepKey } from "../../types";
-import { filterEvents, installRrwebAndCollectEvents, sendFilteredEvents } from "./rrweb";
+import { TestStepKey } from "../../types";
+import type { Test, TestStep } from "../../types";
+import { cleanupRrweb, filterEvents, installRrwebAndCollectEvents, sendFilteredEvents } from "./rrweb";
 import { getHistoryContext, runWithHistoryContext } from "./async-local-storage";
 
 const debug = makeDebug("testplane:browser:history");
@@ -61,10 +62,64 @@ interface RunWithHistoryHooksData<T> extends HooksData {
     fn: () => T;
 }
 
+interface RequestDomSnapshotsData extends HooksData {
+    attempt?: number;
+    currentTest?: Test;
+}
+
 export const runWithoutHistory = async <T>(_: unknown, fn: () => T): Promise<T> => {
     return runWithHistoryContext({ shouldBypassHistory: true }, fn) as T;
 };
 
+export const requestDomSnapshots = ({
+    session,
+    callstack,
+    snapshotsPromiseRef,
+    config,
+    attempt,
+    currentTest,
+}: RequestDomSnapshotsData): void => {
+    try {
+        if (!callstack) {
+            return;
+        }
+
+        const timeTravelMode = config.timeTravel.mode;
+        const isRetry = (attempt ?? session.executionContext?.ctx?.attempt ?? 0) > 0;
+        const shouldRecord = shouldRecordSnapshots(timeTravelMode, isRetry);
+        const test = currentTest ?? session.executionContext?.ctx?.currentTest;
+
+        if (shouldRecord && process.send && test) {
+            const rrwebPromise = installRrwebAndCollectEvents(session, callstack)
+                .then(rrwebEvents => {
+                    const rrwebEventsFiltered = filterEvents(rrwebEvents);
+                    sendFilteredEvents(test, rrwebEventsFiltered);
+                })
+                .catch(e => {
+                    debug("An error occurred during capturing snapshots in browser: %O", e);
+                });
+
+            snapshotsPromiseRef.current = snapshotsPromiseRef.current.then(() => rrwebPromise);
+        }
+    } catch (e) {
+        debug("An error occurred during capturing snapshots in browser: %O", e);
+    }
+};
+
+type CleanupDomSnapshotsData = Pick<HooksData, "session" | "callstack">;
+
+export const cleanupDomSnapshots = async ({ session, callstack }: CleanupDomSnapshotsData): Promise<void> => {
+    if (!callstack) {
+        return;
+    }
+
+    try {
+        await cleanupRrweb(session, callstack);
+    } catch (e) {
+        debug("An error occurred during cleaning up snapshots in browser: %O", e);
+    }
+};
+
 const runWithHistoryHooks = <T>({
     session,
     callstack,
@@ -88,30 +143,14 @@ const runWithHistoryHooks = <T>({
 
             if (typeof (result as Promise<unknown> | undefined)?.then === "function") {
                 try {
-                    const timeTravelMode = config.timeTravel.mode;
-                    const isRetry = (session.executionContext?.ctx?.attempt ?? 0) > 0;
-                    const shouldRecord = shouldRecordSnapshots(timeTravelMode, isRetry);
                     const isInterestingStep =
                         !nodeData.name.startsWith("is") &&
                         !nodeData.name.startsWith("get") &&
                         !nodeData.name.startsWith("$") &&
                         !nodeData.name.startsWith("wait");
 
-                    if (
-                        shouldRecord &&
-                        process.send &&
-                        session.executionContext?.ctx?.currentTest &&
-                        isInterestingStep
-                    ) {
-                        const rrwebPromise = installRrwebAndCollectEvents(session, callstack)
-                            ?.then(rrwebEvents => {
-                                const rrwebEventsFiltered = filterEvents(rrwebEvents);
-                                sendFilteredEvents(session, rrwebEventsFiltered);
-                            })
-                            .catch(e => {
-                                debug("An error occurred during capturing snapshots in browser: %O", e);
-                            });
-                        snapshotsPromiseRef.current = snapshotsPromiseRef.current.then(() => rrwebPromise);
+                    if (isInterestingStep) {
+                        requestDomSnapshots({ session, callstack, snapshotsPromiseRef, config });
                     }
                 } catch (e) {
                     debug("An error occurred during capturing snapshots in browser: %O", e);