chore: optimize Playwright test workflow and improve caching strategy

Co-authored-by: Copilot <copilot@github.com>

Author: Azgaar

.github/workflows/playwright.yml

@@ -4,22 +4,45 @@ on:
     branches: [ master ]
 jobs:
   test:
-    timeout-minutes: 60
+    timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v5
-    - uses: actions/setup-node@v5
-      with:
-        node-version: '24'
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npm run test:e2e
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: "24"
+          cache: "npm"
+      - name: Install dependencies
+        run: npm ci
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-chromium-${{ hashFiles('package-lock.json') }}
+      - name: Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
+      - name: Install Playwright system deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: npx playwright install-deps chromium
+      - name: Cache build output
+        id: dist-cache
+        uses: actions/cache@v4
+        with:
+          path: dist/
+          key: dist-${{ hashFiles('src/**', 'public/**', 'vite.config.ts',
+            'tsconfig.json', 'package-lock.json') }}
+      - name: Build app
+        if: steps.dist-cache.outputs.cache-hit != 'true'
+        run: npm run build
+      - name: Run Playwright tests
+        run: npm run test:e2e
+        env:
+          SKIP_BUILD: "1"
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

playwright.config.ts

@@ -1,13 +1,14 @@
 import { defineConfig, devices } from '@playwright/test'
 
 const isCI = !!process.env.CI
+const skipBuild = !!process.env.SKIP_BUILD
 
 export default defineConfig({
   testDir: './tests/e2e',
   fullyParallel: true,
   forbidOnly: isCI,
-  retries: isCI ? 2 : 0,
-  workers: isCI ? 1 : undefined,
+  retries: 0,
+  workers: isCI ? 2 : undefined,
   reporter: 'html',
   // Use OS-independent snapshot names (HTML content is the same across platforms)
   snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
@@ -24,9 +25,9 @@ export default defineConfig({
     },
   ],
   webServer: {
-    // In CI: build and preview for production-like testing
+    // In CI: build (done as a separate cached step) and preview for production-like testing
     // In dev: use vite dev server (faster, no rebuild needed)
-    command: isCI ? 'npm run build && npm run preview' : 'npm run dev',
+    command: isCI ? (skipBuild ? 'npm run preview' : 'npm run build && npm run preview') : 'npm run dev',
     url: isCI ? 'http://localhost:4173' : 'http://localhost:5173',
     reuseExistingServer: !isCI,
     timeout: 120000,