Self-host Playwright's trace viewer next to the runs

trace.playwright.dev is HTTPS, so when the runs viewer is reached over
plain HTTP (tailscale IP) the browser blocks its fetch of trace.zip as
mixed content and the trace never loads. playwright-core ships the
trace viewer as a static PWA — rebuild-viewer.ts now copies it to
runs/trace-viewer and the run page links there same-origin, which also
keeps traces viewable offline.

Author: RhysSullivan

e2e/scripts/rebuild-viewer.ts

@@ -2,8 +2,9 @@
 // test: refresh runs/manifest.json + vite-build the SPA into runs/.
 // Usage: bun e2e/scripts/rebuild-viewer.ts
 import { execFileSync } from "node:child_process";
-import { rmSync } from "node:fs";
-import { join } from "node:path";
+import { cpSync, rmSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { buildManifest } from "../src/viewer/manifest";
@@ -17,4 +18,18 @@ execFileSync("bunx", ["vite", "build", "--config", "viewer/vite.config.ts"], {
   cwd: e2eDir,
   stdio: "inherit",
 });
+
+// Self-host Playwright's trace viewer (a static PWA shipped inside
+// playwright-core) next to the runs. trace.playwright.dev is HTTPS and
+// browsers refuse to let it fetch a trace.zip from a plain-HTTP server
+// (mixed content) — which is exactly how this viewer is reached over
+// tailscale. Same-origin, the restriction disappears.
+// playwright-core isn't a direct dependency — resolve it through
+// playwright (which is), then walk from its entry to the package root.
+const require = createRequire(import.meta.url);
+const playwrightCoreEntry = createRequire(require.resolve("playwright")).resolve("playwright-core");
+const traceViewerSrc = join(dirname(playwrightCoreEntry), "lib/vite/traceViewer");
+rmSync(join(runsDir, "trace-viewer"), { recursive: true, force: true });
+cpSync(traceViewerSrc, join(runsDir, "trace-viewer"), { recursive: true });
+
 console.log(`viewer rebuilt at ${runsDir}`);

e2e/src/timeline.ts

@@ -32,10 +32,7 @@ const write = (runDir: string, timeline: Timeline) =>
   writeFileSync(fileFor(runDir), JSON.stringify(timeline, null, 1));
 
 /** Record that `window`'s recording clock starts now. */
-export const markRecordingStart = (
-  runDir: string,
-  window: TimelineWindow,
-): void => {
+export const markRecordingStart = (runDir: string, window: TimelineWindow): void => {
   const timeline = read(runDir);
   write(runDir, {
     ...timeline,

e2e/viewer/src/SessionPlayer.tsx

@@ -104,20 +104,10 @@ export const SessionPlayer = ({
       }
       return { window: entry.window, from: toSession(entry.at), to };
     });
-  }, [
-    timeline,
-    sessionStart,
-    terminalAnchor,
-    browserAnchor,
-    castDuration,
-    videoDuration,
-  ]);
+  }, [timeline, sessionStart, terminalAnchor, browserAnchor, castDuration, videoDuration]);
 
   const duration = acts.at(-1)?.to ?? 0;
-  const ready =
-    castDuration !== null &&
-    videoDuration !== null &&
-    Number.isFinite(duration);
+  const ready = castDuration !== null && videoDuration !== null && Number.isFinite(duration);
 
   const actAt = (time: number): number => {
     for (let i = acts.length - 1; i >= 0; i -= 1) {
@@ -133,9 +123,7 @@ export const SessionPlayer = ({
   const mediaTime = (window: Act["window"], time: number): number =>
     Math.max(
       0,
-      (sessionStart +
-        time * 1000 -
-        (window === "terminal" ? terminalAnchor : browserAnchor)) /
+      (sessionStart + time * 1000 - (window === "terminal" ? terminalAnchor : browserAnchor)) /
         1000,
     );
 
@@ -178,22 +166,15 @@ export const SessionPlayer = ({
     if (act.window === "browser") {
       cast?.pause();
       if (video) {
-        const target = Math.min(
-          mediaTime("browser", time),
-          (videoDuration ?? Infinity) - 0.05,
-        );
-        if (Math.abs(video.currentTime - target) > 0.25)
-          video.currentTime = target;
+        const target = Math.min(mediaTime("browser", time), (videoDuration ?? Infinity) - 0.05);
+        if (Math.abs(video.currentTime - target) > 0.25) video.currentTime = target;
         if (play) await video.play().catch(() => {});
         else video.pause();
       }
     } else {
       videoRef.current?.pause();
       if (cast) {
-        const target = Math.min(
-          mediaTime("terminal", time),
-          (castDuration ?? Infinity) - 0.05,
-        );
+        const target = Math.min(mediaTime("terminal", time), (castDuration ?? Infinity) - 0.05);
         const current = cast.getCurrentTime();
         const now = typeof current === "number" ? current : await current;
         if (Math.abs(now - target) > 0.25) await cast.seek(target);
@@ -220,9 +201,7 @@ export const SessionPlayer = ({
         const current = castPlayer.current?.getCurrentTime() ?? 0;
         media = typeof current === "number" ? current : await current;
       }
-      const wall =
-        (act.window === "terminal" ? terminalAnchor : browserAnchor) +
-        media * 1000;
+      const wall = (act.window === "terminal" ? terminalAnchor : browserAnchor) + media * 1000;
       let next = Math.max(tRef.current, (wall - sessionStart) / 1000);
       if (next >= act.to - 0.05) {
         if (index === acts.length - 1) {
@@ -263,9 +242,7 @@ export const SessionPlayer = ({
   // Live URL: the last main-frame navigation at-or-before "now" (wall).
   const wallNow = sessionStart + t * 1000;
   const currentUrl =
-    [...(timeline.nav ?? [])]
-      .reverse()
-      .find((entry) => entry.at <= wallNow + 250)?.url ?? "";
+    [...(timeline.nav ?? [])].reverse().find((entry) => entry.at <= wallNow + 250)?.url ?? "";
 
   // Trace markers in session time (only the ones inside the session).
   const traceMarks = useMemo(
@@ -346,9 +323,7 @@ export const SessionPlayer = ({
                 muted
                 playsInline
                 preload="auto"
-                onLoadedMetadata={(event) =>
-                  setVideoDuration(event.currentTarget.duration)
-                }
+                onLoadedMetadata={(event) => setVideoDuration(event.currentTarget.duration)}
               />
             </div>
           </div>
@@ -361,9 +336,7 @@ export const SessionPlayer = ({
               className="scrub"
               onClick={(event) => {
                 const rect = event.currentTarget.getBoundingClientRect();
-                void seekTo(
-                  ((event.clientX - rect.left) / rect.width) * duration,
-                );
+                void seekTo(((event.clientX - rect.left) / rect.width) * duration);
               }}
             >
               {ready &&
@@ -387,12 +360,7 @@ export const SessionPlayer = ({
                     title={`${mark.url.replace(/^https?:\/\/[^/]+/, "")} → trace ${mark.id.slice(0, 8)}`}
                   />
                 ))}
-              {ready && (
-                <span
-                  className="head"
-                  style={{ left: `${(t / duration) * 100}%` }}
-                />
-              )}
+              {ready && <span className="head" style={{ left: `${(t / duration) * 100}%` }} />}
             </div>
             <span className="clock">
               {fmt(t)} / {ready ? fmt(duration) : "…"}
@@ -432,9 +400,7 @@ export const SessionPlayer = ({
                     </span>
                     <span
                       className={`trace-ms${slow ? " slow" : ""}${
-                        mark.status !== undefined && mark.status >= 400
-                          ? " err"
-                          : ""
+                        mark.status !== undefined && mark.status >= 400 ? " err" : ""
                       }`}
                     >
                       {mark.ms !== undefined ? `${mark.ms}ms` : "·"}