Schnellstart: Ausführen von End-to-End-Tests im großen Stil mithilfe der Vorschauversion von Microsoft Playwright Testing

In diesem Schnellstart erfahren Sie, wie Sie mithilfe der Microsoft Playwright Testing-Vorschauversion Ihre Playwright-Tests mit hochparallelen Cloudbrowsern ausführen und auf eine einfache Art und Weise Fehler bei fehlgeschlagen Tests beheben können. Verwenden Sie Cloudinfrastruktur, um Ihre Anwendung über mehrere Browser, Geräte und Betriebssysteme hinweg zu überprüfen. Veröffentlichen Sie die von Playwright generierten Ergebnisse und Artefakte für den Dienst, und zeigen Sie sie im Dienstportal an.

Nachdem Sie diesen Schnellstart abgeschlossen haben, verfügen Sie über einen Microsoft Playwright Testing-Arbeitsbereich, in dem Sie Ihre Playwright-Tests im großen Stil ausführen und Testergebnisse und Artefakte im Dienstportal anzeigen können.

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.
• Für Ihr Azure-Konto ist die Besitzer-, Mitwirkenden-oder eine der klassischen Administratorrollen erforderlich.
• Ein Playwright-Projekt. Wenn Sie kein Projekt haben, erstellen Sie eins mithilfe der Playwright-Dokumentation oder verwenden Sie unser Microsoft Playwright Testing-Beispielprojekt.
• Azure-Befehlszeilenschnittstelle. Wenn Sie nicht über die Azure CLI verfügen, finden Sie weitere Informationen unter Installieren der Azure-Befehlszeilenschnittstelle.

Erstellen eines Arbeitsbereichs

Um mit der Ausführung Ihrer Playwright-Tests im großen Stil in Cloudbrowsern zu beginnen, erstellen Sie zunächst einen Microsoft Playwright Testing-Arbeitsbereich im Playwright-Portal.

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

2. Wenn Sie bereits über einen Arbeitsbereich verfügen, wählen Sie diesen aus, und machen Sie dann mit dem nächsten Schritt weiter.

   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. Wenn Sie noch nicht über einen Arbeitsbereich verfügen, wählen Sie + Neuer Arbeitsbereich aus, und geben Sie dann die folgenden Informationen an:

   Feld	BESCHREIBUNG
   Arbeitsbereichsname	Geben Sie einen eindeutigen Namen ein, um Ihren Arbeitsbereich zu identifizieren. Der Name darf nur aus alphanumerischen Zeichen bestehen und hat eine Länge zwischen 3 und 64 Zeichen.
   Azure-Abonnement	Wählen Sie das Azure-Abonnement aus, das Sie für diesen Microsoft Playwright Testing-Arbeitsbereich verwenden möchten.
   Region	Wählen Sie einen geografischen Standort zum Hosten Ihres Arbeitsbereichs aus. Dort werden die Testlaufdaten für den Arbeitsbereich gespeichert.

   

4. Wählen Sie Arbeitsbereich erstellen aus, um den Arbeitsbereich in Ihrem Abonnement zu erstellen.

   Während der Erstellung des Arbeitsbereichs werden eine neue Ressourcengruppe und eine Azure-Ressource für Microsoft Playwright Testing in Ihrem Azure-Abonnement erstellt.

Wenn die Erstellung des Arbeitsbereichs abgeschlossen ist, werden Sie zum Einrichtungsleitfaden umgeleitet.

Installieren des Microsoft Playwright Testing-Pakets

Um diesen Dienst verwenden zu können, installieren Sie das Microsoft Playwright Testing-Paket.

npm init @azure/microsoft-playwright-testing@latest

Dadurch wird eine playwright.service.config.ts-Datei generiert, die zu Folgendem dient:

• Weiterleiten von Playwright an den Microsoft Playwright Testing-Dienst, und Authentifizieren von Playwright beim Dienst.
• Hinzufügen eines Reporters, um Testergebnisse und Artefakte zu veröffentlichen.

Wenn Sie bereits über diese Datei verfügen, werden Sie vom Paket aufgefordert, sie außer Kraft zu setzen.

Um diesen Dienst verwenden zu können, installieren Sie das Microsoft Playwright Testing-Paket.

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

Konfigurieren des Dienstregionsendpunkts

Sie müssen in Ihrem Setup 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 ULR des Dienstendpunkts abzurufen:

1. Kopieren Sie unter Hinzufügen des Regionsendpunkts in Ihr Setup den Regionsendpunkt für Ihren Arbeitsbereich.

   Die Endpunkt-URL entspricht der Azure-Region, die Sie beim Erstellen des Arbeitsbereichs ausgewählt haben. Stellen Sie sicher, dass diese URL in der PLAYWRIGHT_SERVICE_URL Umgebungsvariable verfügbar ist.

   

Erstellen Ihrer Umgebung

Um Ihre Umgebung einzurichten, müssen Sie die Umgebungsvariable PLAYWRIGHT_SERVICE_URL mit dem Wert konfigurieren, den Sie in den vorherigen Schritten abgerufen haben.

Es wird empfohlen, das dotenv-Modul zum Verwalten Ihrer Umgebung zu verwenden. Mithilfe von dotenv definieren Sie Ihre Umgebungsvariablen in der .env-Datei.

1. Fügen Sie Ihrem Projekt das dotenv-Modul hinzu:

   npm i --save-dev dotenv
   

2. Erstellen Sie eine .env Datei zusammen mit der playwright.config.ts Datei in Ihrem Playwright-Projekt:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Ersetzen Sie unbedingt den Textplatzhalter {MY-REGION-ENDPOINT} durch den Wert, den Sie zuvor kopiert haben.

Einrichten der Dienstkonfiguration

Erstellen Sie eine Datei PlaywrightServiceSetup.cs in Ihrem Projekt mit dem folgenden Inhalt.

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;

namespace PlaywrightTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit {};

Hinweis

Stellen Sie sicher, dass Ihr Projekt Microsoft.Playwright.NUnit Version 1.47 oder höher verwendet.

Einrichten der Authentifizierung

Um Ihre Playwright-Tests in Ihrem Microsoft Playwright Testing-Arbeitsbereich auszuführen, müssen Sie den Playwright-Client dort authentifizieren, wo Sie die Tests mit dem Dienst ausführen. Dies könnte Ihr lokaler Entwicklungscomputer oder CI-Computer sein.

Der Dienst bietet zwei Authentifizierungsmethoden: Microsoft Entra ID und Zugriffstoken.

Microsoft Entra ID verwendet Ihre Azure-Anmeldeinformationen und erfordert eine Anmeldung bei Ihrem Azure-Konto für den sicheren Zugriff. Alternativ können Sie ein Zugriffstoken in Ihrem Playwright-Arbeitsbereich generieren und es in Ihrem Setup verwenden.

Einrichten der Authentifizierung mithilfe von Microsoft Entra ID

Microsoft Entra ID ist die Standardauthentifizierung und empfohlene Authentifizierung für den Dienst. Auf Ihrem lokalen Entwicklungscomputer können Sie die Azure CLI verwenden, um sich anzumelden

az login

Hinweis

Wenn Sie Teil mehrerer Microsoft Entra-Mandanten sind, stellen Sie sicher, dass Sie sich beim Mandanten anmelden, zu dem Ihr Arbeitsbereich gehört. Sie können die Mandanten-ID über das Azure-Portal abrufen. Weitere Informationen finden Sie unter Suchen Ihres Microsoft Entra-Mandanten. Sobald Sie die ID abgerufen haben, melden Sie sich mithilfe des Befehls az login --tenant <TenantID> an

Einrichten der Authentifizierung mithilfe von Zugriffstoken

Alternativ können Sie ein Zugriffstoken in Ihrem Playwright Testing-Arbeitsbereich generieren und es in Ihrem Setup verwenden. Aufgrund der erhöhten Sicherheit empfehlen wir jedoch dringend Microsoft Entra ID für die Authentifizierung. Zugriffstoken sind zwar praktisch, funktionieren jedoch wie langlebige Kennwörter und sind anfälliger für Kompromittierungen.

1. Die Authentifizierung mithilfe von Zugriffstoken ist standardmäßig deaktiviert. Zur Verwendung aktivieren Sie die tokenbasierte Authentifizierung

2. Einrichten der Authentifizierung mithilfe von Zugriffstoken

Achtung

Es wird dringend empfohlen, Microsoft Entra ID für die Authentifizierung bei dem Dienst zu verwenden. Für die Verwendung von Zugriffstoken finden Sie weitere Information unter Verwalten von Zugriffstoken

Aktivieren von Artefakten in Ihrem Playwright-Setup

Stellen Sie in der playwright.config.ts-Datei Ihres Projekts sicher, dass Sie alle erforderlichen Artefakte sammeln.

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

Aktivieren Sie Artefakte wie Screenshot, Videos und Ablaufverfolgungen, die von Playwright erfasst werden.

• Screenshots finden Sie unter Screenshots aufnehmen
• Videos finden Sie unter Aufzeichnen von Videos für Ihre Tests
• Ablaufverfolgungen finden Sie unter Aufzeichnen einer Ablaufverfolgung

Sobald Sie diese Artefakte gesammelt haben, fügen Sie sie an TestContext an, um sicherzustellen, dass sie in Ihren Testberichten verfügbar sind. Weitere Informationen finden Sie in unserem Beispielprojekt für NUnit

Führen Sie Ihre Tests im Großen und Problembehandlung mit Microsoft Playwright-Tests einfach aus

Sie haben nun die Konfiguration für die Ausführung Ihrer Playwright-Tests in der Cloud mit Microsoft Playwright Testing vorbereitet. Sie können entweder die Playwright-CLI oder die Playwright Test Visual Studio Code-Erweiterung verwenden, um Ihre Tests auszuführen.

Ausführen eines einzelnen Tests mit dem Dienst

Bei Microsoft Playwright Testing werden Ihnen Gebühren basierend auf der Gesamtanzahl von Testminuten und der Anzahl veröffentlichter Testergebnisse in Rechnung gestellt. Wenn Sie Erstbenutzer 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 Grenzwerte der kostenlosen Testversion nicht auszuschöpfen.

Hinweis

Das Berichterstellungsfeature ist für bereits vorhandene Arbeitsbereiche standardmäßig aktiviert. Dies wird phasenweise eingeführt und dauert einige Tage. Um Fehler zu vermeiden, vergewissern Sie sich, dass die Einstellung Rich diagnostics using reporting für Ihren Arbeitsbereich aktiviert ist, bevor Sie fortfahren. Weitere Informationen finden Sie unter Verwalten der Features für den Arbeitsbereich.

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.

Führen Sie die folgenden Schritte aus, um einen einzelnen Playwright-Test mit Microsoft Playwright Testing auszuführen:

Playwright-CLI

Um die Playwright-Befehlszeilenschnittstelle zum Ausführen von Tests mit Microsoft Playwright Testing zu verwenden, übergeben Sie die Dienstkonfigurationsdatei als Befehlszeilenparameter.

1. Öffnen Sie ein Terminalfenster.

2. Geben Sie den folgenden Befehl ein, um Ihren Playwright-Test in Remotebrowsern in Ihrem Arbeitsbereich auszuführen:

   Ersetzen Sie den Textplatzhalter {name-of-file.spec.ts} durch den Namen der Testspezifikationsdatei.

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

   Nach Abschluss des Tests können Sie den Teststatus im Terminal anzeigen.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Um einen einzelnen Playwright-Test in Visual Studio Code mit Microsoft Playwright Testing auszuführen, wählen Sie die Dienstkonfigurationsdatei in der Ansicht Testlisten-Editor aus. Wählen Sie dann den Test aus der Liste der Tests aus, und führen Sie ihn aus.

1. Installieren Sie die Playwright Test Visual Studio Code-Erweiterung.

2. Öffnen Sie in der Aktivitätsleiste die Test-Explorer-Ansicht.

   Der Testlisten-Editor erkennt automatisch Ihre Playwright-Tests und die Dienstkonfiguration in Ihrem Projekt.

   

3. Wählen Sie Standardprofil auswählen und dann Ihre Standardprojekte aus der Dienstkonfigurationsdatei aus.

   Beachten Sie, dass die Dienstausführungsprofile aus der zuvor hinzugefügten playwright.service.config.ts-Datei stammen.

   Durch Festlegen eines Standardprofils können Sie Ihre Tests automatisch mit dem Dienst oder mehrere Playwright-Projekte gleichzeitig ausführen.

   

4. Wählen Sie in der Liste der Tests die Schaltfläche Test ausführen neben einem Test aus, um ihn auszuführen.

   Der Test wird für die Projekte ausgeführt, die Sie im Standardprofil ausgewählt haben. Wenn Sie Projekte aus der Dienstkonfiguration ausgewählt haben, wird der Test in Remotebrowsern in Ihrem Arbeitsbereich ausgeführt.

   

   Tipp

   Wenn Sie Ihre Tests in Remotebrowsern ausführen, können Sie den Testcode weiterhin debuggen. Verwenden Sie dazu die Schaltfläche Test debuggen.

5. Sie können die Testergebnisse direkt in Visual Studio Code anzeigen.

   

Sie können jetzt mehrere Tests mit dem Dienst ausführen oder Ihre gesamte Testsammlung in Remotebrowsern ausführen.

Achtung

Je nach Größe Ihrer Testsammlung fallen möglicherweise zusätzliche Gebühren für die Testminuten und Testergebnisse an, die über die zugewiesenen kostenlosen Testminuten und kostenlosen Testergebnisse hinausgehen.

Ausführen einer vollständigen Testsuite mit dem Dienst

Sie haben überprüft, dass Sie einen einzelnen Test mit Microsoft Playwright Testing ausführen können. Nun können Sie eine vollständige Playwright-Testsammlung im großen Stil ausführen.

Führen Sie die folgenden Schritte aus, um eine vollständige Playwright-Testsammlung mit Microsoft Playwright Testing auszuführen:

Playwright-CLI

Wenn Sie mehrere Playwright-Tests oder eine vollständige Testsammlung mit Microsoft Playwright Testing ausführen, können Sie optional die Anzahl paralleler Worker als Befehlszeilenparameter angeben.

1. Öffnen Sie ein Terminalfenster.

2. Geben Sie den folgenden Befehl ein, um Ihre Playwright-Testsammlung in Remotebrowsern in Ihrem Arbeitsbereich auszuführen:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   Je nach Größe Ihrer Testsammlung führt dieser Befehl Ihre Tests für bis zu 20 parallele Worker aus.

   Nach Abschluss des Tests können Sie den Teststatus im Terminal anzeigen.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   Test report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>
   

Visual Studio Code

So führen Sie Ihre Playwright-Testsammlung in Visual Studio Code mit Microsoft Playwright Testing aus:

1. Öffnen Sie in der Aktivitätsleiste die Test-Explorer-Ansicht.

2. Wählen Sie die Schaltfläche Tests ausführen aus, um alle Tests mit Microsoft Playwright Testing auszuführen.

   Wenn Sie alle Tests ausführen, wird das Standardprofil verwendet. Im vorherigen Schritt haben Sie das Standardprofil für die Verwendung von Projekten aus der Dienstkonfiguration konfiguriert.

   

   Tipp

   Wenn Sie Ihre Tests in Remotebrowsern ausführen, können Sie den Testcode weiterhin debuggen. Verwenden Sie dazu die Schaltfläche Tests debuggen.

3. Alternativ können Sie eine bestimmte Dienstkonfiguration aus der Liste auswählen, um nur die Tests für eine bestimmte Browserkonfiguration auszuführen.

   

4. Sie können alle Testergebnisse auf der Registerkarte Testergebnisse anzeigen.

Führen Sie Playwright-Tests anhand von Browsern aus, die vom Dienst verwaltet werden, und sehen Sie die Ergebnisse im einheitlichen Portal mithilfe der oben erstellten Konfiguration.

dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20

Die Einstellungen für die Testausführung werden in der .runsettings Datei definiert. Lernen Sie mehr über die Verwendung von Dienstpaketoptionen

Nach Abschluss des Testlaufs können Sie den Teststatus im Terminal anzeigen.

Starting test execution, please wait...

Initializing reporting for this test run. You can view the results at: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

A total of 100 test files matched the specified pattern.

Test Report: https://playwright.microsoft.com/workspaces/<workspace-id>/runs/<run-id>

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

Anzeigen von Testläufen und -ergebnissen im Playwright-Portal

Sie können jetzt Probleme mit den fehlgeschlagenen Testfällen im Playwright-Portal beheben.

1. Nach Abschluss der Testausführung wird ein Link zum Playwright-Portal generiert. Öffnen Sie diesen Link, um detaillierte Testergebnisse und zugehörige Artefakte anzuzeigen. Das Portal zeigt wichtige Informationen an, darunter:

   • CI-Builddetails
   • Gesamtstatus der Testausführung
   • Die Commit-ID, die mit der Testausführung verknüpft ist

   

2. Das Playwright-Portal enthält alle erforderlichen Informationen zur Problembehandlung. Sie können Folgendes ausführen:

   • Wechsel zwischen Wiederholungen.
   • Sehen Sie sich detaillierte Fehlerprotokolle, Testschritte und beigefügte Artefakte wie Screenshots oder Videos an.
   • Navigieren Sie direkt zur Ablaufverfolgungsanzeige für eine tiefergreifende Analyse.

   

3. Mit der Ablaufverfolgungsanzeige können Sie die Testausführung visuell durchlaufen. Sie können Folgendes ausführen:

   • Fahren Sie mit der Maus über die einzelnen Schritte auf der Zeitachse, um den Seitenzustand vor und nach jeder Aktion anzuzeigen.
   • Überprüfen Sie detaillierte Protokolle, DOM-Momentaufnahmen, Netzwerkaktivitäten, Fehler und Konsolenausgaben für jeden Schritt.

   

1. Nach Abschluss der Testausführung erhalten Sie einen Link zum Playwright-Portal in Ihrem Terminal. Öffnen Sie diesen Link, um detaillierte Testergebnisse und zugehörige Artefakte anzuzeigen. Das Portal zeigt wichtige Informationen an, darunter:

   • CI-Builddetails
   • Gesamtstatus der Testausführung
   • Die Commit-ID, die mit der Testausführung verknüpft ist

   

2. Das Playwright-Portal enthält alle erforderlichen Informationen zur Problembehandlung. Sie können Folgendes ausführen:

   • Zeigen Sie detaillierte Fehlerprotokolle und beigefügte Artefakte wie Screenshots oder Videos an.
   • Navigieren Sie direkt zur Ablaufverfolgungsanzeige für eine tiefergreifende Analyse.

   

Hinweis

Einige Metadaten wie Besitzende, Beschreibung und Kategorie werden derzeit nicht im Dienstdashboard angezeigt. Wenn weitere Informationen eingeschlossen werden sollten, übermitteln Sie ein GitHub-Problem in unserem Repository.

4. Mit der Ablaufverfolgungsanzeige können Sie die Testausführung visuell durchlaufen. Sie können Folgendes ausführen:

   • Fahren Sie mit der Maus über die einzelnen Schritte auf der Zeitachse, um den Seitenzustand vor und nach jeder Aktion anzuzeigen.
   • Überprüfen Sie detaillierte Protokolle, DOM-Momentaufnahmen, Netzwerkaktivitäten, Fehler und Konsolenausgaben für jeden Schritt.

   

Tipp

Sie können Microsoft Playwright Testing-Dienstfeatures unabhängig voneinander verwenden. Sie können Testergebnisse im Portal veröffentlichen, ohne das Feature für in der Cloud gehostete Browser zu verwenden, und Sie können auch nur in der Cloud gehostete Browser verwenden, um Ihre Testsammlung zu beschleunigen, ohne die Testergebnisse zu veröffentlichen.

Hinweis

Die Testergebnisse und Artefakte, die Sie veröffentlichen, werden 90 Tage lang im Dienst aufbewahrt. Danach werden sie automatisch gelöscht.

Optimieren der parallelen Workerkonfiguration

Sobald Ihre Tests mithilfe des Diensts reibungslos ausgeführt werden, können Sie mit einer unterschiedlichen Anzahl paralleler Worker experimentieren, um die optimale Konfiguration zum Minimieren der Testabschlusszeit zu finden.

Mit Microsoft Playwright Testing können Sie bis zu 50 parallele Worker ausführen. Mehrere Faktoren beeinflussen die beste Konfiguration für Ihr Projekt, z. B. die CPU-, Speicher- und Netzwerkressourcen Ihres Clientcomputers, die Kapazität der Zielanwendung zur Bewältigung von Last sowie die Aktionsarten, die in Ihren Tests ausgeführt werden.

Sie können die Anzahl der parallelen Worker in der Playwright-Befehlszeilenschnittstelle angeben oder die workers-Eigenschaft in der Playwright-Dienstkonfigurationsdatei konfigurieren.

Sie können die Anzahl der parallelen Worker in der Playwright-Befehlszeilenschnittstelle angeben oder die NumberOfTestWorkers-Eigenschaft in der .runsettings-Datei konfigurieren.

Weitere Informationen finden Sie unter Bestimmen der optimalen Konfiguration zur Optimierung des Abschlusses der Testsammlung.

Nächster Schritt

Sie haben erfolgreich einen Microsoft Playwright Testing-Arbeitsbereich im Playwright-Portal erstellt und Ihre Playwright-Tests in Cloudbrowsern ausgeführt.

Fahren Sie mit dem nächsten Schnellstart fort, um kontinuierliche End-to-End-Tests einzurichten, indem Sie Ihre Playwright-Tests in Ihrem CI/CD-Workflow ausführen.

Einrichten kontinuierlicher End-to-End-Tests in CI/CD