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,23 @@ 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/viewer/src/App.tsx

@@ -151,7 +151,10 @@ const Matrix = () => {
 
 // ---------------------------------------------------------------------------
 // Run page: status + error + artifacts. The trace opens in Playwright's own
-// viewer (trace.playwright.dev fetches the zip from this server, client-side).
+// viewer, SELF-HOSTED at /trace-viewer (copied out of playwright-core by
+// rebuild-viewer.ts). trace.playwright.dev would work on localhost but not
+// over tailscale: it's HTTPS, this server is HTTP, and browsers block the
+// mixed-content fetch of trace.zip. Same-origin avoids all of it.
 // ---------------------------------------------------------------------------
 
 // The suite's motel (local OTLP store, booted by the global setup on a
@@ -204,9 +207,12 @@ const RunView = ({ target, slug }: { target: string; slug: string }) => {
   const film = has("film.mp4") ? "film.mp4" : null;
   const cast = has("terminal.cast") ? "terminal.cast" : null;
   const traceUrl = has("trace.zip")
-    ? `https://trace.playwright.dev/?trace=${encodeURIComponent(
-        new URL(`${base}/trace.zip`, window.location.href).toString(),
-      )}`
+    ? new URL(
+        `trace-viewer/index.html?trace=${encodeURIComponent(
+          new URL(`${base}/trace.zip`, window.location.href).toString(),
+        )}`,
+        window.location.href,
+      ).toString()
     : null;
   // The live two-recording player needs both recordings AND a focus
   // timeline whose clocks are anchored. Anything less falls back to