feat(e2e): comprehensive e2e coverage with screenshots, video, and CRG integration (#10)

New test suites:
- manual-tracking.spec.ts — Dashboard navigation, section rendering, sign out
- live-mode.spec.ts — Live scoreboard connection, API mocking, error handling
- live-tracker/graph.spec.ts — D3 score graph rendering, data points, reset
- live-tracker/visual-regression.spec.ts — Pixel-level baselines (toHaveScreenshot)
- integration/full-stack.spec.ts — Full CRG → API → web app pipeline (@integration)

New helpers:
- helpers/supabase-mock.ts — Mock PostgREST responses for dashboard pages

Playwright config:
- Enable screenshots on every test (was only-on-failure)
- Enable video retain-on-failure
- Add snapshot path template for visual regression
- Configure toHaveScreenshot with 1% pixel diff tolerance

CI pipeline:
- Add integration test job (CRG + scoreboard-api, main branch only)
- Upload visual regression snapshots as artifacts
- Upload all test results (not just on failure)
- Integration gate required before deploy to production

Author: a1ly404

.github/workflows/ci.yml

@@ -121,21 +121,29 @@ jobs:
         env:
           BASE_URL: http://localhost:5173
 
-      - name: Upload Playwright report
+      - name: Upload Playwright HTML report
         uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
           path: e2e/playwright-report/
           retention-days: 14
 
-      - name: Upload Playwright test results
+      - name: Upload Playwright test results (screenshots & videos)
         uses: actions/upload-artifact@v4
-        if: failure()
+        if: always()
         with:
           name: playwright-test-results
           path: e2e/test-results/
-          retention-days: 7
+          retention-days: 14
+
+      - name: Upload visual regression snapshots
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: visual-regression-snapshots
+          path: e2e/tests/**/*-snapshots/
+          retention-days: 14
 
   # ─────────────────────────────────────────────
   # 4. Type-check live-bridge service
@@ -162,12 +170,146 @@ jobs:
         working-directory: services/live-bridge
 
   # ─────────────────────────────────────────────
-  # 5. Deploy to Vercel (Production — main branch)
+  # 5. CRG Integration Tests (main branch only)
+  #
+  #    Spins up the real CRG scoreboard + the
+  #    Python scoreboard-api proxy and runs
+  #    integration-tagged Playwright tests against
+  #    the full stack.
+  #
+  #    This job is required to merge PRs into main
+  #    but does NOT run on dev pushes or PRs to dev.
+  # ─────────────────────────────────────────────
+  integration:
+    name: Integration Tests (CRG + API)
+    runs-on: ubuntu-latest
+    needs: [build, e2e]
+    if: github.ref == 'refs/heads/main' || github.base_ref == 'main'
+
+    env:
+      VITE_SUPABASE_URL: https://placeholder.supabase.co
+      VITE_SUPABASE_ANON_KEY: placeholder-anon-key
+      CI: true
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Checkout CRG Scoreboard
+        uses: actions/checkout@v4
+        with:
+          repository: rollerderby/scoreboard
+          path: scoreboard
+          ref: v2025.9
+
+      - name: Checkout Scoreboard API
+        uses: actions/checkout@v4
+        with:
+          repository: a1ly404/derby-scoreboard-api
+          path: scoreboard-api
+
+      # ── Java (for CRG) ──────────────────────────
+      - name: Setup Java 17
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: "17"
+
+      - name: Build CRG Scoreboard
+        run: ant compile
+        working-directory: scoreboard
+
+      # ── Python (for scoreboard-api) ──────────────
+      - name: Setup Python 3.12
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Install scoreboard-api dependencies
+        run: pip install -r requirements.txt
+        working-directory: scoreboard-api
+
+      # ── Node (for Playwright + monorepo) ─────────
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: "npm"
+
+      - name: Install dependencies (workspace root)
+        run: npm ci
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps chromium
+        working-directory: e2e
+
+      # ── Start services ───────────────────────────
+      - name: Start CRG Scoreboard (background)
+        run: |
+          java -Done-jar.silent=true \
+               -Dorg.eclipse.jetty.server.LEVEL=WARN \
+               -jar lib/crg-scoreboard.jar --port=8000 &
+          echo "Waiting for CRG to start..."
+          for i in $(seq 1 30); do
+            if curl -s http://localhost:8000/ > /dev/null 2>&1; then
+              echo "CRG is up on :8000"
+              break
+            fi
+            sleep 1
+          done
+        working-directory: scoreboard
+
+      - name: Start Scoreboard API (background)
+        run: |
+          python main.py \
+            --scoreboard-host localhost \
+            --scoreboard-port 8000 \
+            --host 0.0.0.0 \
+            --port 5001 &
+          echo "Waiting for Scoreboard API to start..."
+          for i in $(seq 1 15); do
+            if curl -s http://localhost:5001/health > /dev/null 2>&1; then
+              echo "Scoreboard API is up on :5001"
+              break
+            fi
+            sleep 1
+          done
+        working-directory: scoreboard-api
+
+      # ── Run integration tests ────────────────────
+      - name: Run integration Playwright tests
+        run: npx playwright test --grep @integration
+        working-directory: e2e
+        env:
+          BASE_URL: http://localhost:5173
+          SCOREBOARD_API_URL: http://localhost:5001
+          CRG_URL: http://localhost:8000
+          INTEGRATION: "true"
+
+      # ── Artifacts ────────────────────────────────
+      - name: Upload integration test report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: integration-report
+          path: e2e/playwright-report/
+          retention-days: 14
+
+      - name: Upload integration test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: integration-test-results
+          path: e2e/test-results/
+          retention-days: 14
+
+  # ─────────────────────────────────────────────
+  # 6. Deploy to Vercel (Production — main branch)
   # ─────────────────────────────────────────────
   deploy:
     name: Deploy to Vercel Production
     runs-on: ubuntu-latest
-    needs: [test, e2e]
+    needs: [test, e2e, integration]
     if: github.ref == 'refs/heads/main'
 
     steps:
@@ -185,7 +327,7 @@ jobs:
           # vercel.json lives at apps/web/vercel.json
 
   # ─────────────────────────────────────────────
-  # 6. Deploy to Vercel (Preview — dev branch / PRs)
+  # 7. Deploy to Vercel (Preview — dev branch / PRs)
   # ─────────────────────────────────────────────
   deploy-preview:
     name: Deploy to Vercel Preview

e2e/playwright.config.ts

@@ -25,10 +25,7 @@ export default defineConfig({
   // ── Timeouts ─────────────────────────────────────────────────────────────
   /** Max time one test can run before it is considered failed */
   timeout: 30_000,
-  expect: {
-    /** Max time expect() auto-retries before failing */
-    timeout: 5_000,
-  },
+
 
   // ── Parallelism & retries ─────────────────────────────────────────────────
   fullyParallel: true,
@@ -57,16 +54,33 @@ export default defineConfig({
      */
     baseURL: process.env.BASE_URL ?? 'http://localhost:5173',
 
-    /** Capture a screenshot automatically on test failure */
-    screenshot: 'only-on-failure',
+    /** Capture a screenshot on every test so we have a visual record */
+    screenshot: 'on',
 
-    /** Record video only when a test is retried (keeps storage reasonable) */
-    video: 'on-first-retry',
+    /**
+     * Record video on failure + first retry. Set to 'on' locally if you want
+     * full video coverage (larger artifacts).
+     */
+    video: 'retain-on-failure',
 
     /** Collect a Playwright trace on first retry for easier debugging */
     trace: 'on-first-retry',
   },
 
+  /**
+   * Visual regression settings for toHaveScreenshot().
+   * Baselines live in e2e/tests/<spec>.spec.ts-snapshots/.
+   */
+  snapshotPathTemplate:
+    '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}{ext}',
+  expect: {
+    timeout: 5_000,
+    toHaveScreenshot: {
+      /** Allow up to 1% pixel diff to absorb font-rendering jitter across OS / CI */
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+
   // ── Browser projects ──────────────────────────────────────────────────────
   projects: [
     {

e2e/tests/helpers/supabase-mock.ts

@@ -0,0 +1,92 @@
+import { type Page } from '@playwright/test'
+
+// ---------------------------------------------------------------------------
+// Supabase REST (PostgREST) mock
+// ---------------------------------------------------------------------------
+// The manual-tracking views (Dashboard, Players, Bouts, Teams) fetch data
+// from Supabase via the PostgREST proxy at `/rest/v1/<table>`.  In E2E tests
+// we don't have a real database, so we intercept every REST request and return
+// empty arrays (or the appropriate empty-result shape when `count` is used).
+//
+// This helper is designed to work alongside `mockSupabaseAuth` from
+// `./auth.ts` — install both before navigating so all network calls are
+// handled before the first render.
+// ---------------------------------------------------------------------------
+
+/**
+ * Tables the web app queries.  Each entry maps to an empty-array response
+ * so the UI renders its "empty state" instead of crashing on a network error.
+ */
+const MOCKED_TABLES = [
+  'bouts',
+  'players',
+  'teams',
+  'jams',
+  'player_teams',
+  'player_stats',
+] as const
+
+/**
+ * Intercept all Supabase PostgREST endpoints (`/rest/v1/*`) and return empty
+ * results for every table the app queries.
+ *
+ * Handles:
+ *  - Regular SELECT queries  → `[]`
+ *  - HEAD / count-only queries (`Prefer: count=exact`) → empty body with
+ *    `content-range: 0-0/0` header so the SDK reads `count` as 0
+ *  - INSERT / UPDATE / DELETE → 200 with `[]` (no-op)
+ *
+ * Call this **before** navigating so intercepts are active from the first
+ * request.
+ *
+ * @example
+ * ```ts
+ * import { mockSupabaseAuth, mockAuthAndNavigate } from './helpers/auth'
+ * import { mockSupabaseData } from './helpers/supabase-mock'
+ *
+ * test.beforeEach(async ({ page }) => {
+ *   await mockSupabaseData(page)
+ *   await mockAuthAndNavigate(page)
+ * })
+ * ```
+ */
+export async function mockSupabaseData(page: Page): Promise<void> {
+  // A single wildcard route covers all tables and query-string variants.
+  await page.route('**/rest/v1/**', async (route) => {
+    const request = route.request()
+    const method = request.method().toUpperCase()
+
+    // For HEAD requests (used by Supabase `select('id', { count: 'exact', head: true })`)
+    // return an empty range so the SDK derives `count === 0`.
+    if (method === 'HEAD') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        headers: {
+          'content-range': '*/0',
+          'access-control-expose-headers': 'content-range',
+        },
+        body: '',
+      })
+      return
+    }
+
+    // Check whether the caller asked for a count via the Prefer header.
+    const prefer = request.headers()['prefer'] ?? ''
+    const wantsCount = prefer.includes('count=exact')
+
+    const headers: Record<string, string> = {}
+    if (wantsCount) {
+      headers['content-range'] = '*/0'
+      headers['access-control-expose-headers'] = 'content-range'
+    }
+
+    // GET, POST, PATCH, DELETE — always return an empty array.
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      headers,
+      body: JSON.stringify([]),
+    })
+  })
+}