Schnellstart: Einrichten kontinuierlicher End-to-End-Tests mit der Vorschauversion von Microsoft Playwright Testing
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
Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie kein Azure-Abonnement besitzen, können Sie ein kostenloses Konto erstellen, bevor Sie beginnen.
Ein Microsoft Playwright Testing-Arbeitsbereich. Schließen Sie den Schnellstart: Playwright-Tests im großen Stil ausführen ab, um einen Arbeitsbereich zu erstellen.
- Ein GitHub-Konto. Falls Sie kein GitHub-Konto besitzen, können Sie kostenlos eines erstellen.
- Ein GitHub-Repository, das Ihre Playwright-Testspezifikationen und GitHub Actions-Workflow enthält. Informationen zum Erstellen eines Repositorys finden Sie unter Erstellen eines neuen Repositorys.
- Ein GitHub Actions-Workflow. Informationen zu den ersten Schritten mit GitHub Actions finden Sie bei Bedarf unter Erstellen Ihres ersten Workflows
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:
Melden Sie sich mit Ihrem Azure-Konto beim Playwright-Portal an.
Wählen Sie das Symbol „Arbeitsbereichseinstellungen“ aus, und wechseln Sie dann zur Seite Zugriffstoken.
Wählen Sie Neues Token generieren aus, um ein neues Zugriffstoken für Ihren CI-Workflow zu erstellen.
Geben Sie die Zugriffstokendetails ein, und wählen Sie dann Token generierenaus aus.
Speichern Sie das Zugriffstoken in einem CI-Workflow-Geheimnis, um zu vermeiden, dass das Token in klarem Text in der Workflow-Definition angegeben wird:
Wechseln Sie zu Ihrem GitHub-Repository, und wählen Sie Einstellungen>Geheimnisse und Variablen>Aktionen aus.
Wählen Sie New repository secret (Neues Repositorygeheimnis) aus.
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. 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:
Melden Sie sich mit Ihrem Azure-Konto beim Playwright-Portal an.
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.
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.
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.
Erstellen Sie neben der
playwright.config.ts
-Datei eine neue Dateiplaywright.service.config.ts
.Optional können Sie die Datei
playwright.service.config.ts
im Beispielrepository verwenden.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 : [{}] });
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.
Öffnen der CI-Workflowdefinition
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
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.
Navigieren Sie auf der Homepage des Arbeitsbereichs zu Einstellungen.
Wählen Sie in den Einstellungen die Option Allgemein aus, und stellen Sie sicher, dass die Berichterstellung auf Aktiviert festgelegt ist.
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 alsPAT_TOKEN_PACKAGE
bezeichnet.Speichern Sie das GitHub-Token in einem CI-Workflow-Geheimnis, um zu vermeiden, dass das Token in Klartext in der Workflow-Definition angegeben wird:
Wechseln Sie zu Ihrem GitHub-Repository, und wählen Sie Einstellungen>Geheimnisse und Variablen>Aktionen aus.
Wählen Sie New repository secret (Neues Repositorygeheimnis) aus.
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. Wählen Sie OK aus, um das Wählen-Geheimen zu erstellen.
Aktualisieren Sie package.json-Datei mit dem Paket.
"dependencies": { "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview" }
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', }
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.
Feedback
https://aka.ms/ContentUserFeedback.
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unterFeedback senden und anzeigen für