chore(ci): Use custom GHCR Playwright image for all Playwright jobs

mydea · claude · mydea · commit d873fcecbe97 · 2026-04-14T10:20:30.000+02:00
Build a custom Docker image extending the official Playwright image with
yarn pre-installed, push it to GHCR, and use it across all CI jobs that
need Playwright browsers.

- Add `.github/docker/playwright.Dockerfile` with yarn@1.22.22
- Add build workflow that pushes to GHCR on Dockerfile or Playwright
  version changes
- All Playwright jobs (browser tests, loader tests, Remix, E2E, canary,
  flaky-test-detector) now use the GHCR container image
- No more `npx playwright install` or browser caching logic anywhere

When bumping @playwright/test, also update the PLAYWRIGHT_IMAGE env var
in build.yml, canary.yml, and flaky-test-detector.yml.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/.github/docker/playwright.Dockerfile b/.github/docker/playwright.Dockerfile
@@ -0,0 +1,5 @@
+ARG PLAYWRIGHT_VERSION=1.56.1
+FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-noble
+
+# Install yarn (v1) for the monorepo
+RUN npm install -g yarn@1.22.22
diff --git a/.github/workflows/build-playwright-docker-image.yml b/.github/workflows/build-playwright-docker-image.yml
@@ -0,0 +1,37 @@
+name: Build Playwright Docker Image
+on:
+  push:
+    branches: [develop]
+    paths:
+      - '.github/docker/playwright.Dockerfile'
+      - 'dev-packages/browser-integration-tests/package.json'
+  workflow_dispatch:
+
+jobs:
+  build-image:
+    runs-on: ubuntu-24.04
+    permissions:
+      packages: write
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Get Playwright version
+        id: playwright
+        run: echo "version=$(node -p "require('./dev-packages/browser-integration-tests/package.json').devDependencies['@playwright/test'].replace('~', '')")" >> $GITHUB_OUTPUT
+
+      - name: Log in to GHCR
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          file: .github/docker/playwright.Dockerfile
+          push: true
+          build-args: |
+            PLAYWRIGHT_VERSION=${{ steps.playwright.outputs.version }}
+          tags: |
+            ghcr.io/${{ github.repository }}/playwright:v${{ steps.playwright.outputs.version }}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -27,6 +27,7 @@ concurrency:
 
 env:
   HEAD_COMMIT: ${{ github.event.inputs.commit || github.sha }}
+  PLAYWRIGHT_IMAGE: ghcr.io/getsentry/sentry-javascript/playwright:v1.56.1
 
   # WARNING: this disables cross os caching as ~ and
   # github.workspace evaluate to differents paths
@@ -479,7 +480,10 @@ jobs:
     if: needs.job_build.outputs.changed_browser_integration == 'true' || github.event_name != 'pull_request'
     runs-on: ubuntu-24.04-large-js
     container:
-      image: mcr.microsoft.com/playwright:v1.56.1-noble
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 25
     strategy:
       fail-fast: false
@@ -537,8 +541,6 @@ jobs:
         uses: actions/setup-node@v6
         with:
           node-version-file: 'package.json'
-      - name: Install yarn
-        run: npm install -g yarn@1.22.22
       - name: Restore caches
         uses: ./.github/actions/restore-cache
         with:
@@ -581,7 +583,10 @@ jobs:
     if: needs.job_build.outputs.changed_browser_integration == 'true' || github.event_name != 'pull_request'
     runs-on: ubuntu-24.04
     container:
-      image: mcr.microsoft.com/playwright:v1.56.1-noble
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 15
     strategy:
       fail-fast: false
@@ -604,8 +609,6 @@ jobs:
         uses: actions/setup-node@v6
         with:
           node-version-file: 'package.json'
-      - name: Install yarn
-        run: npm install -g yarn@1.22.22
       - name: Restore caches
         uses: ./.github/actions/restore-cache
         with:
@@ -772,6 +775,11 @@ jobs:
     needs: [job_get_metadata, job_build]
     if: needs.job_build.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
     runs-on: ubuntu-24.04
+    container:
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 15
     strategy:
       fail-fast: false
@@ -791,9 +799,6 @@ jobs:
         with:
           dependency_cache_key: ${{ needs.job_build.outputs.dependency_cache_key }}
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps chromium
-
       - name: Run integration tests
         env:
           NODE_VERSION: ${{ matrix.node }}
@@ -871,6 +876,11 @@ jobs:
       always() && needs.job_e2e_prepare.result == 'success' && needs.job_e2e_prepare.outputs.matrix != '{"include":[]}'
     needs: [job_get_metadata, job_build, job_e2e_prepare]
     runs-on: ubuntu-24.04
+    container:
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 15
     env:
       # We just use a dummy DSN here, only send to the tunnel anyhow
@@ -952,10 +962,6 @@ jobs:
         env:
           SENTRY_E2E_WORKSPACE_ROOT: ${{ github.workspace }}
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps chromium
-        working-directory: ${{ runner.temp }}/test-application
-
       - name: Run E2E test
         working-directory: ${{ runner.temp }}/test-application
         timeout-minutes: 10
@@ -999,6 +1005,11 @@ jobs:
       github.event.pull_request.head.repo.full_name == github.repository) && github.actor != 'dependabot[bot]'
     needs: [job_get_metadata, job_build, job_e2e_prepare]
     runs-on: ubuntu-24.04
+    container:
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 15
     env:
       E2E_TEST_AUTH_TOKEN: ${{ secrets.E2E_TEST_AUTH_TOKEN }}
@@ -1065,10 +1076,6 @@ jobs:
         timeout-minutes: 7
         run: ${{ matrix.build-command || 'pnpm test:build' }}
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps chromium
-        working-directory: ${{ runner.temp }}/test-application
-
       - name: Run E2E test
         working-directory: ${{ runner.temp }}/test-application
         timeout-minutes: 10
diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml
@@ -11,6 +11,7 @@ on:
 
 env:
   HEAD_COMMIT: ${{ github.event.inputs.commit || github.sha }}
+  PLAYWRIGHT_IMAGE: ghcr.io/getsentry/sentry-javascript/playwright:v1.56.1
 
   CACHED_BUILD_PATHS: |
     ${{ github.workspace }}/packages/*/*.tgz
@@ -55,6 +56,11 @@ jobs:
     name: E2E ${{ matrix.label }} Test
     needs: [job_e2e_prepare]
     runs-on: ubuntu-24.04
+    container:
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 20
     env:
       # We just use a dummy DSN here, only send to the tunnel anyhow
@@ -164,10 +170,6 @@ jobs:
         timeout-minutes: 7
         run: yarn ${{ matrix.build-command }}
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps chromium
-        working-directory: ${{ runner.temp }}/test-application
-
       - name: Run E2E test
         working-directory: ${{ runner.temp }}/test-application
         timeout-minutes: 15
diff --git a/.github/workflows/flaky-test-detector.yml b/.github/workflows/flaky-test-detector.yml
@@ -9,6 +9,7 @@ on:
 
 env:
   HEAD_COMMIT: ${{ github.event.inputs.commit || github.sha }}
+  PLAYWRIGHT_IMAGE: ghcr.io/getsentry/sentry-javascript/playwright:v1.56.1
 
   NX_CACHE_RESTORE_KEYS: |
     nx-Linux-${{ github.ref }}-${{ github.event.inputs.commit || github.sha }}
@@ -24,6 +25,11 @@ concurrency:
 jobs:
   flaky-detector:
     runs-on: ubuntu-24.04
+    container:
+      image: ${{ env.PLAYWRIGHT_IMAGE }}
+      credentials:
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
     timeout-minutes: 60
     name: 'Check tests for flakiness'
     # Also skip if PR is from master -> develop
@@ -49,9 +55,6 @@ jobs:
       - name: Build packages
         run: yarn build
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps chromium
-
       - name: Determine changed tests
         uses: dorny/paths-filter@v4.0.1
         id: changed
