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 Ihre Playwright-Tests mit hochparallelen Cloudbrowsern mithilfe der Microsoft Playwright Testing-Vorschauversion ausführen können. Verwenden Sie Cloudinfrastruktur, um Ihre Anwendung über mehrere Browser, Geräte und Betriebssysteme hinweg zu überprüfen.

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 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.

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.

Erstellen eines Zugriffstokens für die Dienstauthentifizierung

Microsoft Playwright Testing verwenden Zugriffstoken, um Benutzer zum Ausführen von Playwright-Tests mit dem Dienst zu autorisieren. Sie generieren zuerst ein Dienstzugriffstoken im Playwright-Portal und speichern den Wert dann in einer Umgebungsvariable.

Führen Sie die folgenden Schritte aus, um das Zugriffstoken zu generieren:

1. Wählen Sie im Leitfaden zur Einrichtung des Arbeitsbereichs unter Erstellen eines Zugriffstokens die Option Token generieren aus.

   

2. Kopieren Sie das Zugriffstoken für den Arbeitsbereich.

   Sie benötigen den Wert des Zugriffstokens in einem späteren Schritt zum Konfigurieren Ihrer Umgebung.

   

Konfigurieren des Dienstregionsendpunkts

Sie müssen in der Dienstkonfiguration 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.

   

Erstellen Ihrer Umgebung

Um Ihre Umgebung einzurichten, müssen Sie die Umgebungsvariablen PLAYWRIGHT_SERVICE_ACCESS_TOKEN und PLAYWRIGHT_SERVICE_URL mit den Werten konfigurieren, die 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_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Ersetzen Sie unbedingt die {MY-ACCESS-TOKEN} und {MY-REGION-ENDPOINT} Textplatzhalter durch die Werte, die Sie zuvor kopiert haben.

Achtung

Stellen Sie sicher, dass Sie die .env-Datei nicht zu Ihrem Quellcoderepository hinzufügen, um zu vermeiden, dass der Wert Ihres Zugriffstokens nicht offengelegt wird.

Dienstkonfigurationsdatei hinzufügen

Um Ihre Playwright-Tests im Microsoft Playwright Testing-Arbeitsbereich auszuführen, müssen Sie neben ihrer Playwright-Konfigurationsdatei eine Dienstkonfigurationsdatei hinzufügen. Die Dienstkonfigurationsdatei verweist auf die Umgebungsvariablen, um den Arbeitsbereichsendpunkt und Ihr Zugriffstoken abzurufen.

So fügen Sie Ihrem Projekt die Dienstkonfiguration hinzu:

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

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

2. Fügen Sie ihr den 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 .

Ausführen Ihrer Tests im großen Stil mit Microsoft Playwright Testing

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 im großen Stil

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.

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 an, die über die vorgesehenen kostenlosen Testminuten hinausgehen.

Ausführen einer vollständigen Testsammlung im großen Stil

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)
   
   To open last HTML report run:
   
       npx playwright show-report
   

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.

Anzeigen von Testläufen im Playwright-Portal

Wechseln Sie zum Playwright-Portal, um die Metadaten und das Aktivitätsprotokoll der Testausführung für Ihren Arbeitsbereich anzuzeigen.

Das Aktivitätsprotokoll listet für jeden Test die folgenden Details auf: die Gesamtdauer bis zum Abschluss des Tests, die Anzahl der parallelen Worker und die Testminuten.

Anzeigen von Testergebnissen im Playwright-Portal

Microsoft Playwright Testing unterstützt jetzt das Anzeigen von Testergebnissen im Playwright-Portal. Dieses Feature ist nur als per 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.

   

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

   

3. Stellen Sie sicher, dass die Umgebung ordnungsgemäß eingerichtet ist, wie im Abschnitt Einrichten Ihrer Umgebung erläutert.

4. Installieren des Berichterstellungspakets

   Da das Feature derzeit nicht öffentlich verfügbar ist, müssen Sie einige zusätzliche Schritte ausführen, um das Paket zu installieren. Diese Schritte fallen weg, sobald das Feature öffentlich verfügbar wird.

   1. Erstellen Sie eine Datei mit dem Namen .npmrc an demselben Speicherort, an dem sich Ihre Playwright-Konfigurationsdatei befindet.

   2. Fügen Sie der Datei folgenden Inhalt hinzu, und speichern Sie sie.

      @microsoft:registry=https://npm.pkg.github.com
      

   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.

   1. Führen Sie den folgenden Befehl an Ihrem Terminal am Speicherort der Playwright-Konfigurationsdatei aus. Ersetzen Sie PAT_TOKEN_PACKAGE durch das Token, das Sie im vorherigen Schritt generiert haben.

          npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
      

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

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

   3. Führen Sie npm install aus, um das Paket zu installieren.

5. Aktualisieren der 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',
       }
   

6. Ausführen von Playwright-Tests

   Im Playwright Testing-Portal können Sie den Befehl npx playwright test ausführen sowie die Ergebnisse und Artefakte anzeigen.

   

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.

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.

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