playwright-ci-caching

CI/CD での Playwright ブラウザーのキャッシュ

このスキルを使用する場面

次の場合にこのスキルを使用します。

• Playwright E2E テストを含むプロジェクトの CI/CD を設定するとき
• ブラウザーのダウンロード（約 400MB、1～2 分）が原因でビルド時間が長いとき
• Playwright のバージョンが変わったときにキャッシュを自動的に無効化したいとき
• GitHub Actions または Azure DevOps のパイプラインを使用するとき

問題

Playwright のブラウザー（約 400MB）は、既定では CI の実行ごとにダウンロードする必要があります。これにより、次の問題が発生します。

• ビルドのたびに 1～2 分追加される
• 帯域幅が無駄になる
• 一時的なネットワークの問題で失敗することがある
• PR のフィードバックループが遅くなる

基本パターン

1. キャッシュキーとして使うため、Directory.Packages.props（CPM）から Playwright のバージョンを抽出します
2. プラットフォームに適したパスを使ってブラウザーバイナリをキャッシュします
3. 条件付きインストールを行い、キャッシュミスの場合にのみダウンロードします
4. キャッシュを自動的に無効化します。キーにバージョンを含めるため、パッケージをアップグレードするとキャッシュが無効になります

OS 別のキャッシュパス

OS	パス
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

複数 OS 向けの 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 }}

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'

ヘルパースクリプト：playwright.ps1

Playwright CLI を検出して実行する build/playwright.ps1 スクリプトを作成します。これにより、プロジェクトの構造によって異なる Playwright CLI の場所を抽象化できます。

# 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

前提条件

このパターンでは、次の条件を前提とします。

1. Directory.Packages.props を使用した中央パッケージ管理（CPM）：

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

2. playwright.ps1 の実行前にプロジェクトをビルド済みであること（DLL が存在する状態）

3. CI エージェントで PowerShell が利用可能であること（GitHub Actions と Azure DevOps にはプリインストールされています）

バージョンベースのキャッシュキーが重要な理由

キャッシュキーに Playwright のバージョンを含めると、次のことが保証されます。

• Playwright のアップグレード時に自動的に無効化される
• SDK のバージョンに一致しない古いブラウザーバイナリが使われない
• バージョンを上げるたびに手動でキャッシュをクリアする必要がない

キャッシュキーをハードコード（例：playwright-browsers-v1）すると、Playwright をアップグレードするたびに手動でキーを変更する必要があります。そうしないと、原因の分かりにくいバージョン不一致エラーが発生します。

トラブルシューティング

キャッシュが使用されない

1. バージョン抽出のステップで正しいバージョンが出力されることを確認します
2. キャッシュパスが OS に一致していることを確認します
3. Directory.Packages.props が存在し、Playwright パッケージが含まれていることを確認します

キャッシュヒット後に「Browser not found」と表示される

キャッシュされたブラウザーが Playwright SDK のバージョンに一致していません。次の場合に発生します。

• キャッシュキーにバージョンが含まれていない
• バージョンの抽出に気付かないまま失敗した

対処法：キャッシュキーに Playwright のバージョンが含まれていることを確認します。

playwright.ps1 が DLL を見つけられない

スクリプトを実行する前に dotnet build または dotnet restore を実行します。Playwright DLL は NuGet の復元後にのみ存在します。

参照

このパターンは、実稼働プロジェクトで十分に検証されています。

• petabridge/geekedin
• petabridge/DrawTogether.NET

関連スキル

• dotnet-skills:playwright-blazor - Blazor アプリケーション向け Playwright テストの作成
• dotnet-skills:project-structure - 中央パッケージ管理の設定