Teilen über

Schnellstart: Problembehandlung bei Tests mit Microsoft Playwright Testing Preview

  • Artikel

In dieser Schnellstartanleitung erfahren Sie, wie Sie Ihre Playwright-Tests mithilfe von Berichten und Artefakten, die in der Microsoft Playwright Testing Preview veröffentlicht wurden, einfach beheben können. Darüber hinaus zeigt diese Anleitung, wie Sie die Berichtsfunktion nutzen können, unabhängig davon, ob Sie Tests in den vom Dienst bereitgestellten Cloud-Browsern durchführen.

Nachdem Sie diesen Schnellstart abgeschlossen haben, verfügen Sie über einen Microsoft Playwright Testing-Arbeitsbereich, in dem Sie 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.

Hintergrund

Mit dem Microsoft Playwright Testing-Dienst haben Sie folgende Möglichkeiten:

  • Beschleunigen Sie Buildpipelines, indem Sie Tests parallel mit in der Cloud gehosteten Browsern ausführen.
  • Vereinfachen Sie die Problembehandlung, indem Sie Testergebnisse und Artefakte im Dienst veröffentlichen, sodass darauf über das Dienstportal zugegriffen werden kann.

Diese beiden Features des Diensts können unabhängig voneinander genutzt werden und haben jeweils einen eigenen Tarif. Sie haben verschiedene Möglichkeiten:

  • Beschleunigen Sie die Testausführung, und optimieren Sie die Problembehandlung, indem Sie Tests in Browsern ausführen, die in der Cloud gehostet werden, und die Ergebnisse im Dienst veröffentlichen.
  • Führen Sie Tests nur in Cloud-Browsern aus, um die Testausführung schneller abzuschließen.
  • Veröffentlichen Sie Testergebnisse im Dienst, während Sie weiterhin Tests lokal ausführen, um eine effiziente Problembehandlung zu gewährleisten.

Hinweis

In diesem Artikel wird erläutert, wie Sie Testergebnisse im Dienst veröffentlichen können, ohne in der Cloud gehostete Browser zu verwenden. Wenn Sie weitere Möglichkeiten zum Beschleunigen Ihrer Testausführungen kennenlernen möchten, schließen Sie den Schnellstart: Ausführen von Playwright-Tests im großen Stil ab.

Voraussetzungen

Erstellen eines Arbeitsbereichs

Um mit der Veröffentlichung von Testergebnissen im Playwright Testing-Dienst 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.

    Screenshot: Seite „Arbeitsbereich erstellen“ im Playwright-Portal

  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 den Dienst zu nutzen, installieren Sie das Microsoft Playwright Testing-Paket.

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

Hinweis

Stellen Sie sicher, dass Ihr Projekt @playwright/test Version 1.47 oder höher verwendet.

Dieser Befehl generiert eine playwright.service.config.ts-Datei, die zu Folgendem dient:

  • Verweisen Ihres Playwright-Client direkt an den Microsoft Playwright Testing-Dienst und Authentifizierung damit.
  • Hinzufügen eines Reporters, um Testergebnisse und Artefakte zu veröffentlichen.

Wenn Sie diese Datei bereits haben, werden Sie gefragt, ob Sie sie überschreiben möchten.

Um nur die Berichtsfunktion für die Testausführung zu verwenden, deaktivieren Sie die in der Cloud gehosteten Browser, indem Sie useCloudHostedBrowsers als „false“ festlegen.

export default defineConfig(
  config,
  getServiceConfig(config, {
    timeout: 30000,
    os: ServiceOS.LINUX,
	useCloudHostedBrowsers: false // Do not use cloud hosted browsers
  }),
  {
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], // Reporter for Microsoft Playwright Testing service
  }
);

Durch das Festlegen des Werts als false wird sichergestellt, dass keine in der Cloud gehosteten Browser zum Ausführen der Tests verwendet werden. Die Tests werden auf Ihrem lokalen Computer ausgeführt, aber die Ergebnisse und Artefakte werden auf dem Dienst veröffentlicht.

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

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

Hinweis

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

Um nur das Berichtsfeature zu verwenden, aktualisieren Sie Folgendes in der .runsettings Datei Ihres Projekts:

  1. Deaktivieren Sie in der Cloud gehostete Browser, indem Sie die useCloudHostedBrowsers Einstellung als "falsch" festlegen.
  2. Fügen Sie Microsoft Playwright Testing Logger im Abschnitt "Loggers" hinzu.
<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>        
        <!--Select if you want to use cloud-hosted browsers to run your Playwright tests.-->
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <!--Select the authentication method you want to use with Entra-->
    </TestRunParameters> 
 .
 .
 .
    <LoggerRunSettings>
        <Loggers>
            <!--Microsoft Playwright Testing service logger for reporting -->
            <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
            <!--could enable any logger additionally -->
            <Logger friendlyName="trx" enabled="false" />
        </Loggers>
    </LoggerRunSettings>
</RunSettings>

Tipp

Wenn Sie Ihre Testausführung mit einem in der Cloud gehosteten Browser beschleunigen möchten, können Sie useCloudHostedBrowsers auf „true“ festlegen. Dadurch werden Ihre Tests auf den Browsern ausgeführt, die von diesem Dienst verwaltet werden.

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.

    Screenshot: Kopieren des Endpunkts der Arbeitsbereichsregion im Playwright Testing-Portal

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 PlaywrightServiceSetup.cs-Datei im Stammordner 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.

Authentifizierung einrichten

Um Testergebnisse und Artefakte in Ihrem Microsoft Playwright Testing-Arbeitsbereich zu veröffentlichen, müssen Sie den Playwright-Client, auf dem Sie die Tests ausführen, beim Dienst authentifizieren. Der Client 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 Microsoft Entra-Mandant finden. 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.

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

Ausführen Ihrer Tests und Veröffentlichen der Ergebnisse auf Microsoft Playwright Testing

Sie haben nun die Konfiguration für die Veröffentlichung von Testergebnissen und Artefakten mit Microsoft Playwright Testing vorbereitet. Führen Sie Tests mit der neu erstellten playwright.service.config.ts-Datei durch und veröffentlichen Sie die Testergebnisse und Artefakte im Dienst.

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

Hinweis

Für die Berichtsfunktion von Microsoft Playwright Testing werden Ihnen die Kosten basierend auf der Anzahl der veröffentlichten Testergebnisse in Rechnung gestellt. Wenn Sie Erstnutzer sind oder mit einer kostenlosen Testversion beginnen, sollten Sie zunächst nur einzelne Testergebnisse veröffentlichen, anstatt Ihre gesamte Testsammlung zu veröffentlichen, um die Beschränkungen Ihrer kostenlosen Testversion nicht zu überschreiten.

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

Running 6 test using 2 worker
    5 passed, 1 failed (20.2s)

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

Sie haben nun die Konfiguration für die Veröffentlichung von Testergebnissen und Artefakten mit Microsoft Playwright Testing vorbereitet. Führen Sie Tests mit der .runsettings-Datei durch und veröffentlichen Sie die Testergebnisse und Artefakte im Dienst.

dotnet test --settings:.runsettings

Die Einstellungen für die Testausführung werden in der .runsettings Datei definiert. Weitere Informationen finden Sie unter Verwendung von Dienstpaketoptionen

Hinweis

Für die Berichtsfunktion von Microsoft Playwright Testing werden Ihnen die Kosten basierend auf der Anzahl der veröffentlichten Testergebnisse in Rechnung gestellt. Wenn Sie Erstnutzer sind oder mit einer kostenlosen Testversion beginnen, sollten Sie zunächst nur einzelne Testergebnisse veröffentlichen, anstatt Ihre gesamte Testsammlung zu veröffentlichen, um die Beschränkungen Ihrer kostenlosen Testversion nicht zu überschreiten.

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: 10 m - PlaywrightTestsNUnit.dll (net7.0)

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

Achtung

Je nach Umfang Ihrer Testsammlung können zusätzliche Kosten für die Testergebnisse anfallen, die über die Ihnen zustehenden kostenlosen Testergebnisse hinausgehen.

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

    Screenshot der Liste der Tests in der Testausführung.

  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.

    Screenshot der Vorschau eines Tests.

  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.

    Screenshot der Ablaufverfolgung.

  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

    Screenshot der Liste der Tests in der Testausführung.

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

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

    Screenshot der Vorschau eines Tests.

Hinweis

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

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

    Screenshot der Ablaufverfolgung.

Tipp

Sie können auch den Microsoft Playwright Testing-Dienst verwenden, um Tests parallel mit in der Cloud gehosteten Browsern durchzuführen. Sowohl die Berichterstellung als auch die in der Cloud gehosteten Browser sind eigenständige Funktionen und werden separat in Rechnung gestellt. Sie können eine dieser Optionen oder beide verwenden. Weitere Informationen finden Sie unter Verwenden von Dienstfunktionen.

Hinweis

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

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