Playwright CI/CD 缓存优化：加速 E2E 测试构建，节省带宽与时间

playwright-ci-caching by aaronontheweb/dotnet-skills

100 周安装量

675 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/aaronontheweb/dotnet-skills --skill playwright-ci-caching

自动化开发运维测试

🇨🇳中文介绍

在 CI/CD 中缓存 Playwright 浏览器

何时使用此技能

在以下情况下使用此技能：

为包含 Playwright E2E 测试的项目设置 CI/CD 时
由于浏览器下载导致构建时间缓慢时（约 400MB，1-2 分钟）
希望在 Playwright 版本更改时自动使缓存失效
使用 GitHub Actions 或 Azure DevOps 流水线时

问题描述

默认情况下，每次 CI 运行时都必须下载 Playwright 浏览器（约 400MB）。这会：

每次构建增加 1-2 分钟
浪费带宽
可能因临时网络问题而失败
减慢 PR 反馈循环

核心模式

提取 Playwright 版本：从 Directory.Packages.props（CPM）中提取，用作缓存键
缓存浏览器二进制文件：使用适合平台的路径
条件安装：仅在缓存未命中时下载
自动缓存失效：缓存键包含版本号，因此包升级会使缓存失效

各操作系统的缓存路径

操作系统	路径
Linux	`~/.cache/ms-playwright`

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

多操作系统 GitHub Actions

对于在多个操作系统上运行的流水线：

- 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'

辅助脚本：playwright.ps1

创建一个 build/playwright.ps1 脚本，用于发现并运行 Playwright CLI。这抽象了 Playwright CLI 的位置，该位置因项目结构而异。

# build/playwright.ps1
# 发现 Microsoft.Playwright.dll 并运行捆绑的 Playwright CLI

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

# 查找 Playwright DLL（在 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

# 查找 playwright CLI（路径因操作系统和 node 版本而异）
$playwrightCmd = Get-ChildItem -Path "$playwrightDir/.playwright/node" -Recurse -Filter "playwright.cmd" -ErrorAction SilentlyContinue |
    Select-Object -First 1

if (-not $playwrightCmd) {
    # 尝试 Unix 可执行文件
    $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

# 安装浏览器
./build/playwright.ps1 install --with-deps

# 安装特定浏览器
./build/playwright.ps1 install chromium

# 显示已安装的浏览器
./build/playwright.ps1 install --dry-run

中央包管理（CPM） 使用 Directory.Packages.props：

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

在运行 playwright.ps1 之前项目已构建（以便 DLL 存在）
CI 代理上有可用的 PowerShell（GitHub Actions 和 Azure DevOps 上已预装）

为什么基于版本的缓存键很重要

在缓存键中使用 Playwright 版本可确保：

升级 Playwright 时自动失效
没有过时的浏览器二进制文件与 SDK 版本不匹配
版本升级后无需手动清除缓存

如果硬编码缓存键（例如 playwright-browsers-v1），则每次升级 Playwright 时都需要手动更新它，否则会出现难以理解的版本不匹配错误。

验证版本提取步骤是否输出了正确的版本
检查缓存路径是否与您的操作系统匹配
确保 Directory.Packages.props 存在并包含 Playwright 包

缓存命中后出现“未找到浏览器”

缓存的浏览器与 Playwright SDK 版本不匹配。这发生在以下情况：

缓存键不包含版本号
版本提取静默失败

修复：确保 Playwright 版本包含在缓存键中。

playwright.ps1 找不到 DLL

在运行脚本之前运行 dotnet build 或 dotnet restore。Playwright DLL 仅在 NuGet 还原后才存在。

此模式已在生产项目中经过实战测试：

dotnet-skills:playwright-blazor - 为 Blazor 应用程序编写 Playwright 测试
dotnet-skills:project-structure - 中央包管理设置

🇺🇸English

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

Multi-OS GitHub Actions

For workflows that run on multiple operating systems:

- 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 }}

Azure DevOps

- 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'

Helper Script: playwright.ps1

Create a build/playwright.ps1 script that discovers and runs the Playwright CLI. This abstracts away the Playwright CLI location which varies by project structure.

# 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

Usage:

# 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

Prerequisites

This pattern assumes:

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)

Why Version-Based Cache Keys Matter

Using the Playwright version in the cache key ensures:

Automatic invalidation when you upgrade Playwright
No stale browser binaries that don't match the SDK version
No manual cache clearing needed after version bumps

If you hardcode the cache key (e.g., playwright-browsers-v1), you'll need to manually bump it every time you upgrade Playwright, or you'll get cryptic version mismatch errors.

Troubleshooting

Cache not being used

Verify the version extraction step outputs the correct version
Check that the cache path matches your OS
Ensure Directory.Packages.props exists and has the Playwright package

"Browser not found" after cache hit

The cached browsers don't match the Playwright SDK version. This happens when:

The cache key doesn't include the version
The version extraction failed silently

Fix: Ensure the Playwright version is in the cache key.

playwright.ps1 can't find the DLL

Run dotnet build or dotnet restore before running the script. The Playwright DLL only exists after NuGet restore.

References

This pattern is battle-tested in production projects:

Related Skills

dotnet-skills:playwright-blazor - Writing Playwright tests for Blazor applications
dotnet-skills:project-structure - Central Package Management setup

Weekly Installs

Repository

aaronontheweb/d…t-skills

GitHub Stars

488

First Seen

Feb 1, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code57

codex45

opencode42

github-copilot41

gemini-cli41

cursor40

Azure Data Explorer (Kusto) 查询技能：KQL数据分析、日志遥测与时间序列处理

130,600 周安装

Playwright CI/CD 缓存优化：加速 E2E 测试构建，节省带宽与时间

🇨🇳中文介绍

在 CI/CD 中缓存 Playwright 浏览器

何时使用此技能

问题描述

核心模式

各操作系统的缓存路径

相关 Skills

GitHub Actions

多操作系统 GitHub Actions

Azure DevOps

辅助脚本：playwright.ps1

先决条件

为什么基于版本的缓存键很重要

故障排除

缓存未被使用

缓存命中后出现“未找到浏览器”

playwright.ps1 找不到 DLL

参考

相关技能

🇺🇸English

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

最新 Skills