Udostępnij za pomocą

Szybki start: konfigurowanie ciągłego kompleksowego testowania przy użyciu obszarów roboczych playwright

W tym przewodniku Szybki start skonfigurujesz ciągłe kompleksowe testowanie za pomocą obszarów roboczych playwright, aby sprawdzić, czy aplikacja internetowa działa prawidłowo w różnych przeglądarkach i systemach operacyjnych z każdym zatwierdzeniem kodu i łatwe rozwiązywanie problemów z testami przy użyciu pulpitu nawigacyjnego usługi. Dowiedz się, jak dodać testy Playwright do przepływu pracy CI, takiego jak GitHub Actions, Azure Pipelines lub inne platformy CI.

Po ukończeniu tego przewodnika Szybki start będziesz mieć przepływ pracy ciągłej integracji, który uruchamia zestaw testów Playwright na dużą skalę i ułatwia rozwiązywanie problemów z testami za pomocą obszarów roboczych programu Playwright.

Wymagania wstępne

Uzyskiwanie adresu URL punktu końcowego regionu usługi

W konfiguracji usługi należy podać punkt końcowy usługi specyficzny dla regionu. Punkt końcowy zależy od regionu świadczenia usługi Azure wybranego podczas tworzenia obszaru roboczego.

Aby uzyskać adres URL punktu końcowego usługi i zapisać go jako tajny klucz przepływu pracy CI, wykonaj następujące kroki:

  1. Zaloguj się do witryny Azure Portal przy użyciu konta platformy Azure i przejdź do obszaru roboczego.

  2. Wybierz stronę Wprowadzenie .

    Zrzut ekranu przedstawiający sposób przechodzenia do strony Wprowadzenie.

  3. W sekcji Dodaj punkt końcowy regionu w konfiguracji, skopiuj adres URL punktu końcowego usługi.

    Adres URL punktu końcowego jest zgodny z regionem świadczenia usługi Azure wybranym podczas tworzenia obszaru roboczego.

  4. Zapisz adres URL punktu końcowego usługi w kluczu tajnym przepływu pracy ciągłej integracji:

    Tajna nazwa Wartość
    PLAYWRIGHT_SERVICE_URL Wklej skopiowany wcześniej adres URL punktu końcowego.

Dodawanie pliku konfiguracji usługi

Jeśli nie masz skonfigurowanych testów Playwright do uruchamiania z tą usługą, dodaj plik konfiguracji usługi do swojego repozytorium. W następnym kroku określ ten plik konfiguracji usługi w CLI Playwright.

  1. Utwórz nowy plik playwright.service.config.ts obok playwright.config.ts pliku.

    Użyj opcjonalnie pliku playwright.service.config.ts w przykładowym repozytorium.

  2. Dodaj do niego następującą zawartość:

    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(),
  })
);

    Domyślnie konfiguracja usługi umożliwia przyspieszenie potoków kompilacji przez równoległe uruchamianie testów przy użyciu przeglądarek hostowanych w chmurze.

  3. Zapisz i zatwierdź plik w repozytorium kodu źródłowego.

Aktualizowanie pliku package.json

package.json Zaktualizuj plik w repozytorium, aby dodać szczegółowe informacje o pakiecie Playwright Workspaces w devDependencies sekcji.

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

Instalowanie pakietu usługi

W projekcie zainstaluj pakiet Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

To polecenie aktualizuje plik projektu csproj , dodając szczegóły pakietu usługi do ItemGroup sekcji. Pamiętaj, aby zatwierdzić te zmiany.

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

Konfiguracja usługi

  1. Utwórz nowy plik PlaywrightServiceNUnitSetup.cs w katalogu głównym projektu. Ten plik ułatwia uwierzytelnianie klienta za pomocą usługi.
  2. Dodaj do niego następującą zawartość:
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. Zapisz i zatwierdź plik w repozytorium kodu źródłowego.

Konfigurowanie uwierzytelniania

Maszyna ciągłej integracji z uruchomionymi testami playwright musi uwierzytelniać się w usłudze Playwright Workspaces, aby przeglądarki uruchamiały testy.

Usługa oferuje dwie metody uwierzytelniania: Microsoft Entra ID i Tokeny dostępu. Zdecydowanie zalecamy używanie identyfikatora Entra firmy Microsoft do uwierzytelniania potoków.

Konfigurowanie uwierzytelniania przy użyciu identyfikatora Entra firmy Microsoft

Jeśli używasz funkcji GitHub Actions, możesz nawiązać połączenie z usługą przy użyciu narzędzia GitHub OpenID Connect. Wykonaj kroki konfigurowania integracji:

Wymagania wstępne

Opcja 1: aplikacja Microsoft Entra

Opcja 2. Tożsamość zarządzana przypisana przez użytkownika

Tworzenie tajemnic GitHub
Sekret GitHub Źródło (Aplikacja Microsoft Entra lub zarządzana tożsamość)
AZURE_CLIENT_ID ID klienta
AZURE_SUBSCRIPTION_ID Identyfikator subskrypcji
AZURE_TENANT_ID Identyfikator katalogu (dzierżawcy)

Uwaga / Notatka

Dla poprawy bezpieczeństwa zdecydowanie zaleca się używanie tajnych danych GitHub do przechowywania wartości poufnych, zamiast umieszczania ich bezpośrednio w pliku roboczym.

Konfigurowanie uwierzytelniania przy użyciu tokenów dostępu

Ostrzeżenie

Zdecydowanie zalecamy używanie identyfikatora Entra firmy Microsoft do uwierzytelniania w usłudze. Jeśli używasz tokenów dostępu, zobacz Jak zarządzać tokenami dostępu

Możesz wygenerować token dostępu z obszaru roboczego Playwright i użyć go w konfiguracji. Zdecydowanie zalecamy jednak używanie identyfikatora Entra firmy Microsoft do uwierzytelniania ze względu na jego zwiększone zabezpieczenia. Tokeny dostępu, choć wygodne, działają jak hasła długotrwałe i są bardziej podatne na naruszenie zabezpieczeń.

  1. Uwierzytelnianie przy użyciu tokenów dostępu jest domyślnie wyłączone. Aby użyć, włącz uwierzytelnianie oparte na tokenach dostępu.

  2. Konfigurowanie uwierzytelniania przy użyciu tokenów dostępu.

  3. Zapisz token dostępu w tajnym kluczu ciągłej integracji i użyj go w przepływie pracy GitHub Actions lub w pliku YAML w usłudze Azure Pipeline.

Tajna nazwa Wartość
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Wklej wartość utworzonego wcześniej tokenu dostępu.

Aktualizowanie definicji przepływu pracy

Zaktualizuj definicję przepływu pracy CI, aby uruchomić testy Playwright za pomocą Playwright CLI. Podaj plik konfiguracji usługi jako parametr wejściowy dla CLI programu Playwright. Środowisko można skonfigurować, określając zmienne środowiskowe.

  1. Otwórz definicję przepływu pracy CI (ciągłej integracji).

  2. Dodaj następujące kroki, aby uruchomić testy dramaturgów w obszarach roboczych dramaturgu.

    W poniższych krokach opisano zmiany przepływu pracy dla funkcji GitHub Actions lub usługi Azure Pipelines. Podobnie możesz uruchomić testy Playwright przy użyciu Playwright CLI na innych platformach ciągłej integracji.

    
  # 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

Zaktualizuj definicję przepływu pracy CI, aby uruchomić testy Playwright za pomocą Playwright NUnit CLI. Środowisko można skonfigurować, określając zmienne środowiskowe.

  1. Otwórz definicję przepływu pracy CI (ciągłej integracji).

  2. Dodaj następujące kroki, aby uruchomić testy dramaturgów w obszarach roboczych dramaturgu.

    W poniższych krokach opisano zmiany przepływu pracy dla funkcji GitHub Actions lub usługi Azure Pipelines. Podobnie możesz uruchomić testy Playwright przy użyciu Playwright CLI na innych platformach ciągłej integracji.

    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. Zapisz i zatwierdź zmiany.

    Po wyzwoleniu przepływu pracy ciągłej integracji testy playwright są uruchamiane w obszarze roboczym Playwright w przeglądarkach hostowanych w chmurze w 20 równoległych procesach roboczych. Wyniki są publikowane w usłudze i można je wyświetlić w witrynie Azure Portal.

Ostrzeżenie

W przypadku obszarów roboczych playwright opłaty są naliczane na podstawie liczby zużytych minut testu. Jeśli jesteś użytkownikiem po raz pierwszy lub rozpoczynasz pracę z bezpłatną wersją próbną, możesz zacząć od uruchomienia pojedynczego testu na dużą skalę zamiast pełnego zestawu testów, aby uniknąć wyczerpania bezpłatnych minut testu.

Po sprawdzeniu, czy przebieg testu przebiegnie pomyślnie, możesz stopniowo zwiększyć obciążenie testowe, uruchamiając więcej testów w usłudze.

Możesz uruchomić pojedynczy test z usługą przy użyciu następującego wiersza polecenia:

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

Wyświetlanie przebiegów testów i wyników

Dramaturg może zbierać zaawansowane artefakty testowe, takie jak dzienniki, ślady i zrzuty ekranu na każdym przebiegu testu. Aby dowiedzieć się, jak wyświetlać artefakty testowe w potoku ciągłej integracji, zobacz dokumentację dramaturgu.

Treści powiązane

Pomyślnie skonfigurowano ciągły kompleksowy przepływ pracy testów end-to-end, aby uruchamiać testy Playwright na dużą skalę w przeglądarkach hostowanych w chmurze.

  • Last updated on