Playwright CI/CD-Integration

Dieses Kapitel beschreibt, wie man Playwright-Tests in CI/CD-Pipelines integriert, einschließlich GitHub Actions und anderer gängiger CI-Plattformen.

GitHub Actions Integration

Wenn Sienpm init playwright@latestAdd GitHub Actions auswählen, generiert Playwright automatisch die Workflow-Konfiguration.

Automatisch generierter Workflow

Beispiel

# Dateipfad: .github/workflows/playwright.yml
name: Playwright-Tests

auf:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]

jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4      # 1. Code auschecken
      - uses: actions/setup-node@v4     # 2. Node.js installieren
        with:
          node-version: 20
      - name: Abhängigkeiten installieren
        run: npm ci                     # 3. Abhängigkeiten installieren
      - name: Playwright-Browser installieren
        run: npx playwright install --with-deps  # 4. Browser und Systemabhängigkeiten installieren
      - name: Playwright-Tests ausführen
        run: npx playwright test        # 5. Tests ausführen
      - uses: actions/upload-artifact@v4
        if: always()                    # 6. Testbericht hochladen (auch wenn Tests fehlschlagen)
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

CI-Testergebnisse anzeigen

Testprotokolle anzeigen

Auf der Actions-Seite des GitHub-Repositorys klicken Sie auf jeden Lauf, um detaillierte Testprotokolle anzuzeigen.

Die Ausgabe jedes Workers wird unabhängig angezeigt, was das Auffinden bestimmter fehlgeschlagener Tests erleichtert.

HTML-Bericht anzeigen

Wenn Sie konfiguriert habenreporter: 'html', können Sie von Artifacts herunterladenplaywright-report/um den vollständigen HTML-Bericht lokal anzuzeigen.

Bericht im Web veröffentlichen

Beispiel

# Dateipfad: .github/workflows/playwright.yml
# Den HTML-Bericht auf GitHub Pages bereitstellen (vereinfachtes Beispiel)
- name: Bericht hochladen
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

Andere CI-Plattformen

Jenkins

pipeline {
  agent any
  stages {
    stage('Install') {
      steps {
        sh 'npm ci'
        sh 'npx playwright install --with-deps'
      }
    }
    stage('Test') {
      steps {
        sh 'npx playwright test'
      }
    }
  }
  post {
    always {
      archiveArtifacts artifacts: 'playwright-report/**'
      junit 'test-results/junit.xml'
    }
  }
}

GitLab CI

Beispiel

# Dateipfad: .gitlab-ci.yml
playwright-tests:
  image: mcr.microsoft.com/playwright:v1.52.0-jammy
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 30 Tage

Playwright mit Docker ausführen

Microsoft stellt ein offizielles Docker-Image mit allen vorinstallierten Systemabhängigkeiten bereit, das sofort einsatzbereit ist.

Verwenden des offiziellen Images

# 拉取镜像
docker pull mcr.microsoft.com/playwright:v1.52.0-jammy

# 在容器中运行测试
docker run --rm -v $(pwd):/work -w /work \
  mcr.microsoft.com/playwright:v1.52.0-jammy \
  npx playwright test

Dockerfile-Beispiel

Beispiel

# Dateipfad: Dockerfile
FROM mcr.microsoft.com/playwright:v1.52.0-jammy

WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .

CMD ["npx", "playwright", "test"]

Bewährte Methoden für CI-Umgebungen

ÜbungBeschreibung
Verwenden Sie--with-depsnpx playwright install --with-depsLinux-Systemabhängigkeiten automatisch installieren
Playwright-Version fixierenInpackage.jsonDie Version in ... fixieren@playwright/testVersion, um versehentliche Upgrades in CI zu vermeiden
Browser zwischenspeichernCachems-playwrightVerzeichnis, um Browser nicht jedes Mal herunterzuladen
Die Anzahl der Worker steuernVerwenden Sieworkers: process.env.CI ? 1 : undefinedum den Ressourcenverbrauch in CI zu steuern
Timeout festlegenCI-Umgebungen sind langsamer als lokal, entsprechend erhöhentimeoutundretries
Testartefakte aufbewahrenTrace, Screenshots, Videos und Berichte als CI-Artefakte hochladen
Andere Erweiterungen