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

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

• 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

Azure Pipelines

• Organizacja i projekt usługi Azure DevOps. Jeśli nie masz organizacji usługi Azure DevOps, możesz go utworzyć bezpłatnie.
• Definicja potoku. Jeśli potrzebujesz pomocy dotyczącej rozpoczynania pracy z usługą Azure Pipelines, zobacz tworzenie pierwszego potoku.
• Połączenie usługi Azure Resource Manager w celu bezpiecznego uwierzytelniania w usłudze z usługi Azure Pipelines, zobacz Połączenie usługi Azure Resource Manager

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:

1. Zaloguj się do portalu Playwright przy użyciu konta platformy Azure.

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

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

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

Dodawanie pliku konfiguracji usługi

Jeśli nie skonfigurowano jeszcze testów playwright do uruchamiania ich w przeglądarkach hostowanych w chmurze, dodaj plik konfiguracji usługi do repozytorium. W następnym kroku określ ten plik konfiguracji usługi w interfejsie wiersza polecenia playwright.

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

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

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 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'
  },

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.

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

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

   
     # 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: 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
   

   Azure Pipelines

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

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

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. Zobacz Włączanie raportowania dla obszaru roboczego.

Uwaga

W przypadku testowania playwright firmy Microsoft opłaty są naliczane na podstawie łącznej liczby minut testu i opublikowanego wyniku 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 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.

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

   

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

   

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

Powiązana zawartość

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.

• Udzielanie użytkownikom dostępu do obszaru roboczego

• Zarządzanie obszarami roboczymi