From 71db49bf1e34fa60fe31309991e7259e8636b2c4 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Mon, 24 Nov 2025 19:04:40 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20ci:=20optimize=20Playwright=20in?=
 =?UTF-8?q?stallation=20with=20caching?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses slow CI caused by Playwright browser installation.

## Changes

### New setup-playwright composite action
- Caches ~/.cache/ms-playwright keyed by Playwright version
- On cache hit: skips browser download, only runs install-deps
- Installs only chromium (sufficient for E2E and Storybook, ~3x smaller)

### Updated jobs
- storybook-test: uses new composite action
- e2e-test: uses new composite action (replaces 3 separate steps)

## Expected Impact

| Scenario | Before | After |
|----------|--------|-------|
| Cache hit | Download all browsers | Skip download (save ~90s) |
| Cache miss | Download all browsers | Download chromium only |

_Generated with `mux`_
---
 .github/actions/setup-playwright/action.yml | 36 +++++++++++++++++++++
 .github/workflows/ci.yml                    | 11 ++-----
 2 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 .github/actions/setup-playwright/action.yml

diff --git a/.github/actions/setup-playwright/action.yml b/.github/actions/setup-playwright/action.yml
new file mode 100644
index 0000000000..d64bb82ae1
--- /dev/null
+++ b/.github/actions/setup-playwright/action.yml
@@ -0,0 +1,36 @@
+name: "Setup Playwright"
+description: "Install Playwright browsers and dependencies with caching"
+inputs:
+  browsers:
+    description: "Space-separated list of browsers to install (e.g., 'chromium', 'chromium webkit')"
+    required: false
+    default: "chromium"
+runs:
+  using: "composite"
+  steps:
+    - name: Get Playwright version
+      id: playwright-version
+      shell: bash
+      run: |
+        # Extract Playwright version from bun.lock
+        VERSION=$(grep -A1 '"playwright":' bun.lock | grep -oP '"\K[0-9]+\.[0-9]+\.[0-9]+' | head -1)
+        echo "version=$VERSION" >> $GITHUB_OUTPUT
+        echo "Playwright version: $VERSION"
+
+    - name: Cache Playwright browsers
+      id: cache-playwright
+      uses: actions/cache@v4
+      with:
+        path: ~/.cache/ms-playwright
+        key: ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}-${{ inputs.browsers }}
+        restore-keys: |
+          ${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}-
+
+    - name: Install Playwright browsers
+      if: steps.cache-playwright.outputs.cache-hit != 'true'
+      shell: bash
+      run: bun x playwright install ${{ inputs.browsers }}
+
+    - name: Install Playwright system dependencies
+      shell: bash
+      run: bun x playwright install-deps ${{ inputs.browsers }}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 5d63c54d58..86bcea98b0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -134,8 +134,7 @@ jobs:
 
       - uses: ./.github/actions/setup-mux
 
-      - name: Install Playwright browsers
-        run: bun x playwright install --with-deps
+      - uses: ./.github/actions/setup-playwright
 
       - name: Build Storybook
         run: make storybook-build
@@ -160,16 +159,12 @@ jobs:
 
       - uses: ./.github/actions/setup-mux
 
-      - name: Install system dependencies
+      - name: Install xvfb
         run: |
           sudo apt-get update
           sudo apt-get install -y xvfb
 
-      - name: Install Playwright runtime dependencies
-        run: bun x playwright install-deps
-
-      - name: Install Playwright browsers
-        run: bun x playwright install --with-deps
+      - uses: ./.github/actions/setup-playwright
 
       - name: Run e2e tests
         run: xvfb-run -a make test-e2e