Cache Playwright browsers in CI (#33)

.github/workflows/deploy.yml

@@ -109,9 +109,27 @@ jobs:
       - name: 📥 Download deps
         uses: bahmutov/npm-install@v1
 
+      - name: 📥 Get Playwright version
+        id: playwright-version
+        run: echo "version=$(node -e "console.log(require('@playwright/test/package.json').version)")" >> "$GITHUB_OUTPUT"
+
+      - name: 🏦 Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
+
       - name: 📥 Install Playwright Browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        timeout-minutes: 15
         run: npm run test:e2e:install
 
+      - name: 📥 Install Playwright OS deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        timeout-minutes: 10
+        run: npx playwright install-deps chromium
+
       - name: 🛠 Setup Database
         run: npx prisma migrate deploy && npx prisma generate --sql
 
@@ -133,6 +151,12 @@ jobs:
         run: npm run build
 
       - name: 🎭 Playwright tests
+        env:
+          PW_TEST_SOURCE_TRANSFORM: ${{ github.workspace }}/tests/svg-import-stub.cjs
+          PW_TEST_SOURCE_TRANSFORM_SCOPE: ${{ github.workspace }}
+          # Node 22.18+ strips types by default and rejects parameter properties.
+          # Playwright 1.51 has its own TS transform; disable Node strip-types.
+          NODE_OPTIONS: --no-experimental-strip-types
         run: npx playwright test
 
       - name: 📊 Upload report

playwright.config.ts

@@ -1,11 +1,11 @@
+import path from 'node:path'
 import { defineConfig, devices } from '@playwright/test'
 import 'dotenv/config'
 
-process.env.PW_TEST_SOURCE_TRANSFORM = new URL(
-	'./tests/svg-import-stub.cjs',
-	import.meta.url,
-).pathname
-process.env.PW_TEST_SOURCE_TRANSFORM_SCOPE = process.cwd()
+const svgImportStubPath = path.join(process.cwd(), 'tests/svg-import-stub.cjs')
+
+process.env.PW_TEST_SOURCE_TRANSFORM ??= svgImportStubPath
+process.env.PW_TEST_SOURCE_TRANSFORM_SCOPE ??= process.cwd()
 
 const PORT = process.env.PORT || '3000'
 
@@ -20,9 +20,6 @@ export default defineConfig({
 	retries: process.env.CI ? 2 : 0,
 	workers: process.env.CI ? 1 : undefined,
 	reporter: 'html',
-	build: {
-		external: ['**/*.svg'],
-	},
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
@@ -40,6 +37,7 @@ export default defineConfig({
 	webServer: {
 		command: process.env.CI ? 'npm run start:mocks' : 'npm run dev',
 		port: Number(PORT),
+		timeout: 60 * 1000,
 		reuseExistingServer: true,
 		stdout: 'pipe',
 		stderr: 'pipe',