Tweak playwright caching (#33065)

* Install chromium-headless-shell instead of full Chromium

* Install chromium-headless-shell instead of full Chromium

* Standardise playwright caching

* Consolidate into a composite action

* Iterate

* Remove spurious step

.github/actions/setup-playwright/action.yml

@@ -0,0 +1,49 @@
+name: Setup playwright
+description: Installs playwright browsers and sets up a cache
+inputs:
+    needs-webkit:
+        description: Whether to install the additional dependencies for webkit
+        required: false
+        default: "false"
+    write-cache:
+        description: Whether to write the cache back
+        required: true
+runs:
+    using: composite
+    steps:
+        - name: Calculate cache key
+          id: key
+          run: |
+              PW_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}')
+              echo "key=${PREFIX}-playwright-${PW_VERSION}" >> $GITHUB_OUTPUT
+          shell: bash
+          env:
+              PREFIX: ${{ runner.os }}-${{ runner.arch }}
+
+        - name: Cache playwright binaries
+          uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+          if: inputs.write-cache == 'true'
+          id: cache
+          with:
+              path: ~/.cache/ms-playwright
+              key: ${{ steps.key.outputs.key }}
+
+        # When running in merge queue only restore the cache, never write it
+        - name: Restore playwright binaries cache
+          uses: actions/cache/restore@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
+          if: inputs.write-cache != 'true'
+          id: cache-restore
+          with:
+              path: ~/.cache/ms-playwright
+              key: ${{ steps.key.outputs.key }}
+
+        - name: Install Playwright browsers
+          if: (steps.cache.outputs.cache-hit || steps.cache-restore.outputs.cache-hit) != 'true'
+          shell: bash
+          run: pnpm playwright install --with-deps
+
+        # Some WebKit dependencies seem to lay outside the cache and will need to be installed separately
+        - name: Install system dependencies for WebKit
+          if: inputs.needs-webkit == 'true' && (steps.cache.outputs.cache-hit || steps.cache-restore.outputs.cache-hit) == 'true'
+          shell: bash
+          run: pnpm playwright install-deps webkit

.github/workflows/build-and-test.yaml

@@ -155,27 +155,11 @@ jobs:
             - name: Install dependencies
               run: pnpm install --frozen-lockfile
 
-            - name: Get installed Playwright version
+            - name: Setup playwright
-              id: playwright
+              uses: ./.github/actions/setup-playwright
-              run: echo "version=$(pnpm --silent -- playwright --version | awk '{print $2}')" >> $GITHUB_OUTPUT
-
-            - name: Cache playwright binaries
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
-              id: playwright-cache
               with:
-                  path: ~/.cache/ms-playwright
+                  needs-webkit: ${{ matrix.project == 'WebKit' }}
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}
+                  write-cache: ${{ github.event_name != 'merge_group' }}
-
-            - name: Install Playwright browsers
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              working-directory: apps/web
-              run: pnpm playwright install --with-deps --no-shell
-
-            - name: Install system dependencies for WebKit
-              # Some WebKit dependencies seem to lay outside the cache and will need to be installed separately
-              if: matrix.project == 'WebKit' && steps.playwright-cache.outputs.cache-hit == 'true'
-              working-directory: apps/web
-              run: pnpm playwright install-deps webkit
 
             # We skip tests tagged with @mergequeue when running on PRs, but run them in MQ and everywhere else
             - name: Run Playwright tests

.github/workflows/shared-component-visual-tests.yaml

@@ -36,22 +36,10 @@ jobs:
               working-directory: packages/shared-components
               run: pnpm install --frozen-lockfile
 
-            - name: Get installed Playwright version
+            - name: Setup playwright
-              working-directory: packages/shared-components
+              uses: ./.github/actions/setup-playwright
-              id: playwright
-              run: echo "version=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[].devDependencies["@playwright/test"].version')" >> $GITHUB_OUTPUT
-
-            - name: Cache playwright binaries
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
-              id: playwright-cache
               with:
-                  path: ~/.cache/ms-playwright
+                  write-cache: ${{ github.event_name != 'merge_group' }}
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
-
-            - name: Install Playwright browsers
-              working-directory: packages/shared-components
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: "pnpm playwright install --with-deps --only-shell"
 
             - name: Run Visual tests
               working-directory: packages/shared-components

.github/workflows/tests.yml

@@ -151,22 +151,10 @@ jobs:
                       packages/shared-components/node_modules/.vite/vitest
                   key: ${{ hashFiles('pnpm-lock.yaml') }}
 
-            - name: Get installed Playwright version
+            - name: Setup playwright
-              working-directory: packages/shared-components
+              uses: ./.github/actions/setup-playwright
-              id: playwright
-              run: echo "version=$(pnpm list @playwright/test --depth=0 --json | jq -r '.[].devDependencies["@playwright/test"].version')" >> $GITHUB_OUTPUT
-
-            - name: Cache playwright binaries
-              uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7 # v5
-              id: playwright-cache
               with:
-                  path: ~/.cache/ms-playwright
+                  write-cache: ${{ github.event_name != 'merge_group' }}
-                  key: ${{ runner.os }}-${{ runner.arch }}-playwright-${{ steps.playwright.outputs.version }}-onlyshell
-
-            - name: Install Playwright browsers
-              working-directory: packages/shared-components
-              if: steps.playwright-cache.outputs.cache-hit != 'true'
-              run: "pnpm playwright install --with-deps --only-shell"
 
             - name: Run tests
               working-directory: "packages/shared-components"

knip.ts

@@ -5,7 +5,12 @@ process.env.GITHUB_ACTIONS = "1";
 
 export default {
     workspaces: {
-        "packages/shared-components": {},
+        "packages/shared-components": {
+            ignoreDependencies: [
+                // Used for vitest browser tests
+                "@playwright/test",
+            ],
+        },
         "packages/playwright-common": {
             ignoreDependencies: [
                 // Used in playwright-screenshots.sh