Szybkie uruchomienie: przeprowadzanie zaawansowanej diagnostyki za pomocą raportowania w Playwright Workspaces

W tym przewodniku Szybki start dowiesz się, jak debugować testy Playwright przy użyciu funkcji raportowania w obszarach roboczych Playwright. Wykonaj zaawansowaną diagnostykę testów Playwright, zapisując raporty testowe w Azure Storage i wyświetlając je w portalu Azure, używając reportera Playwright Workspaces.

Wymagania wstępne

• Konto Azure z aktywną subskrypcją. Jeśli nie masz subskrypcji Azure, przed rozpoczęciem utwórz darmowe konto.
• Twoje konto platformy Azure wymaga roli Właściciel, Współautor lub jeden z ról administratora klasycznego.
• Projekt Playwright korzystający z Playwright runner i zestawu SDK języka JavaScript (NUnit oraz innych modułów uruchamiających nie są obecnie obsługiwane). Jeśli nie masz projektu, utwórz go przy użyciu dokumentacji wprowadzającej playwright lub użyj przykładowego projektu Playwright Workspaces.
• Projekt Playwright musi używać pakietu Playwright (@plawright/test) w wersji 1.57 lub nowszej.
• Azure CLI Jeśli nie masz interfejsu wiersza polecenia platformy Azure, zobacz Instalowanie interfejsu wiersza polecenia platformy Azure.
• Obszar roboczy Playwright musi używać uwierzytelniania Microsoft Entra ID. Uwierzytelnianie przy użyciu tokenu dostępu nie jest obsługiwane w przypadku raportowania.

Włącz raportowanie i połącz konto magazynu z obszarem roboczym

Aby rozpocząć korzystanie z raportowania w obszarach roboczych Playwright, pierwszym krokiem jest włączenie raportowania w swojej przestrzeni roboczej oraz powiązanie konta do przechowywania w celu gromadzenia artefaktów raportowania. Możesz rozpocząć pracę z nowym obszarem roboczym lub użyć istniejącego obszaru roboczego.

Dodaj role kontroli dostępu na podstawie ról (RBAC) dla powiązanego konta magazynowego

1. Otwórz powiązane konto magazynowe w portalu Azure portal.

2. Przejdź do karty Kontrola dostępu (IAM).

   

3. Wybierz Dodaj przypisanie roli.

   

4. W obszarze Role funkcji zadania wyszukaj i wybierz rolę Współautor danych obiektu blob usługi Storage , a następnie kliknij przycisk Dalej.

   

5. Wybierz i dodaj wszystkich członków, którzy uruchamiają testy.

   

6. Kliknij Przejrzyj i przypisz.

Instalowanie pakietu Playwright Workspaces

Aby użyć obszarów roboczych Playwright, zainstaluj pakiet Playwright Workspaces.

npm init @azure/playwright@latest

To polecenie generuje plik playwright.service.config.ts, który kieruje i uwierzytelnia Playwright do przestrzeni roboczych Playwright.

Jeśli masz już ten plik, pakiet prosi o zastąpienie go.

Włącz reportera HTML i Playwright Workspaces

Aby użyć funkcji raportowania Playwright Workspaces, włącz reportera "html" oraz reportera Playwright Workspaces, dodając następujące ustawienie w pliku playwright.service.config.ts —

reporter: [
    ["html", { open: "never" }], // HTML reporter must come first
    ["@azure/playwright/reporter"], // Azure reporter uploads HTML report
]

Włącz artefakty w konfiguracji Playwrighta

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

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

Konfigurowanie punktu końcowego przeglądarki

W konfiguracji należy podać punkt końcowy przeglądarki 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 przeglądarki, 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 .

   

3. W obszarze Dodawanie punktu końcowego przeglądarki do konfiguracji skopiuj adres URL punktu końcowego.

   Upewnij się, że ten adres URL jest dostępny w zmiennej środowiskowej PLAYWRIGHT_SERVICE_URL .

   

Konfigurowanie środowiska

Aby skonfigurować środowisko, należy skonfigurować zmienną PLAYWRIGHT_SERVICE_URL środowiskową z wartością uzyskaną w poprzednich krokach.

Użyj modułu dotenv do zarządzania środowiskiem. Używając dotenv, można zdefiniować zmienne środowiskowe w pliku .env.

1. dotenv Dodaj moduł do projektu:

   npm i --save-dev dotenv
   

2. Dodaj następujący fragment kodu w pliku playwright.service.config.ts:

   require('dotenv').config();
   

3. .env Utwórz plik obok playwright.config.ts pliku w projekcie Playwright:

   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Pamiętaj, aby zastąpić {MY-REGION-ENDPOINT} symbol zastępczy tekstu skopiowaną wcześniej wartością.

Konfigurowanie uwierzytelniania

Aby uruchomić testy Playwright w obszarze roboczym Playwright, musisz uwierzytelnić klienta Playwright, którym uruchamiasz testy, z usługą. Uwierzytelnij się z lokalnego komputera deweloperskiego lub maszyny CI.

Konfigurowanie uwierzytelniania przy użyciu identyfikatora Entra firmy Microsoft

Microsoft Entra ID jest jedynym wspieranym mechanizmem uwierzytelniania do korzystania z funkcji raportowania w obszarze roboczym Playwright. Z poziomu lokalnej maszyny deweloperów możesz zalogować się przy użyciu interfejsu wiersza polecenia platformy Azure

az login

Uruchamianie testów za pomocą obszarów roboczych programu Playwright

Ukończono konfigurację uruchamiania testów Playwright w chmurze za pomocą Playwright Workspaces. Możesz użyć interfejsu wiersza polecenia playwright do uruchamiania testów lub użyć rozszerzenia Playwright Test Visual Studio Code.

Debugowanie przebiegów testów i wyników w portalu Azure

Dodawanie ról kontroli dostępu opartej na rolach (RBAC) dla połączonego konta magazynu

1. Otwórz połączone konto magazynu w witrynie Azure Portal.

2. Przejdź do karty Kontrola dostępu (IAM).

   

3. Wybierz Dodaj przypisanie roli.

   

4. W obszarze Role administratora uprzywilejowanego wyszukaj i wybierz rolę Współautor* i kliknij przycisk Dalej.

   

5. Wybierz i dodaj wszystkich członków, którzy mogą wyświetlać raporty testowe.

   

6. Kliknij Przejrzyj i przypisz.

(Tylko w przypadku włączenia śledzenia) Zezwól na przeglądarkę publicznych śladów z listy dozwolonych na połączonym koncie magazynującym

1. Otwórz połączone konto magazynowe w witrynie Azure portal.

2. Przejdź do pozycji Ustawienia —> udostępnianie zasobów (CORS).

   

3. W obszarze Blob Service dodaj nowy rekord:

   • Dozwolone źródła: https://trace.playwright.dev
   • Dozwolone metody: GET, OPTIONS
   • Maksymalny wiek: wprowadź wartość z zakresu od 0 do 2147483647.

   

4. Wybierz Zapisz.

Wyświetlanie zapisanych raportów testowych w witrynie Azure Portal

Teraz możesz rozwiązywać problemy z przypadkami testowymi, które zakończyły się niepowodzeniem w portalu Azure.

1. Po zakończeniu przebiegu testu reporter wygeneruje link do strony Przebiegi testowe w witrynie Azure Portal. Otwórz ten link, aby wyświetlić szczegółowe wyniki testu i skojarzone artefakty.

   

2. Strona Przebiegi testów zawiera wszystkie niezbędne informacje dotyczące rozwiązywania problemów. Masz następujące możliwości:

   • 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 w celu przeprowadzenia dogłębnej analizy.

   

3. Przeglądarka Trace Viewer umożliwia wizualne przechodzenie przez proces wykonywania 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.