playwright-ci-caching

Aaronontheweb/dotnet-skillsDeveloper ToolsReview advisedSnapshot 8e2f2baf6de0

Installs: 0

Summary

Cache Playwright browser binaries in CI/CD pipelines (GitHub Actions, Azure DevOps) to avoid 1-2 minute download overhead on every build.

SKILL.md

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

Extract Playwright version from Directory.Packages.props (CPM) to use as cache key
Cache browser binaries using platform-appropriate paths
Conditional install - only download on cache miss
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

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

- task: PowerShell@2
  displayName: 'Get Playwright Version'
  inputs:
    targetType: 'inline'
    script: |
      [xml]$props = Get-Content "Directory.Packages.props"
      $version = $props.Project.ItemGroup.PackageVersion |
        Where-Object { $_.Include -eq "Microsoft.Playwright" } |
        Select-Object -ExpandProperty Version
      Write-Host "##vso[task.setvariable variable=PlaywrightVersion]$version"

- task: Cache@2
  displayName: 'Cache Playwright Browsers'
  inputs:
    key: 'playwright | "$(Agent.OS)" | $(PlaywrightVersion)'
    path: '$(HOME)/.cache/ms-playwright'
    cacheHitVar: 'PlaywrightCacheHit'

- task: PowerShell@2
  displayName: 'Install Playwright Browsers'
  condition: ne(variables['PlaywrightCacheHit'], 'true')
  inputs:
    filePath: 'build/playwright.ps1'
    arguments: 'install --with-deps'

# build/playwright.ps1
# Discovers Microsoft.Playwright.dll and runs the bundled Playwright CLI

param(
    [Parameter(ValueFromRemainingArguments = $true)]
    [string[]]$Arguments
)

# Find the Playwright DLL (after dotnet build/restore)
$playwrightDll = Get-ChildItem -Path . -Recurse -Filter "Microsoft.Playwright.dll" -ErrorAction SilentlyContinue |
    Select-Object -First 1

if (-not $playwrightDll) {
    Write-Error "Microsoft.Playwright.dll not found. Run 'dotnet build' first."
    exit 1
}

$playwrightDir = $playwrightDll.DirectoryName

# Find the playwright CLI (path varies by OS and node version)
$playwrightCmd = Get-ChildItem -Path "$playwrightDir/.playwright/node" -Recurse -Filter "playwright.cmd" -ErrorAction SilentlyContinue |
    Select-Object -First 1

if (-not $playwrightCmd) {
    # Try Unix executable
    $playwrightCmd = Get-ChildItem -Path "$playwrightDir/.playwright/node" -Recurse -Filter "playwright" -ErrorAction SilentlyContinue |
        Where-Object { $_.Name -eq "playwright" } |
        Select-Object -First 1
}

if (-not $playwrightCmd) {
    Write-Error "Playwright CLI not found in $playwrightDir/.playwright/node"
    exit 1
}

Write-Host "Using Playwright CLI: $($playwrightCmd.FullName)"
& $playwrightCmd.FullName @Arguments

# Install browsers
./build/playwright.ps1 install --with-deps

# Install specific browser
./build/playwright.ps1 install chromium

# Show installed browsers
./build/playwright.ps1 install --dry-run

Central Package Management (CPM) with Directory.Packages.props:

<Project>
  <ItemGroup>
    <PackageVersion Include="Microsoft.Playwright" Version="1.40.0" />
  </ItemGroup>
</Project>

Project has been built before running playwright.ps1 (so DLLs exist)
PowerShell available on CI agents (pre-installed on GitHub Actions and Azure DevOps)

playwright-ci-caching

Summary

SKILL.md

Caching Playwright Browsers in CI/CD

When to Use This Skill

The Problem

Core Pattern

Cache Paths by OS

GitHub Actions

Multi-OS GitHub Actions

Azure DevOps

Helper Script: playwright.ps1

Prerequisites

Why Version-Based Cache Keys Matter

Troubleshooting

Cache not being used

"Browser not found" after cache hit

playwright.ps1 can't find the DLL

References

Related Skills

Related skills