change conditions of build + debug

Author: woopxwoop

.github/workflows/playwright.yml

@@ -28,7 +28,9 @@ jobs:
       - name: Run Playwright tests
         run: pnpm exec playwright test
         env:
+          CI: 'true'
           PLAYWRIGHT_E2E: '1'
+          PLAYWRIGHT_DEBUG_NET: '1'
           PUBLIC_SUPABASE_URL: ${{ secrets.PUBLIC_SUPABASE_URL }}
           PUBLIC_SUPABASE_KEY: ${{ secrets.PUBLIC_SUPABASE_KEY }}
           PRIVATE_SUPABASE_KEY: ${{ secrets.PRIVATE_SUPABASE_KEY }}

playwright.config.ts

@@ -1,52 +1,54 @@
 /// <reference types="node" />
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
+
+const onCI = !!process.env.CI;
 
 /**
- * See https://playwright.dev/docs/test-configuration.
+ * CI uses a production Node build — `vite dev` on Ubuntu runners was serving
+ * SSR HTML while client modules never hydrated enough to call /api/teams.
+ * Local keeps `vite dev` for fast iteration.
  */
+const webServerCommand = onCI
+  ? "pnpm build && PORT=5173 HOST=127.0.0.1 ORIGIN=http://127.0.0.1:5173 node build"
+  : process.platform === "win32"
+    ? "pnpm dev"
+    : "PLAYWRIGHT_E2E=1 pnpm dev";
+
 export default defineConfig({
-  testDir: './tests',
-  globalSetup: './tests/global-setup.ts',
+  testDir: "./tests",
+  globalSetup: "./tests/global-setup.ts",
   fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
-  // Cold `vite dev` on CI can take >15s before client effects fire /api/teams.
+  forbidOnly: onCI,
+  retries: onCI ? 2 : 0,
+  workers: onCI ? 1 : undefined,
   timeout: 60_000,
   expect: {
-    timeout: process.env.CI ? 30_000 : 10_000,
+    timeout: onCI ? 30_000 : 10_000,
   },
-  reporter: 'html',
+  reporter: "html",
   use: {
-    baseURL: 'http://localhost:5173',
-    trace: 'on-first-retry',
-    serviceWorkers: 'block',
+    baseURL: "http://127.0.0.1:5173",
+    trace: "on-first-retry",
+    serviceWorkers: "block",
     navigationTimeout: 60_000,
   },
 
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
   ],
 
   webServer: {
-    // Inline env so PLAYWRIGHT_E2E is set before Vite snapshots process.env
-    // (Kit's $env/dynamic/private is config-time; we also read process.env live).
-    command:
-      process.platform === 'win32'
-        ? 'pnpm dev'
-        : 'PLAYWRIGHT_E2E=1 pnpm dev',
-    url: 'http://localhost:5173',
-    // Only reuse a server that was already started with PLAYWRIGHT_E2E=1.
-    // A plain `pnpm dev` would miss SSR fixtures and greenwash false failures.
-    reuseExistingServer:
-      !process.env.CI && process.env.PLAYWRIGHT_E2E === '1',
-    timeout: 120_000,
+    command: webServerCommand,
+    url: "http://127.0.0.1:5173",
+    reuseExistingServer: !onCI && process.env.PLAYWRIGHT_E2E === "1",
+    timeout: 180_000,
     env: {
       ...process.env,
-      PLAYWRIGHT_E2E: '1',
+      PLAYWRIGHT_E2E: "1",
+      PLAYWRIGHT_DEBUG_NET: onCI ? "1" : process.env.PLAYWRIGHT_DEBUG_NET ?? "",
     },
   },
 });

tests/abyss.spec.ts

@@ -1,10 +1,11 @@
 import { test, expect } from "@playwright/test";
 import { installApiMocks } from "./helpers";
+import { attachBrowserDebug } from "./debug";
 
-/** Client /api/* can lag SSR on cold Vite — keep waits aligned with config.timeout. */
 const CLIENT_API_TIMEOUT = 45_000;
 
 test.beforeEach(async ({ page }) => {
+  attachBrowserDebug(page);
   await installApiMocks(page);
 });
 

tests/debug.ts

@@ -0,0 +1,37 @@
+import type { Page } from "@playwright/test";
+
+/** Verbose browser/network logs for CI diagnosis (PLAYWRIGHT_DEBUG_NET=1 or CI). */
+export function attachBrowserDebug(page: Page): void {
+  const enabled =
+    process.env.PLAYWRIGHT_DEBUG_NET === "1" || process.env.CI === "true" || process.env.CI === "1";
+  if (!enabled) return;
+
+  page.on("console", (msg) => {
+    // eslint-disable-next-line no-console
+    console.log(`[browser:${msg.type()}]`, msg.text());
+  });
+  page.on("pageerror", (err) => {
+    // eslint-disable-next-line no-console
+    console.log("[browser ERROR]", err.message);
+  });
+  page.on("request", (req) => {
+    try {
+      const p = new URL(req.url()).pathname;
+      if (p.includes("/api/") || p.endsWith(".js") || p.includes("nodes/")) {
+        // eslint-disable-next-line no-console
+        console.log("[browser REQ]", req.method(), p);
+      }
+    } catch {
+      /* ignore */
+    }
+  });
+  page.on("requestfailed", (req) => {
+    // eslint-disable-next-line no-console
+    console.log(
+      "[browser FAIL]",
+      req.method(),
+      req.url(),
+      req.failure()?.errorText,
+    );
+  });
+}

tests/global-setup.ts

@@ -1,9 +1,9 @@
 /**
- * Warm Vite's dep optimizer / route modules before the suite so the first
- * client-hydrated tests do not burn their wait budgets on cold compiles.
+ * Warm the app before the suite. On CI this hits the production Node server
+ * (see playwright.config.ts); locally it warms vite dev.
  */
 async function globalSetup() {
-  const base = process.env.PLAYWRIGHT_BASE_URL ?? "http://localhost:5173";
+  const base = process.env.PLAYWRIGHT_BASE_URL ?? "http://127.0.0.1:5173";
   const paths = ["/", "/abyss", "/stygian", "/pulls", "/api/static"];
   await Promise.all(
     paths.map(async (path) => {

tests/helpers.ts

@@ -80,12 +80,20 @@ export async function installApiMocks(
   });
 
   await page.route("**/api/teams", async (route: Route) => {
+    if (process.env.PLAYWRIGHT_DEBUG_NET === "1" || process.env.CI) {
+      // eslint-disable-next-line no-console
+      console.log("[mock] /api/teams intercepted", route.request().method());
+    }
     await route.fulfill({
       json: { abyssTeams, stygianTeams },
     });
   });
 
   await page.route("**/api/nearmiss", async (route: Route) => {
+    if (process.env.PLAYWRIGHT_DEBUG_NET === "1" || process.env.CI) {
+      // eslint-disable-next-line no-console
+      console.log("[mock] /api/nearmiss intercepted", route.request().method());
+    }
     await route.fulfill({
       json: { nearMissTeams, nearMissPairs },
     });

tests/lazy-api.spec.ts

@@ -1,11 +1,13 @@
 import { test, expect } from "@playwright/test";
 import { installApiMocks, trackApiPaths } from "./helpers";
+import { attachBrowserDebug } from "./debug";
 
 const CLIENT_API_TIMEOUT = 45_000;
 
 test("home and settings do not fetch owned teams or near-miss", async ({
   page,
 }) => {
+  attachBrowserDebug(page);
   await installApiMocks(page);
   const hits = trackApiPaths(page, ["/api/teams", "/api/nearmiss"]);
 
@@ -23,6 +25,7 @@ test("home and settings do not fetch owned teams or near-miss", async ({
 });
 
 test("abyss fetches /api/teams but not /api/nearmiss", async ({ page }) => {
+  attachBrowserDebug(page);
   await installApiMocks(page);
   const hits = trackApiPaths(page, ["/api/teams", "/api/nearmiss"]);
 
@@ -40,6 +43,7 @@ test("abyss fetches /api/teams but not /api/nearmiss", async ({ page }) => {
 });
 
 test("pulls fetches /api/teams and /api/nearmiss", async ({ page }) => {
+  attachBrowserDebug(page);
   await installApiMocks(page);
   const hits = trackApiPaths(page, ["/api/teams", "/api/nearmiss"]);
 

tests/pulls.spec.ts

@@ -4,10 +4,12 @@ import {
   NEAR_MISS_SINGLE,
   STYGIAN_OWNED_BASELINE,
 } from "./helpers";
+import { attachBrowserDebug } from "./debug";
 
 const CLIENT_API_TIMEOUT = 45_000;
 
 test("pulls ranks a mocked near-miss suggestion", async ({ page }) => {
+  attachBrowserDebug(page);
   await installApiMocks(page, {
     stygianTeams: [STYGIAN_OWNED_BASELINE],
     nearMissTeams: [NEAR_MISS_SINGLE],
@@ -33,6 +35,7 @@ test("pulls ranks a mocked near-miss suggestion", async ({ page }) => {
 test("pulls shows empty state when near-miss has nothing useful", async ({
   page,
 }) => {
+  attachBrowserDebug(page);
   await installApiMocks(page, {
     stygianTeams: [STYGIAN_OWNED_BASELINE],
     nearMissTeams: [],