Teilen über

Schnellstart: Einrichten kontinuierlicher End-to-End-Tests mit der Vorschauversion von Microsoft Playwright Testing

  • Artikel

In dieser Schnellstartanleitung richten Sie kontinuierliche End-to-End-Tests mit der Vorschauversion von Microsoft Playwright Testing ein, um zu überprüfen, ob Ihre Web-App in verschiedenen Browsern und Betriebssystemen mit jedem Code-Commit ordnungsgemäß ausgeführt wird. Erfahren Sie, wie Sie Ihre Playwright-Tests einem CI-Workflow (Continuous Integration) hinzufügen, z. B. GitHub Actions, Azure-Pipelines oder anderen CI-Plattformen.

Nachdem Sie diese Schnellstartanleitung abgeschlossen haben, verfügen Sie über einen CI-Workflow, der Ihre Playwright-Testsammlung im großen Stil mit Microsoft Playwright Testing ausführt.

Wichtig

Microsoft Playwright Testing befindet sich derzeit in der Vorschauversion. Die zusätzlichen Nutzungsbestimmungen für Microsoft Azure-Vorschauen enthalten rechtliche Bedingungen. Sie gelten für diejenigen Azure-Features, die sich in der Beta- oder Vorschauversion befinden oder aber anderweitig noch nicht zur allgemeinen Verfügbarkeit freigegeben sind.

Voraussetzungen

Konfigurieren eines Dienstzugriffstokens

Microsoft Playwright Testing verwenden Zugriffstoken, um Benutzer zum Ausführen von Playwright-Tests mit dem Dienst zu autorisieren. Sie können ein Dienstzugriffstoken im Playwright-Portal generieren und dann das Zugriffstoken in der Dienstkonfigurationsdatei angeben.

Führen Sie die folgenden Schritte aus, um ein Zugriffstoken zu generieren und es als CI-Workflow-Geheimnis zu speichern:

  1. Melden Sie sich mit Ihrem Azure-Konto beim Playwright-Portal an.

  2. Wählen Sie das Symbol „Arbeitsbereichseinstellungen“ aus, und wechseln Sie dann zur Seite Zugriffstoken.

    Screenshot der Einstellungsseite für das Zugriffstoken im Playwright Testing-Portal.

  3. Wählen Sie Neues Token generieren aus, um ein neues Zugriffstoken für Ihren CI-Workflow zu erstellen.

  4. Geben Sie die Zugriffstokendetails ein, und wählen Sie dann Token generierenaus aus.

    Screenshot: Setupleitfaden im Playwright Testing-Portal, in dem die Schaltfläche „Token generieren“ hervorgehoben ist.

    Screenshot: Kopieren des generierten Zugriffstokens im Playwright Testing-Portal.

  5. Speichern Sie das Zugriffstoken in einem CI-Workflow-Geheimnis, um zu vermeiden, dass das Token in klarem Text in der Workflow-Definition angegeben wird:

    1. Wechseln Sie zu Ihrem GitHub-Repository, und wählen Sie Einstellungen>Geheimnisse und Variablen>Aktionen aus.

    2. Wählen Sie New repository secret (Neues Repositorygeheimnis) aus.

    3. Geben Sie die Details zum Geheimnis ein, und wählen Sie dann Geheimnis hinzufügen aus, um das CI/CD-Geheimnis zu erstellen.

      Parameter Wert
      Name PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Wert Fügen Sie das Arbeitsbereichszugriffstoken ein, das Sie zuvor kopiert haben.

    4. Wählen Sie OK aus, um das Wählen-Geheimen zu erstellen.

Abrufen der Endpunkt-URL für die Dienstregion

In der Dienstkonfiguration müssen Sie den regionsspezifischen Dienstendpunkt bereitstellen. Der Endpunkt hängt von der Azure-Region ab, die Sie beim Erstellen des Arbeitsbereichs ausgewählt haben.

Führen Sie die folgenden Schritte aus, um die Dienstendpunkt-URL zu erhalten und sie als CI-Workflow-Geheimnis zu speichern:

  1. Melden Sie sich mit Ihrem Azure-Konto beim Playwright-Portal an.

  2. Wählen Sie auf der Startseite des Arbeitsbereichs die Option Setup-Handbuch anzeigen aus.

    Tipp

    Wenn Sie über mehrere Arbeitsbereiche verfügen, können Sie zu einem anderen Arbeitsbereich wechseln, indem Sie den Namen des Arbeitsbereichs oben auf der Seite und dann Alle Arbeitsbereiche verwalten auswählen.

  3. Kopieren Sie unter Endpunkt der Region in Ihrem Setup hinzufügen die URL des Dienstes.

    Die Endpunkt-URL entspricht der Azure-Region, die Sie beim Erstellen des Arbeitsbereichs ausgewählt haben.

  4. Speichern Sie die Dienstendpunkt-URL in einem CI-Workflow-Geheimnis:

    Geheimnisname Wert
    PLAYWRIGHT_SERVICE_URL Fügen Sie die Endpunkt-URL ein, die Sie zuvor kopiert haben.

Dienstkonfigurationsdatei hinzufügen

Wenn Sie Ihre Playwright-Tests noch nicht für die Ausführung auf in der Cloud gehosteten Browsern konfiguriert haben, fügen Sie eine Konfigurationsdatei für den Dienst zu Ihrem Repository hinzu. Im nächsten Schritt geben Sie diese Dienstkonfigurationsdatei in der Playwright CLI an.

  1. Erstellen Sie neben der playwright.config.ts-Datei eine neue Datei playwright.service.config.ts.

    Optional können Sie die Datei playwright.service.config.ts im Beispielrepository verwenden.

  2. Fügen Sie folgenden Inhalt hinzu:

    /*
* This file enables Playwright client to connect to remote browsers.
* It should be placed in the same directory as playwright.config.ts.
*/

import { defineConfig } from '@playwright/test';
import config from './playwright.config';
import dotenv from 'dotenv';

// Define environment on the dev box in .env file:
//  .env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
//    PLAYWRIGHT_SERVICE_URL=XXX

// Define environment in your GitHub workflow spec.
//  env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
//    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
//    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}

dotenv.config();

// Name the test run if it's not named yet.
process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();

// Can be 'linux' or 'windows'.
const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';

export default defineConfig(config, {
  // Define more generous timeout for the service operation if necessary.
  // timeout: 60000,
  // expect: {
  //   timeout: 10000,
  // },
  workers: 20,

  // Enable screenshot testing and configure directory with expectations.
  // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
  ignoreSnapshots: false,
  snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
  
  use: {
    // Specify the service endpoint.
    connectOptions: {
      wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
        // Can be 'linux' or 'windows'.
        os,
        runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
      })}`,
      timeout: 30000,
      headers: {
        'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
      },
      // Allow service to access the localhost.
      exposeNetwork: '<loopback>'
    }
  },
  // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
  projects: config.projects? config.projects : [{}]
});

  3. Speichern Sie die Datei, und führen Sie einen Commit für die Datei in Ihr Quellcode-Repository durch.

Aktualisieren der Workflow-Definition

Aktualisieren Sie die CI-Workflowdefinition, um Ihre Playwright-Tests mit der Playwright CLI auszuführen. Übergeben Sie die Dienstkonfigurationsdatei als Eingabeparameter für die Playwright CLI. Sie konfigurieren Ihre Umgebung, indem Sie Umgebungsvariablen angeben.

  1. Öffnen der CI-Workflowdefinition

  2. Fügen Sie die folgenden Schritte hinzu, um Ihre Playwright-Tests in Microsoft Playwright Testing auszuführen.

    In den folgenden Schritten werden die Workflow-Änderungen für GitHub Actions oder Azure Pipelines beschrieben. Ebenso können Sie Ihre Playwright-Tests mit der Playwright CLI auf anderen CI-Plattformen ausführen.

    - name: Install dependencies
  working-directory: path/to/playwright/folder # update accordingly
  run: npm ci

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
  run: npx playwright test -c playwright.service.config.ts --workers=20

- name: Upload Playwright report
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: path/to/playwright/folder/playwright-report/ # update accordingly
    retention-days: 10

  3. Speichern und committen Sie Ihre Änderungen.

    Wenn der CI-Workflow ausgelöst wird, werden Ihre Playwright-Tests in Ihrem Microsoft Playwright Testing-Arbeitsbereich auf in der Cloud gehosteten Browsern über 20 parallele Worker ausgeführt.

Achtung

Bei Microsoft Playwright Testing werden Ihnen Gebühren basierend auf der Gesamtanzahl von Testminuten in Rechnung gestellt. Wenn Sie Erstbenutzer*in sind oder erste Schritte mit einer kostenlosen Testversion ausführen, können Sie mit der Ausführung eines einzelnen Tests im großen Stil statt mit der vollständigen Testsammlung beginnen, um die kostenlosen Testminuten nicht aufzubrauchen.

Nachdem Sie überprüft haben, ob der Test erfolgreich ausgeführt wird, können Sie die Testlast schrittweise erhöhen, indem Sie weitere Tests mit dem Dienst ausführen.

Sie können einen einzelnen Test mit dem Dienst ausführen, indem Sie die folgende Befehlszeile verwenden:

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

Aktivieren der Berichterstellung für Testergebnisse

Microsoft Playwright Testing unterstützt jetzt das Anzeigen von Testergebnissen im Playwright-Portal. Während des Vorschauzugriffs ist es nur auf Einladung verfügbar.

Wichtig

Das Berichterstellungsfeature von Microsoft Playwright Testing ist während der einladungsbasierten Preview kostenlos. Bestehende Funktionen von in der Cloud gehosteten Browsern werden jedoch weiterhin nach dem Azure-Preisplan abgerechnet.

Nachdem Sie Zugriff auf das Berichterstellungstool haben, führen Sie die folgenden Schritte aus, um Ihre Tests einzurichten.

  1. Navigieren Sie auf der Homepage des Arbeitsbereichs zu Einstellungen.

    Screenshot: Einstellungsauswahl für einen Arbeitsbereich im Playwright Testing-Portal.

  2. Wählen Sie in den Einstellungen die Option Allgemein aus, und stellen Sie sicher, dass die Berichterstellung auf Aktiviert festgelegt ist.

    Screenshot: Aktivieren der Berichterstellung für einen Arbeitsbereich im Playwright Testing-Portal.

  3. Erstellen Sie ein persönliches GitHub-Zugriffstoken, indem Sie diese Schritte ausführen.

    Sie müssen dem Token read:packages-Berechtigungen erteilen. Dieses Token wird in diesem Artikel von nun an als PAT_TOKEN_PACKAGE bezeichnet.

  4. Speichern Sie das GitHub-Token in einem CI-Workflow-Geheimnis, um zu vermeiden, dass das Token in Klartext in der Workflow-Definition angegeben wird:

    1. Wechseln Sie zu Ihrem GitHub-Repository, und wählen Sie Einstellungen>Geheimnisse und Variablen>Aktionen aus.

    2. Wählen Sie New repository secret (Neues Repositorygeheimnis) aus.

    3. Geben Sie die Details zum Geheimnis ein, und wählen Sie dann Geheimnis hinzufügen aus, um das CI/CD-Geheimnis zu erstellen.

      Parameter Wert
      Name PAT_TOKEN_PACKAGE
      Wert Fügen Sie das Arbeitsbereichszugriffstoken ein, das Sie zuvor kopiert haben.

    4. Wählen Sie OK aus, um das Wählen-Geheimen zu erstellen.

  5. Aktualisieren Sie package.json-Datei mit dem Paket.

        "dependencies": {
        "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
    }

  6. Aktualisieren Sie die Datei „Playwright.config“.

    Fügen Sie den Playwright Testing-Reporter auf die gleiche Weise wie andere Reporter zu Playwright.config.ts hinzu.

    import { defineConfig } from '@playwright/test';

export default defineConfig({
    reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }],
    ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
    ],
});

    Stellen Sie sicher, dass die Artefakte in der Konfiguration aktiviert sind, um die Problembehandlung zu verbessern.

    use: {
    // ...
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'only-on-failure',
    }

  7. Aktualisieren Sie die CI-Workflowdefinition, um das Berichtspaket zu installieren, bevor Sie die Tests ausführen, um den Bericht Ihrer Playwright-Tests in Microsoft Playwright Testing zu veröffentlichen.

    - name: Install reporting package
  working-directory: path/to/playwright/folder # update accordingly
  run: |
    npm config set @microsoft:registry=https://npm.pkg.github.com
    npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
    npm install

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
  run: npx playwright test

    Tipp

    Sie können den Dienst „Microsoft Playwright Testing“ verwenden, um Testergebnisse unabhängig vom Feature „In der Cloud gehostete Browser“ im Portal zu veröffentlichen.

Zugehöriger Inhalt

Sie haben erfolgreich einen kontinuierlichen End-to-End-Testworkflow eingerichtet, um Ihre Playwright-Tests im großen Stil in cloudgehosteten Browsern auszuführen.