ci: reliably install WebKit for mobile Playwright e2e

.github/workflows/e2e.yml

@@ -34,21 +34,25 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Resolve Playwright version
+        id: playwright-version
+        run: echo "version=$(pnpm exec playwright --version | awk '{print $2}')" >> "$GITHUB_OUTPUT"
+
       - name: Cache Playwright browsers
         uses: actions/cache@v4
-        id: playwright-cache
         with:
           path: ~/.cache/ms-playwright
-          key: playwright-chromium-webkit-${{ runner.os }}-${{ hashFiles('widget/pnpm-lock.yaml') }}
+          # Key on the resolved Playwright version: each version pins specific
+          # browser builds (e.g. webkit-2272), so a bump auto-invalidates the cache.
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
 
-      - name: Install Playwright browsers
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
+      # Run unconditionally. `playwright install` is idempotent: it only downloads
+      # browsers missing from the (possibly cached) ms-playwright dir, so a partial
+      # or stale cache self-heals here instead of permanently skipping the binary
+      # install. --with-deps re-applies system libraries, which are not cached.
+      - name: Install Playwright browsers and system dependencies
         run: pnpm exec playwright install --with-deps chromium webkit
 
-      - name: Install Playwright system deps
-        if: steps.playwright-cache.outputs.cache-hit == 'true'
-        run: pnpm exec playwright install-deps chromium webkit
-
       - name: Run E2E tests
         run: pnpm e2e
 

widget/package.json

@@ -63,7 +63,7 @@
     "test:coverage": "vitest run --coverage",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
-    "e2e:install": "playwright install chromium",
+    "e2e:install": "playwright install chromium webkit",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",

widget/playwright.config.ts

@@ -28,7 +28,9 @@ export default defineConfig({
       testIgnore: ["**/mobile.spec.ts"],
     },
     {
-      name: "chromium-mobile",
+      // iPhone 13 emulation runs on WebKit (Mobile Safari), not Chromium —
+      // name it accordingly so CI installs the right browser binary.
+      name: "mobile-safari",
       use: { ...devices["iPhone 13"] },
       testMatch: ["**/mobile.spec.ts"],
     },