Playwright-CI-Caching

Caching von Playwright-Browsern in CI/CD

Wann dieser Skill verwendet werden sollte

Verwenden Sie diesen Skill, wenn:

• Sie CI/CD für ein Projekt mit Playwright-E2E-Tests einrichten
• Build-Zeiten aufgrund von Browser-Downloads (~400 MB, 1-2 Minuten) langsam sind
• Sie eine automatische Cache-Invalidierung wünschen, wenn sich die Playwright-Version ändert
• Sie GitHub Actions oder Azure DevOps-Pipelines verwenden

Das Problem

Playwright-Browser (~400 MB) müssen bei jedem CI-Durchlauf standardmäßig heruntergeladen werden. Dies:

• Fügt jedem Build 1-2 Minuten hinzu
• Verschwendet Bandbreite
• Kann bei vorübergehenden Netzwerkproblemen fehlschlagen
• Verlangsamt PR-Feedbackschleifen

Kernmuster

1. Playwright-Version extrahieren aus Directory.Packages.props (CPM) zur Verwendung als Cache-Schlüssel
2. Browser-Binärdateien cachen mittels plattformgerechter Pfade
3. Bedingte Installation – nur bei Cache-Fehlschlag herunterladen
4. Automatischer Cache-Bust – Schlüssel enthält Version, sodass Paketupgrades den Cache invalidieren

Cache-Pfade nach Betriebssystem

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

GitHub Actions

- name: Playwright-Version abrufen
  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: Playwright-Browser cachen
  id: playwright-cache
  uses: actions/cache@v4
  with:
    path: ~/.cache/ms-playwright
    key: ${{ runner.os }}-playwright-${{ env.PlaywrightVersion }}

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

Multi-OS GitHub Actions

Für Workflows, die auf mehreren Betriebssystemen ausgeführt werden:

- name: Playwright-Browser cachen
  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: 'Playwright-Version abrufen'
  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: 'Playwright-Browser cachen'
  inputs:
    key: 'playwright | "$(Agent.OS)" | $(PlaywrightVersion)'
    path: '$(HOME)/.cache/ms-playwright'
    cacheHitVar: 'PlaywrightCacheHit'

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

Hilfsskript: playwright.ps1

Erstellen Sie ein build/playwright.ps1-Skript, das die Playwright-CLI erkennt und ausführt. Dies abstrahiert den Speicherort der Playwright-CLI, der je nach Projektstruktur variiert.

# build/playwright.ps1
# Erkennt Microsoft.Playwright.dll und führt die gebündelte Playwright-CLI aus

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

# Finden der Playwright-DLL (nach 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 nicht gefunden. Führen Sie zuerst 'dotnet build' aus."
    exit 1
}

$playwrightDir = $playwrightDll.DirectoryName

# Finden der Playwright-CLI (Pfad variiert je nach Betriebssystem und Node-Version)
$playwrightCmd = Get-ChildItem -Path "$playwrightDir/.playwright/node" -Recurse -Filter "playwright.cmd" -ErrorAction SilentlyContinue |
    Select-Object -First 1

if (-not $playwrightCmd) {
    # Unix-ausführbare Datei versuchen
    $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 nicht gefunden in $playwrightDir/.playwright/node"
    exit 1
}

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

Verwendung:

# Browser installieren
./build/playwright.ps1 install --with-deps

# Bestimmten Browser installieren
./build/playwright.ps1 install chromium

# Installierte Browser anzeigen
./build/playwright.ps1 install --dry-run

Voraussetzungen

Dieses Muster setzt voraus:

1. Central Package Management (CPM) mit Directory.Packages.props:

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

2. Das Projekt wurde erstellt bevor playwright.ps1 ausgeführt wird (damit DLLs existieren)

3. PowerShell verfügbar auf CI-Agenten (vorinstalliert auf GitHub Actions und Azure DevOps)

Warum Versionsbasierte Cache-Schlüssel wichtig sind

Die Verwendung der Playwright-Version im Cache-Schlüssel stellt sicher:

• Automatische Invalidierung bei einem Upgrade von Playwright
• Keine veralteten Browser-Binärdateien, die nicht zur SDK-Version passen
• Kein manuelles Leeren des Caches nach Versionssprüngen erforderlich

Wenn Sie den Cache-Schlüssel fest codieren (z. B. playwright-browsers-v1), müssen Sie ihn bei jedem Upgrade von Playwright manuell erhöhen, oder Sie erhalten kryptische Versionskonfliktfehler.

Fehlerbehebung

Cache wird nicht verwendet

1. Überprüfen Sie, ob der Schritt zur Versionsextraktion die korrekte Version ausgibt
2. Prüfen Sie, ob der Cache-Pfad Ihrem Betriebssystem entspricht
3. Stellen Sie sicher, dass Directory.Packages.props existiert und das Playwright-Paket enthält

"Browser nicht gefunden" nach Cache-Treffer

Die gecachten Browser entsprechen nicht der Playwright-SDK-Version. Dies passiert, wenn:

• Der Cache-Schlüssel die Version nicht enthält
• Die Versionsextraktion stillschweigend fehlgeschlagen ist

Lösung: Stellen Sie sicher, dass die Playwright-Version im Cache-Schlüssel enthalten ist.

playwright.ps1 kann die DLL nicht finden

Führen Sie dotnet build oder dotnet restore vor dem Skript aus. Die Playwright-DLL existiert erst nach der NuGet-Wiederherstellung.

Referenzen

Dieses Muster ist in Produktionsprojekten erprobt:

• petabridge/geekedin
• petabridge/DrawTogether.NET

Verwandte Skills

• dotnet-skills:playwright-blazor – Schreiben von Playwright-Tests für Blazor-Anwendungen
• dotnet-skills:project-structure – Einrichtung des Central Package Management