Freigeben über

Schnellstart: Einrichten von kontinuierlichen End-to-End-Tests mit Playwright-Arbeitsbereichen

In diesem Schnellstart richten Sie kontinuierliche End-to-End-Tests mit Playwright-Arbeitsbereichen ein, um zu überprüfen, ob Ihre Web-App in verschiedenen Browsern und Betriebssystemen mit jedem Codecommit ordnungsgemäß ausgeführt wird, und um Probleme bei den Tests mithilfe des Dienst-Dashboards ganz einfach zu beheben. 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 diesen Schnellstart abgeschlossen haben, verfügen Sie über einen CI-Workflow mit Microsoft Playwright-Arbeitsbereichen, der Ihre Playwright-Testsammlung im großen Stil ausführt und Ihnen bei der Problembehandlung für Tests hilft.

Voraussetzungen

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:

  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.

    Screenshot des Navigierens zur Seite „Erste Schritte“.

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

  4. Speichern Sie die Dienstendpunkt-URL in einem CI-Workflow-Geheimnis:

    Geheimer Name Wert
    PLAYWRIGHT_SERVICE_URL Fügen Sie die Endpunkt-URL ein, die Sie zuvor kopiert haben.

Dienstkonfigurationsdatei hinzufügen

Wenn Sie keine Playwright-Tests für die Ausführung mit Service 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.

  1. Erstellen Sie neben der playwright.service.config.ts-Datei eine neue playwright.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:

    import { defineConfig } from '@playwright/test';
import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/pww/docs/config */
export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    exposeNetwork: '<loopback>',
    connectTimeout: 3 * 60 * 1000, // 3 minutes
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  })
);

    Standardmäßig können Sie mit der Dienstkonfiguration Buildpipelines beschleunigen, indem Sie Tests parallel mit in der Cloud gehosteten Browsern ausführen.

  3. Speichern Sie die Datei, und führen Sie einen Commit für die Datei in Ihr Quellcode-Repository durch.

Aktualisieren der Datei „package.json“

Aktualisieren Sie die Datei package.json in Ihrem Repository, um Details zum Paket „Playwright-Arbeitsbereiche“ im Abschnitt devDependencies hinzuzufügen.

"devDependencies": {
    "@azure/playwright": "latest"
}

Installieren des Dienstpakets

Installieren Sie in Ihrem Projekt das Paket „Playwright-Arbeitsbereiche“.

dotnet add package Azure.Developer.Playwright.NUnit

Durch diesen Befehl wird die Datei „csproj“ Ihres Projekts aktualisiert, indem im Abschnitt „ItemGroup“ die Dienstpaketdetails hinzugefügt werden. Denken Sie daran, diese Änderungen zu committen.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Einrichten der Dienstkonfiguration

  1. Erstellen Sie eine neue PlaywrightServiceNUnitSetup.cs-Datei im Stammverzeichnis Ihres Projekts. Diese Datei erleichtert die Authentifizierung Ihres Clients mit dem Dienst.
  2. Fügen Sie ihr den folgenden Inhalt hinzu:
using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}
  1. Speichern Sie die Datei, und führen Sie einen Commit für die Datei in Ihr Quellcode-Repository durch.

Authentifizierung einrichten

Der CI-Computer, auf dem Playwright-Tests ausgeführt werden, muss sich beim Paket „Playwright-Arbeitsbereichsdienst authentifizieren, um die Browser zum Ausführen der Tests abzurufen.

Der Dienst bietet zwei Authentifizierungsmethoden: Microsoft Entra ID und Zugriffstoken. Es wird dringend empfohlen, Microsoft Entra ID zur Authentifizierung Ihrer Pipelines zu verwenden.

Einrichten der Authentifizierung mithilfe von Microsoft Entra ID

Wenn Sie GitHub Actions verwenden, können Sie mithilfe von GitHub OpenID Connect eine Verbindung mit dem Dienst herstellen. Befolgen Sie die Schritte, um die Integration einzurichten:

Voraussetzungen

Option 1: Microsoft Entra-Anwendung

Option 2: Benutzerseitig zugewiesene verwaltete Identität

Erstellen von GitHub-Geheimnissen
  • Fügen Sie die Werte hinzu, die Sie im vorherigen Schritt erhalten haben als Geheimnisse zu Ihrem GitHub-Repository hinzu. Siehe Einrichten des GitHub Actions-Geheimnisses. Diese Variablen werden in nachfolgenden Schritten des GitHub Action-Workflows verwendet.
GitHub-Geheimnis Quelle (Microsoft Entra-Anwendung oder verwaltete Identität)
AZURE_CLIENT_ID Kunden-ID
AZURE_SUBSCRIPTION_ID Abonnement-ID
AZURE_TENANT_ID Verzeichnis-ID (Mandant)

Hinweis

Für erhöhte Sicherheit wird dringend empfohlen, GitHub-Geheimnisse zu verwenden, um vertrauliche Werte zu speichern, anstatt sie direkt in Ihre Workflowdatei einzulagern.

Einrichten der Authentifizierung mithilfe von Zugriffstoken

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.

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.

  3. Speichern Sie das Zugriffstoken in einem CI-Workflowgeheimnis, und verwenden Sie es im GitHub Actions-Workflow oder in der Azure Pipeline-YAML-Datei.

Geheimer Name Wert
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Fügen Sie den Wert des zuvor erstellten Zugriffstokens ein.

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.

  1. Öffnen der CI-Workflowdefinition.

  2. Fügen Sie die folgenden Schritte hinzu, um Ihre Playwright-Tests in Playwright-Arbeitsbereichen 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.

    
  # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
  # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 
  name: Playwright Tests (Playwright Workspaces)
  on:
    push:
      branches: [main, master]
    pull_request:
      branches: [main, master]

  permissions: # Required when using Microsoft Entra ID to authenticate
    id-token: write
    contents: read

  jobs:
    test:
      timeout-minutes: 60
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4

        - name: Login to Azure with AzPowershell (enableAzPSSession true)
          uses: azure/login@v2
          with:
            client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
            tenant-id: ${{ secrets.AZURE_TENANT_ID }}
            subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
            enable-AzPSSession: true

        - 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:
            # Regional endpoint for Playwright Workspaces
            PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
            # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
          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

Aktualisieren Sie die CI-Workflowdefinition, um Ihre Playwright-Tests mit der Playwright NUnit CLI auszuführen. Sie konfigurieren Ihre Umgebung, indem Sie Umgebungsvariablen angeben.

  1. Öffnen der CI-Workflowdefinition.

  2. Fügen Sie die folgenden Schritte hinzu, um Ihre Playwright-Tests in Playwright-Arbeitsbereichen 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.

    on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using AuthType as EntraId
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4
    # This step is to sign-in to Azure to run tests from GitHub Action workflow. 
    # Choose how to set up authentication to Azure from GitHub Actions. This is one example. 

      - name: Login to Azure with AzPowershell (enableAzPSSession true) 
        uses: azure/login@v2 
        with: 
          client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
          enable-AzPSSession: true 

      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: 8.0.x

      - name: Restore dependencies
        run: dotnet restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Build
        run: dotnet build --no-restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Run Playwright tests
          working-directory: path/to/playwright/folder # update accordingly
        env:
          # Regional endpoint for Playwright Workspaces
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
          # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
        run: dotnet test -- NUnit.NumberOfTestWorkers=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

  1. Speichern und committen Sie Ihre Änderungen.

    Wenn der CI-Workflow ausgelöst wird, werden Ihre Playwright-Tests in Ihrem Playwright-Arbeitsbereich in cloudgehosteten Browsern in 20 parallelen Workern ausgeführt. Die Ergebnisse werden im Dienst veröffentlicht und können im Azure-Portal angezeigt werden.

Vorsicht

Für Playwright-Arbeitsbereiche werden Sie basierend auf der Anzahl der verbrauchten Testminuten belastet. 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

Anzeigen von Testausführungen und Ergebnissen

Playwright kann umfangreiche Testartefakte wie Protokolle, Ablaufverfolgungen und Screenshots für jede Testausführung sammeln. Informationen zum Anzeigen von Testartefakten in Ihrer CI-Pipeline finden Sie in der Playwright-Dokumentation.

Verwandte Inhalte

Sie haben erfolgreich einen kontinuierlichen End-to-End-Testworkflow eingerichtet, um Ihre Playwright-Tests im großen Stil in cloudgehosteten Browsern auszuführen.

  • Last updated on