fix(web): make e2e-ui command windows compatible

Author: pallyoung

package.json

@@ -23,7 +23,7 @@
     "acceptance:phase1": "pnpm --dir e2e exec playwright test --config playwright.config.ts --grep @phase1",
     "acceptance:phase1:update-baseline": "pnpm --dir e2e exec playwright test --config playwright.config.ts --grep @phase1 --update-snapshots",
     "acceptance:phase1:report": "node e2e/fixtures/report-writer.ts phase-1",
-    "e2e-ui": "sh -c 'rm -rf e2e-ui/output e2e-ui/test-results; pnpm --dir e2e-ui exec playwright test --config playwright.config.ts; status=$?; pnpm --dir e2e-ui exec tsx report/build-report.ts; exit $status'",
+    "e2e-ui": "tsx scripts/e2e-ui.ts",
     "lint": "biome lint .",
     "lint:fix": "biome lint --write .",
     "format": "biome format --write .",

scripts/e2e-ui.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, it, vi } from "vitest";
+import { runE2eUi } from "./e2e-ui.js";
+
+describe("runE2eUi", () => {
+  it("cleans stale output directories before running playwright and report generation", async () => {
+    const removeDir = vi.fn<(_: string) => Promise<void>>().mockResolvedValue(undefined);
+    const runCommand = vi
+      .fn<(command: string, args?: string[], options?: { cwd?: string }) => Promise<void>>()
+      .mockResolvedValue(undefined);
+
+    const code = await runE2eUi({
+      repoRoot: "/repo",
+      removeDir,
+      runCommand,
+    });
+
+    expect(code).toBe(0);
+    expect(removeDir).toHaveBeenCalledTimes(2);
+    expect(removeDir).toHaveBeenNthCalledWith(1, "/repo/e2e-ui/output");
+    expect(removeDir).toHaveBeenNthCalledWith(2, "/repo/e2e-ui/test-results");
+    expect(runCommand).toHaveBeenNthCalledWith(
+      1,
+      "pnpm",
+      ["--dir", "e2e-ui", "exec", "playwright", "test", "--config", "playwright.config.ts"],
+      { cwd: "/repo" }
+    );
+    expect(runCommand).toHaveBeenNthCalledWith(
+      2,
+      "pnpm",
+      ["--dir", "e2e-ui", "exec", "tsx", "report/build-report.ts"],
+      { cwd: "/repo" }
+    );
+  });
+
+  it("still builds the report when the playwright run fails and returns a non-zero exit code", async () => {
+    const runCommand = vi
+      .fn<(command: string, args?: string[], options?: { cwd?: string }) => Promise<void>>()
+      .mockRejectedValueOnce(new Error("playwright failed"))
+      .mockResolvedValueOnce(undefined);
+
+    const code = await runE2eUi({
+      repoRoot: "/repo",
+      removeDir: vi.fn().mockResolvedValue(undefined),
+      runCommand,
+    });
+
+    expect(code).toBe(1);
+    expect(runCommand).toHaveBeenCalledTimes(2);
+    expect(runCommand).toHaveBeenNthCalledWith(
+      2,
+      "pnpm",
+      ["--dir", "e2e-ui", "exec", "tsx", "report/build-report.ts"],
+      { cwd: "/repo" }
+    );
+  });
+
+  it("returns a non-zero exit code when report generation fails after a successful playwright run", async () => {
+    const runCommand = vi
+      .fn<(command: string, args?: string[], options?: { cwd?: string }) => Promise<void>>()
+      .mockResolvedValueOnce(undefined)
+      .mockRejectedValueOnce(new Error("report failed"));
+
+    const code = await runE2eUi({
+      repoRoot: "/repo",
+      removeDir: vi.fn().mockResolvedValue(undefined),
+      runCommand,
+    });
+
+    expect(code).toBe(1);
+    expect(runCommand).toHaveBeenCalledTimes(2);
+  });
+});

scripts/e2e-ui.ts

@@ -0,0 +1,75 @@
+import { rm } from "node:fs/promises";
+import { join } from "node:path";
+import { error, info, success } from "./shared/logger.js";
+import { ROOT_DIR } from "./shared/paths.js";
+import { isDirectExecution, run } from "./shared/process.js";
+
+export interface E2eUiRunnerDeps {
+  repoRoot?: string;
+  removeDir?: (target: string) => Promise<void>;
+  runCommand?: (command: string, args?: string[], options?: { cwd?: string }) => Promise<void>;
+}
+
+const E2E_UI_DIR = "e2e-ui";
+const PLAYWRIGHT_ARGS = [
+  "--dir",
+  E2E_UI_DIR,
+  "exec",
+  "playwright",
+  "test",
+  "--config",
+  "playwright.config.ts",
+];
+const REPORT_ARGS = ["--dir", E2E_UI_DIR, "exec", "tsx", "report/build-report.ts"];
+
+export async function runE2eUi(deps: E2eUiRunnerDeps = {}): Promise<number> {
+  const repoRoot = deps.repoRoot ?? ROOT_DIR;
+  const removeDir =
+    deps.removeDir ??
+    (async (target: string) => {
+      await rm(target, { recursive: true, force: true });
+    });
+  const runCommand =
+    deps.runCommand ??
+    ((command: string, args: string[] = [], options?: { cwd?: string }) =>
+      run(command, args, { cwd: options?.cwd }));
+
+  const outputDir = join(repoRoot, E2E_UI_DIR, "output");
+  const testResultsDir = join(repoRoot, E2E_UI_DIR, "test-results");
+
+  await Promise.all([removeDir(outputDir), removeDir(testResultsDir)]);
+
+  let exitCode = 0;
+
+  try {
+    info("Running e2e-ui Playwright capture suite...");
+    await runCommand("pnpm", PLAYWRIGHT_ARGS, { cwd: repoRoot });
+    success("e2e-ui Playwright capture suite finished.");
+  } catch (cause) {
+    exitCode = 1;
+    error(
+      cause instanceof Error
+        ? cause.message
+        : "e2e-ui Playwright capture suite failed unexpectedly."
+    );
+  }
+
+  try {
+    info("Building e2e-ui report...");
+    await runCommand("pnpm", REPORT_ARGS, { cwd: repoRoot });
+    success("e2e-ui report generated.");
+  } catch (cause) {
+    if (exitCode === 0) {
+      exitCode = 1;
+    }
+    error(cause instanceof Error ? cause.message : "e2e-ui report generation failed unexpectedly.");
+  }
+
+  return exitCode;
+}
+
+if (isDirectExecution(import.meta.url)) {
+  void runE2eUi().then((code) => {
+    process.exit(code);
+  });
+}