Schnellstart: Ausführen von End-to-End-Tests im Maßstab mit Playwright-Arbeitsbereichen

In dieser Schnellstartanleitung erfahren Sie, wie Sie Ihre Playwright-Tests mit hoch parallelen Cloudbrowsern mit Playwright Workspaces ausführen. Verwenden Sie Cloudinfrastruktur, um Ihre Anwendung über mehrere Browser, Geräte und Betriebssysteme hinweg zu überprüfen.

Nachdem Sie diese Schnellstartanleitung abgeschlossen haben, haben Sie einen Playwright-Arbeitsbereich, um Ihre Playwright-Tests im Großen und Ganzen auszuführen.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie noch kein Azure-Abonnement haben, erstellen Sie ein kostenloses Konto, 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 ein Projekt mithilfe der Dokumentation für die ersten Schritte von Playwright, oder verwenden Sie unser Playwright Workspaces-Beispielprojekt.
• Azure CLI. Wenn Sie nicht über die Azure CLI verfügen, finden Sie weitere Informationen unter Installieren der Azure-Befehlszeilenschnittstelle.

Erstellen eines Arbeitsbereichs

Um mit dem Ausführen Ihrer Playwright-Tests auf Cloudbrowsern zu beginnen, müssen Sie zuerst einen Playwright Workspace erstellen.

1. Melden Sie sich beim Azure-Portal an.

2. Wählen Sie im Portal oben links die Menüschaltfläche und dann Ressource erstellen aus.

   

3. Geben Sie Playwright Workspaces in das Suchfeld ein.

4. Wählen Sie die Karte Playwright-Arbeitsbereiche aus, und wählen Sie dann Erstellen aus.

   

5. Geben Sie die folgenden Informationen an, um einen neuen Playwright-Arbeitsbereich zu konfigurieren:

   Feld	BESCHREIBUNG
   Abonnement	Wählen Sie das Azure-Abonnement aus, das Sie für diesen Playwright-Arbeitsbereich verwenden möchten.
   Ressourcengruppe	Wählen Sie eine vorhandene Ressourcengruppe aus. Klicken Sie auf Neu erstellen, und geben Sie einen eindeutigen Namen für die neue Ressourcengruppe ein.
   Name	Geben Sie einen eindeutigen Namen ein, um Ihren Arbeitsbereich zu identifizieren. Der Name kann nur aus alphanumerischen Zeichen und Bindestrichen bestehen und eine Länge zwischen 3 und 24 Zeichen aufweisen.
   Ort	Wählen Sie einen geografischen Standort zum Hosten Ihres Arbeitsbereichs aus. Dieser Speicherort bestimmt auch, wo die Testausführungsergebnisse gespeichert werden.

   Hinweis

   Optional können Sie weitere Details auf der Registerkarte Tags konfigurieren. Tags sind Namens-Wert-Paare, mit denen Sie Ressourcen kategorisieren und eine konsolidierte Abrechnung anzeigen können, indem Sie dasselbe Tag auf mehrere Ressourcen und Ressourcengruppen anwenden.

6. Nachdem Sie die Ressource konfiguriert haben, wählen Sie Überprüfen und Erstellen aus.

7. Überprüfen Sie alle Konfigurationseinstellungen, und wählen Sie Erstellen aus, um die Bereitstellung des Playwright-Arbeitsbereichs zu starten.

   Nachdem der Vorgang abgeschlossen wurde, wird eine Erfolgsmeldung zur Bereitstellung angezeigt.

8. Um den neuen Arbeitsbereich anzuzeigen, wählen Sie Zu Ressource wechseln aus.

   

Installieren des Playwright Workspaces-Pakets

Um den Dienst zu verwenden, installieren Sie das Playwright Workspaces-Paket.

npm init @azure/playwright@latest

Dadurch wird eine playwright.service.config.ts Datei generiert, die Playwright für Playwright Workspaces leitet und authentifiziert.

Wenn Sie diese Datei bereits haben, werden Sie vom Paket aufgefordert, sie zu überschreiben.

Um den Dienst zu verwenden, installieren Sie das Playwright Workspaces-Paket.

dotnet add package Azure.Developer.Playwright.NUnit

Konfigurieren des Browserendpunkts

In Ihrem Setup müssen Sie den regionsspezifischen Browserendpunkt angeben. 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 URL des Browserendpunkts abzurufen:

1. Melden Sie sich mit Ihrem Azure-Konto beim Azure-Portal an, und navigieren Sie zu Ihrem Arbeitsbereich.

2. Wählen Sie die Seite Erste Schritte aus.

   

3. Kopieren Sie in "Hinzufügen des Browserendpunkts zu Ihrem Setup" die Endpunkt-URL.

   Stellen Sie sicher, dass diese URL in der PLAYWRIGHT_SERVICE_URL Umgebungsvariable verfügbar ist.

   

Richten Sie Ihre Umgebung ein

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. Fügen Sie den folgenden Codeausschnitt in playwright.service.config.ts hinzu:

   require('dotenv').config();
   

3. 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.Playwright.NUnit;
using Azure.Identity;

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

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

Hinweis

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

Einrichten der Authentifizierung

Um Ihre Playwright-Tests in Ihrem Playwright Workspace auszuführen, müssen Sie den Playwright-Client authentifizieren, in dem 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

Sie können ein Zugriffstoken aus Ihrem Playwright-Arbeitsbereich generieren und 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. Richten Sie die Authentifizierung mithilfe von Zugriffstoken ein.

Vorsicht

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.

Führen Sie Ihre Tests im Maßstab mit Playwright Workspaces aus

Sie haben nun die Konfiguration für die Ausführung Ihrer Playwright-Tests in der Cloud mit Playwright Workspaces 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 Playwright Workspaces werden Sie basierend auf der Anzahl der Testminuten belastet. Wenn Sie ein Erstmaliger Benutzer sind oder mit einer kostenlosen Testversion beginnen, können Sie mit der Ausführung eines einzelnen Tests statt Ihrer vollständigen Testsuite beginnen, um zu vermeiden, dass Ihre kostenlosen Testlimits erschöpft sind.

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 Playwright Workspaces auszuführen:

Playwright-CLI

Um die Playwright CLI zum Ausführen ihrer Tests mit Playwright Workspaces 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 Playwright Workspaces auszuführen, wählen Sie die Dienstkonfigurationsdatei in der Test-Explorer-Ansicht 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.

Vorsicht

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

Nachdem Sie nun überprüft haben, dass Sie einen einzelnen Test mit Playwright Workspaces ausführen können, können Sie eine vollständige Playwright-Testsuite im Großen und Ganzen ausführen.

Führen Sie die folgenden Schritte aus, um eine vollständige Playwright-Testsuite mit Playwright Workspaces auszuführen:

Playwright-CLI

Wenn Sie mehrere Playwright-Tests oder eine vollständige Testsuite mit Playwright Workspaces ausführen, können Sie optional die Anzahl der parallelen 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)
   

Visual Studio Code

So führen Sie Ihre Playwright-Testsuite in Visual Studio Code mit Playwright Workspaces 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 Playwright Workspaces 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 mit Browsern aus, die vom Dienst verwaltet werden, indem Sie die oben erstellte Konfiguration verwenden.

dotnet test -- NUnit.NumberOfTestWorkers=20

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

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

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.

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 Playwright Workspaces können Sie bis zu 50 parallele Mitarbeiter 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 Playwright Workspace im Azure-Portal erstellt und führen Ihre Playwright-Tests in Cloudbrowsern aus.

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