Caching Playwright Browsers in CI/CD

When to Use This Skill

Use this skill when:

• Setting up CI/CD for a project with Playwright E2E tests
• Build times are slow due to browser downloads (~400MB, 1-2 minutes)
• You want automatic cache invalidation when Playwright version changes
• Using GitHub Actions or Azure DevOps pipelines

The Problem

Playwright browsers (~400MB) must be downloaded on every CI run by default. This:

• Adds 1-2 minutes to every build
• Wastes bandwidth
• Can fail on transient network issues
• Slows down PR feedback loops

Core Pattern

1. Extract Playwright version from Directory.Packages.props (CPM) to use as cache key
2. Cache browser binaries using platform-appropriate paths
3. Conditional install - only download on cache miss
4. Automatic cache bust - key includes version, so package upgrades invalidate cache

Cache Paths by OS

OS	Path
Linux	~/.cache/ms-playwright
macOS	~/Library/Caches/ms-playwright
Windows	%USERPROFILE%\AppData\Local\ms-playwright

GitHub Actions

- name: Get Playwright Version
  shell: pwsh
  run: |
    $propsPath = "Directory.Packages.props"
    [xml]$props = Get-Content $propsPath
    $version = $props.Project.ItemGroup.PackageVersion |
      Where-Object { $_.Include -eq "Microsoft.Playwright" } |
      Select-Object -ExpandProperty Version
    echo "PlaywrightVersion=$version" >> $env:GITHUB_ENV

- name: Cache Playwright Browsers
  id: playwright-cache
  uses: actions/cache@v4
  with:
    path: ~/.cache/ms-playwright
    key: ${{ runner.os }}-playwright-${{ env.PlaywrightVersion }}

- name: Install Playwright Browsers
  if: steps.playwright-cache.outputs.cache-hit != 'true'
  shell: pwsh
  run: ./build/playwright.ps1 install --with-deps

Multi-OS GitHub Actions

For workflows that run on multiple operating systems: