Szybki start: konfigurowanie ciągłego kompleksowego testowania przy użyciu usługi Microsoft Playwright Testing Preview

Artykuł
11/19/2024

W tym przewodniku Szybki start skonfigurujesz ciągłe kompleksowe testowanie za pomocą programu Microsoft Playwright Testing Preview, 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ągłej integracji, takiego jak GitHub Actions, Azure Pipelines lub inne platformy ciągłej integracji.

Po ukończeniu tego przewodnika Szybki start masz przepływ pracy ciągłej integracji, który uruchamia pakiet testowy Playwright na dużą skalę i ułatwia rozwiązywanie problemów z testami za pomocą testowania w programie Microsoft Playwright.

Ważne

Microsoft Playwright Testing jest obecnie w wersji zapoznawczej. Aby uzyskać postanowienia prawne dotyczące funkcji platformy Azure, które znajdują się w wersji beta, w wersji zapoznawczej lub w inny sposób nie zostały jeszcze wydane w wersji ogólnodostępnej, zobacz Dodatkowe warunki użytkowania dla wersji zapoznawczych platformy Microsoft Azure.

Wymagania wstępne

Konto platformy Azure z aktywną subskrypcją. Jeśli nie masz subskrypcji platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.
Obszar roboczy Testowania dramaturgów firmy Microsoft. Ukończ przewodnik Szybki start: uruchom testy playwright na dużą skalę , aby utworzyć obszar roboczy.

Funkcja GitHub Actions
Azure Pipelines

Konto usługi GitHub. Jeśli nie masz konta usługi GitHub, możesz go utworzyć bezpłatnie.
Repozytorium GitHub zawierające specyfikacje testu playwright i przepływ pracy funkcji GitHub Actions. Aby utworzyć repozytorium, zobacz Tworzenie nowego repozytorium.
Przepływ pracy funkcji GitHub Actions. Jeśli potrzebujesz pomocy dotyczącej rozpoczynania pracy z funkcją GitHub Actions, zobacz Tworzenie pierwszego przepływu pracy
Konfigurowanie uwierzytelniania z funkcji GitHub Actions na platformę Azure. Zobacz Używanie funkcji GitHub Actions do nawiązywania połączenia z platformą Azure

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 wpis tajny przepływu pracy ciągłej integracji, wykonaj następujące kroki:

Zaloguj się do portalu Playwright przy użyciu konta platformy Azure.
Na stronie głównej obszaru roboczego wybierz pozycję Wyświetl przewodnik konfiguracji.

Napiwek

Jeśli masz wiele obszarów roboczych, możesz przełączyć się do innego obszaru roboczego, wybierając nazwę obszaru roboczego w górnej części strony, a następnie wybierz pozycję Zarządzaj wszystkimi obszarami roboczymi.
W obszarze Dodawanie punktu końcowego 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.
Zapisz adres URL punktu końcowego usługi w kluczu tajnym przepływu pracy ciągłej integracji:

Nazwa wpisu tajnego Wartość

PLAYWRIGHT_SERVICE_URL Wklej skopiowany wcześniej adres URL punktu końcowego.

Nazwa wpisu tajnego	Wartość
PLAYWRIGHT_SERVICE_URL	Wklej skopiowany wcześniej adres URL punktu końcowego.

Dodawanie pliku konfiguracji usługi

Jeśli testy playwright nie zostały jeszcze skonfigurowane do uruchamiania ich z usługą, dodaj plik konfiguracji usługi do repozytorium. W następnym kroku określ ten plik konfiguracji usługi w interfejsie wiersza polecenia playwright.

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

Opcjonalnie użyj playwright.service.config.ts pliku w przykładowym repozytorium.

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

import { defineConfig } from '@playwright/test';
import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/mpt/config */
export default defineConfig(
  config,
  getServiceConfig(config, {
    exposeNetwork: '<loopback>',
        timeout: 30000,
    os: ServiceOS.LINUX,
        useCloudHostedBrowsers: true
  }),
  {
    /* 
    Playwright Testing service reporter is added by default.
    This will override any reporter options specified in the base playwright config.
    If you are using more reporters, please update your configuration accordingly.
    */
    reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
  }
);

Domyślnie konfiguracja usługi umożliwia:

Przyspieszanie potoków kompilacji przez równoległe uruchamianie testów przy użyciu przeglądarek hostowanych w chmurze.
Uproszczenie rozwiązywania problemów dzięki łatwemu dostępowi do wyników testów i artefaktów opublikowanych w usłudze.

Można jednak użyć jednej z tych funkcji lub obu tych funkcji. Zobacz Jak używać funkcji usługi i aktualizować plik konfiguracji usługi zgodnie z wymaganiami.

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 usługi Microsoft Playwright Testing w devDependencies sekcji.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.3"
}

Włączanie artefaktów w konfiguracji dramaturgu

playwright.config.ts W pliku projektu upewnij się, że zbierasz wszystkie wymagane artefakty.

  use: {
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'on'
  },

Konfigurowanie konfiguracji usługi

Utwórz nowy plik PlaywrightServiceSetup.cs w katalogu głównym projektu. Ten plik ułatwia uwierzytelnianie klienta za pomocą usługi.

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

using Azure.Developer.MicrosoftPlaywrightTesting.NUnit;
using NUnit.Framework;

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

[SetUpFixture]
public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };

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

Aktualizowanie pliku csproj dla projektu

csproj Zaktualizuj plik w repozytorium, aby dodać szczegółowe informacje o pakiecie usługi Microsoft Playwright Testing w ItemGroup sekcji.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Dodaj lub zaktualizuj `.runsettings` plik dla projektu.

Jeśli testy playwright nie zostały jeszcze skonfigurowane do uruchamiania ich z usługą, dodaj .runsettings plik do repozytorium. W następnym kroku określ ten plik konfiguracji usługi w interfejsie wiersza polecenia playwright.

Utwórz nowy .runsettings plik.

Opcjonalnie użyj .runsettings pliku w przykładowym repozytorium.

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

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
    <TestRunParameters>
        <!-- The below parameters are optional -->
        <Parameter name="Os" value="linux" />
        <!--<Parameter name="RunId" value="sample-run-id1" />-->
        <Parameter name="ServiceAuthType" value="EntraId" />
        <Parameter name="UseCloudHostedBrowsers" value="true" />
        <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
        <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
        <Parameter name="EnableGitHubSummary" value="false" />
        <!--<Parameter name="ExposeNetwork" value="*" />-->
    </TestRunParameters>
  <!-- NUnit adapter -->  
  <NUnit>
    <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
    <NumberOfTestWorkers>10</NumberOfTestWorkers>
  </NUnit>
  <!-- General run configuration -->
  <RunConfiguration>
    <EnvironmentVariables>
      <!-- For debugging selectors, it's recommend to set the following environment variable -->
        <!--<DEBUG>pw:api*</DEBUG>--> 
    </EnvironmentVariables>
  </RunConfiguration>
  <!-- Playwright -->  
  <Playwright>
    <BrowserName>chromium</BrowserName>
    <ExpectTimeout>5000</ExpectTimeout>
    <LaunchOptions>
      <Headless>false</Headless>
      <!--Channel>msedge</Channel-->
    </LaunchOptions>
  </Playwright>
    <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>

Ustawienia w tym pliku umożliwiają:

Przyspieszanie potoków kompilacji przez równoległe uruchamianie testów przy użyciu przeglądarek hostowanych w chmurze.
Publikowanie wyników testów i artefaktów w usłudze w celu szybszego rozwiązywania problemów.

Można jednak użyć jednej z tych funkcji lub obu tych funkcji. Zobacz Jak używać funkcji usługi i aktualizować plik konfiguracji usługi zgodnie z wymaganiami.

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

Włączanie artefaktów w konfiguracji dramaturgu

Włącz artefakty, takie jak zrzut ekranu, filmy wideo i ślady, które mają być przechwytywane przez dramaturga.

Aby uzyskać zrzuty ekranu, zobacz przechwytywanie zrzutów ekranu
Aby uzyskać informacje o filmach wideo, zobacz nagrywanie filmów wideo na potrzeby testów
Aby uzyskać informacje o śladach, zobacz rejestrowanie śladu

Po zebraniu tych artefaktów dołącz je do TestContext elementu , aby upewnić się, że są one dostępne w raportach testowych. Aby uzyskać więcej informacji, zobacz nasz przykładowy projekt dla NUnit

Aktualizowanie definicji przepływu pracy

Zaktualizuj definicję przepływu pracy ciągłej integracji, aby uruchomić testy playwright za pomocą interfejsu wiersza polecenia playwright. Przekaż plik konfiguracji usługi jako parametr wejściowy dla interfejsu wiersza polecenia programu Playwright. Środowisko można skonfigurować, określając zmienne środowiskowe.

Otwieranie definicji przepływu pracy ciągłej integracji

Dodaj następujące kroki, aby uruchomić testy dramaturgu w narzędziu Microsoft Playwright Testing.

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 interfejsu wiersza polecenia Playwright na innych platformach ciągłej integracji.

Funkcja GitHub Actions
Azure Pipelines


  # 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. 
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 }} 
    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 Microsoft Playwright Testing
    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
  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

- task: PowerShell@2
  enabled: true
  displayName: "Install dependencies"
  inputs:
    targetType: 'inline'
    script: 'npm ci'
    workingDirectory: path/to/playwright/folder # update accordingly

- task: AzureCLI@2
  displayName: Run Playwright Test  
    env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      npx playwright test -c playwright.service.config.ts --workers=20
  addSpnToEnvironment: true
  workingDirectory: path/to/playwright/folder # update accordingly

- task: PublishPipelineArtifact@1
  displayName: Upload Playwright report
  inputs:
    targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
    artifact: 'Playwright tests'
    publishLocation: 'pipeline'

Zaktualizuj definicję przepływu pracy ciągłej integracji, aby uruchomić testy playwright za pomocą interfejsu wiersza polecenia Playwright NUnit. .runsettings Przekaż plik jako parametr wejściowy dla interfejsu wiersza polecenia programu Playwright. Środowisko można skonfigurować, określając zmienne środowiskowe.

Otwórz definicję przepływu pracy ciągłej integracji.

Dodaj następujące kroki, aby uruchomić testy dramaturgu w narzędziu Microsoft Playwright Testing.

Funkcja GitHub Actions
Azure Pipelines

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 }} 
          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 Microsoft Playwright Testing
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
          PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
        run: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- 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

- task: UseDotNet@2
  inputs:
    packageType: 'sdk'
    version: '8.x'
    installationPath: $(Agent.ToolsDirectory)/dotnet

- checkout: self

- script: dotnet restore
  displayName: 'Restore dependencies'
  workingDirectory: path/to/playwright/folder # update accordingly

- script: dotnet build --no-restore
  displayName: 'Build'
  workingDirectory: path/to/playwright/folder # update accordingly

- task: AzureCLI@2
  displayName: Run Playwright Test  
    env:
    PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
  inputs:
    azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
    scriptType: 'pscore'
    scriptLocation: 'inlineScript'
    inlineScript: |
      dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20
  addSpnToEnvironment: true
  workingDirectory: path/to/playwright/folder # update accordingly

- task: PublishPipelineArtifact@1
  displayName: Upload Playwright report
  inputs:
    targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
    artifact: 'Playwright tests'
    publishLocation: 'pipeline'

Zapisz i zatwierdź zmiany.

Po wyzwoleniu przepływu pracy ciągłej integracji testy dramaturgu są uruchamiane w obszarze roboczym Testowanie w programie Microsoft Playwright w przeglądarkach hostowanych w chmurze w 20 równoległych procesach roboczych. Zebrane wyniki i artefakty są publikowane w usłudze i można je wyświetlić w portalu usługi.

Uwaga

Funkcja raportowania jest domyślnie włączona dla istniejących obszarów roboczych. Jest to wdrażane na etapach i potrwa kilka dni. Aby uniknąć błędów, przed kontynuowaniem upewnij się, że Rich diagnostics using reporting ustawienie jest włączone dla obszaru roboczego. Aby uzyskać więcej informacji, zobacz Włączanie raportowania dla obszaru roboczego.

Uwaga

W przypadku testowania dramaturgowego firmy Microsoft opłaty są naliczane na podstawie liczby wykorzystanych minut testu i opublikowanych wyników testów. 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 i wyników testów.

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 w portalu Playwright

Teraz możesz rozwiązać problemy z potokiem ciągłej integracji w portalu Playwright.

Po zakończeniu przebiegu testu zostanie wygenerowany link do portalu dramaturgu. Otwórz ten link, aby wyświetlić szczegółowe wyniki testu i skojarzone artefakty. W portalu są wyświetlane podstawowe informacje, w tym:
- Szczegóły kompilacji ciągłej integracji
- Ogólny stan przebiegu testu
- Identyfikator zatwierdzenia połączony z przebiegem testowym
Portal Dramaturg zawiera wszystkie niezbędne informacje dotyczące rozwiązywania problemów. Masz następujące możliwości:
- Przełączanie się między ponownych prób.
- Wyświetl szczegółowe dzienniki błędów, kroki testu i dołączone artefakty, takie jak zrzuty ekranu lub wideo.
- Przejdź bezpośrednio do przeglądarki śledzenia, aby uzyskać głębszą analizę.
Przeglądarka śledzenia umożliwia wizualne przechodzenie przez wykonywanie testów. Masz następujące możliwości:
- Użyj osi czasu, aby umieścić wskaźnik myszy na poszczególnych krokach, ujawniając stan strony przed i po każdej akcji.
- Sprawdź szczegółowe dzienniki, migawki DOM, aktywność sieci, błędy i dane wyjściowe konsoli dla każdego kroku.

Napiwek

Funkcje usługi Microsoft Playwright Testing można używać niezależnie. Wyniki testów można publikować w portalu bez korzystania z funkcji przeglądarek hostowanych w chmurze, a także użyć tylko przeglądarek hostowanych w chmurze w celu przyspieszenia pakietu testów bez publikowania wyników testu. Aby uzyskać szczegółowe informacje, zobacz How to use service features (Jak używać funkcji usługi).

Uwaga

Wyniki testów i artefakty, które publikujesz, są przechowywane w usłudze przez 90 dni. Następnie zostaną one automatycznie usunięte.

Pomyślnie skonfigurowano ciągły przepływ pracy kompleksowego testowania w celu uruchamiania testów playwright na dużą skalę w przeglądarkach hostowanych w chmurze.

Udostępnij za pośrednictwem

Szybki start: konfigurowanie ciągłego kompleksowego testowania przy użyciu usługi Microsoft Playwright Testing Preview

Wymagania wstępne

Uzyskiwanie adresu URL punktu końcowego regionu usługi

Dodawanie pliku konfiguracji usługi

Aktualizowanie pliku package.json

Włączanie artefaktów w konfiguracji dramaturgu

Konfigurowanie konfiguracji usługi

Aktualizowanie pliku csproj dla projektu

Dodaj lub zaktualizuj `.runsettings` plik dla projektu.

Włączanie artefaktów w konfiguracji dramaturgu

Aktualizowanie definicji przepływu pracy

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

Opinia

Dodatkowe zasoby

Udostępnij za pośrednictwem

Szybki start: konfigurowanie ciągłego kompleksowego testowania przy użyciu usługi Microsoft Playwright Testing Preview

Wymagania wstępne

Uzyskiwanie adresu URL punktu końcowego regionu usługi

Dodawanie pliku konfiguracji usługi

Aktualizowanie pliku package.json

Włączanie artefaktów w konfiguracji dramaturgu

Konfigurowanie konfiguracji usługi

Aktualizowanie pliku csproj dla projektu

Dodaj lub zaktualizuj .runsettings plik dla projektu.

Włączanie artefaktów w konfiguracji dramaturgu

Aktualizowanie definicji przepływu pracy

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

Powiązana zawartość

Opinia

Dodatkowe zasoby

Dodaj lub zaktualizuj `.runsettings` plik dla projektu.