Szybki start: uruchamianie pełnych testów na dużą skalę przy użyciu obszarów roboczych programu Playwright

Z tego krótkiego przewodnika dowiesz się, jak uruchamiać testy Playwright z wysoce równoległymi chmurowymi przeglądarkami przy użyciu Playwright Workspaces. Użyj infrastruktury chmury, aby zweryfikować aplikację w wielu przeglądarkach, urządzeniach i systemach operacyjnych.

Po ukończeniu tego szybkiego przewodnika będziesz mieć obszar roboczy Playwright do uruchamiania testów Playwright na dużą skalę.

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 Dramaturg. Jeśli nie masz projektu, utwórz go przy użyciu dokumentacji wprowadzającej playwright lub skorzystaj z naszego przykładowego projektu Playwright Workspaces.
• Interfejs wiersza polecenia platformy Azure. Jeśli nie masz interfejsu wiersza polecenia platformy Azure, zobacz Instalowanie interfejsu wiersza polecenia platformy Azure.

Utwórz przestrzeń roboczą

Aby rozpocząć uruchamianie testów playwright w przeglądarkach w chmurze, należy najpierw utworzyć obszar roboczy Playwright.

1. Zaloguj się do witryny Azure Portal.

2. Wybierz przycisk menu w lewym górnym rogu portalu, a następnie wybierz pozycję Utwórz zasób zasób .

   

3. W polu wyszukiwania wpisz Playwright Workspaces .

4. Wybierz kartę Przestrzenie robocze dramaturga , a następnie wybierz pozycję Utwórz.

   

5. Podaj następujące informacje, aby skonfigurować nowy obszar roboczy dramaturga:

   (No changes needed)	Opis
   Subskrypcja	Wybierz subskrypcję platformy Azure, której chcesz użyć dla tego obszaru roboczego Playwright.
   Grupa zasobów	Wybierz istniejącą grupę zasobów. Lub wybierz Utwórz nowe, a następnie wprowadź unikalną nazwę dla nowej grupy zasobów.
   Nazwa	Wprowadź unikatową nazwę, aby zidentyfikować obszar roboczy. Nazwa może zawierać tylko znaki alfanumeryczne i łączniki oraz długość od 3 do 24 znaków.
   Lokalizacja	Wybierz lokalizację geograficzną do hostowania obszaru roboczego. Ta lokalizacja określa również, gdzie są przechowywane wyniki wykonywania testów.

   Uwaga / Notatka

   Opcjonalnie możesz skonfigurować więcej szczegółów na karcie Tagi . Tagi to pary nazw/wartości, które umożliwiają kategoryzowanie zasobów i wyświetlanie skonsolidowanego rozliczeń przez zastosowanie tego samego tagu do wielu zasobów i grup zasobów.

6. Po zakończeniu konfigurowania zasobu wybierz Przegląd i utwórz.

7. Przejrzyj wszystkie ustawienia konfiguracji i wybierz pozycję Utwórz , aby rozpocząć wdrażanie obszaru roboczego Playwright.

   Po zakończeniu procesu zostanie wyświetlony komunikat o powodzeniu wdrożenia.

8. Aby wyświetlić nowy obszar roboczy, wybierz pozycję Przejdź do zasobu.

   

Instalowanie pakietu Playwright Workspaces

Aby użyć usługi, zainstaluj pakiet Playwright Workspaces.

npm init @azure/playwright@latest

Spowoduje to wygenerowanie pliku playwright.service.config.ts, który służy do przekierowywania i uwierzytelniania Playwright w Playwright Workspaces.

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

Aby użyć usługi, zainstaluj pakiet Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

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 PLAYWRIGHT_SERVICE_URL zmiennej środowiskowej.

   

Konfigurowanie środowiska

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

Zalecamy użycie modułu dotenv do zarządzania środowiskiem. Za pomocą dotenvpolecenia zdefiniujesz zmienne środowiskowe w .env pliku .

1. dotenv Dodaj moduł do projektu:

   npm i --save-dev dotenv
   

2. Dodaj następujący fragment kodu w 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ą.

Konfiguracja usługi

Utwórz plik PlaywrightServiceSetup.cs w projekcie z następującą zawartością.

using Azure.Developer.Playwright.NUnit;
using Azure.Identity;

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

[SetUpFixture]
public class PlaywrightServiceNUnitSetup  : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential()
    ) 
    {}
}

Uwaga / Notatka

Upewnij się, że projekt używa Microsoft.Playwright.NUnit wersji 1.50 lub nowszej.

Konfigurowanie uwierzytelniania

Aby uruchomić testy Playwright w obszarze roboczym Playwright, musisz uwierzytelnić klienta Playwright, którym uruchamiasz testy, z usługą. Może to być lokalna maszyna deweloperna lub maszyna ciągłej integracji.

Usługa oferuje dwie metody uwierzytelniania: Microsoft Entra ID i Tokeny dostępu.

Identyfikator Entra firmy Microsoft używa poświadczeń platformy Azure, co wymaga zalogowania się do konta platformy Azure w celu uzyskania bezpiecznego dostępu. Alternatywnie możesz wygenerować token dostępu z obszaru roboczego Playwright i użyć go w konfiguracji.

Konfigurowanie uwierzytelniania przy użyciu identyfikatora Entra firmy Microsoft

Identyfikator Entra firmy Microsoft jest domyślnym i zalecanym uwierzytelnianiem dla usługi. Z poziomu lokalnej maszyny deweloperów możesz użyć interfejsu wiersza polecenia platformy Azure do logowania

az login

Uwaga / Notatka

Jeśli jesteś częścią wielu dzierżaw firmy Microsoft Entra, upewnij się, że logujesz się do dzierżawy, do której należy obszar roboczy. Identyfikator dzierżawy można uzyskać z witryny Azure Portal. Zobacz Znajdowanie dzierżawy firmy Microsoft Entra. Po otrzymaniu identyfikatora zaloguj się przy użyciu polecenia az login --tenant <TenantID>

Konfigurowanie uwierzytelniania przy użyciu tokenów 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.

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.

Uruchamiaj testy na dużą skalę z Playwright Workspaces

Teraz przygotowałeś konfigurację do 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.

Uruchamianie pojedynczego testu z usługą

W przypadku Playwright Workspaces naliczane są opłaty na podstawie łącznej liczby 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 zamiast pełnego zestawu testów, aby uniknąć wyczerpania limitów bezpłatnej wersji próbnej.

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.

Wykonaj następujące kroki, aby uruchomić pojedynczy test przy użyciu Playwright Workspaces:

Interfejs wiersza polecenia dramaturga

Aby uruchomić testy przy użyciu interfejsu wiersza polecenia Playwright Workspaces, przekaż plik konfiguracji usługi jako parametr wiersza polecenia.

1. Otwórz okno terminalu.

2. Wprowadź następujące polecenie, aby uruchomić test playwright w przeglądarkach zdalnych w obszarze roboczym:

   Zastąp {name-of-file.spec.ts} symbol zastępczy tekst nazwą pliku specyfikacji testu.

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

   Po zakończeniu testu możesz wyświetlić stan testu w terminalu.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Aby uruchomić pojedynczy test Playwright w Visual Studio Code z Playwright Workspaces, wybierz plik konfiguracji usługi w widoku Eksplorator Testów. Następnie wybierz i uruchom test z listy testów.

1. Zainstaluj rozszerzenie Playwright Test programu Visual Studio Code.

2. Otwórz widok Eksploratora testów na pasku działań.

   Eksplorator testów automatycznie wykrywa testy playwright i konfigurację usługi w projekcie.

   

3. Wybierz pozycję Wybierz profil domyślny, a następnie wybierz domyślne projekty z pliku konfiguracji usługi.

   Zwróć uwagę, że profile uruchamiania usługi pochodzą z dodanego playwright.service.config.ts wcześniej pliku.

   Ustawiając profil domyślny, możesz automatycznie uruchamiać testy za pomocą usługi lub uruchamiać jednocześnie wiele projektów playwright.

   

4. Z listy testów wybierz przycisk Uruchom test obok testu, aby go uruchomić.

   Test jest uruchamiany w projektach wybranych w profilu domyślnym. Jeśli wybrano co najmniej jeden projekt z konfiguracji usługi, test zostanie uruchomiony w przeglądarkach zdalnych w obszarze roboczym.

   

   Wskazówka

   Nadal można debugować kod testowy podczas uruchamiania testów w przeglądarkach zdalnych za pomocą przycisku Debuguj test .

5. Wyniki testu można wyświetlić bezpośrednio w programie Visual Studio Code.

   

Teraz możesz uruchomić wiele testów z usługą lub uruchomić cały zestaw testów w przeglądarkach zdalnych.

Ostrzeżenie

W zależności od rozmiaru zestawu testów mogą być naliczane dodatkowe opłaty za minuty testu i wyniki testów poza przydzieloną bezpłatną minutą testu i bezpłatnymi wynikami testu.

Uruchamianie pełnego zestawu testów z usługą

Teraz, gdy sprawdziłeś, że możesz uruchomić pojedynczy test z Playwright Workspaces, możesz uruchomić cały zestaw testów Playwright na dużą skalę.

Wykonaj następujące kroki, aby uruchomić pełny zestaw testowy Playwright z Playwright Workspaces:

Interfejs wiersza polecenia dramaturga

Po uruchomieniu wielu testów Playwright lub pełnego zestawu testów z Playwright Workspaces można opcjonalnie określić liczbę równoległych pracowników jako parametr wiersza polecenia.

1. Otwórz okno terminalu.

2. Wprowadź następujące polecenie, aby uruchomić pakiet testowy Playwright w przeglądarkach zdalnych w obszarze roboczym:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   W zależności od rozmiaru zestawu testów to polecenie uruchamia testy na maksymalnie 20 równoległych procesach roboczych.

   Po zakończeniu testu możesz wyświetlić stan testu w terminalu.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   

Visual Studio Code

Aby uruchomić zestaw testowy Playwright w programie Visual Studio Code z funkcją obszarów roboczych Playwright:

1. Otwórz widok Eksploratora testów na pasku działań.

2. Wybierz przycisk Uruchom testy , aby uruchomić wszystkie testy z obszarami roboczymi programu Playwright.

   Po uruchomieniu wszystkich testów zostanie użyty profil domyślny. W poprzednim kroku skonfigurowano profil domyślny do używania projektów z konfiguracji usługi.

   

   Wskazówka

   Nadal można debugować kod testowy podczas uruchamiania testów w przeglądarkach zdalnych za pomocą przycisku Debuguj testy .

3. Alternatywnie możesz wybrać określoną konfigurację usługi z listy, aby uruchomić tylko testy dla określonej konfiguracji przeglądarki.

   

4. Wszystkie wyniki testów można wyświetlić na karcie Wyniki testu.

Uruchom testy playwright dla przeglądarek zarządzanych przez usługę przy użyciu utworzonej powyżej konfiguracji.

dotnet test -- NUnit.NumberOfTestWorkers=20

Po zakończeniu przebiegu testu możesz wyświetlić stan testu w terminalu.

Starting test execution, please wait...

A total of 100 test files matched the specified pattern.

Passed!  - Failed:     0, Passed:     100, Skipped:     0, Total:     100, Duration: 59 s - PlaywrightTestsNUnit.dll (net7.0)

Workload updates are available. Run `dotnet workload list` for more information.

Optymalizowanie konfiguracji równoległego procesu roboczego

Gdy testy będą działać bezproblemowo z usługą, poeksperymentuj ze zmienną liczbą równoległych procesów roboczych, aby określić optymalną konfigurację, która minimalizuje czas ukończenia testu.

W przypadku Playwright Workspaces można uruchamiać maksymalnie 50 pracowników równoległych. Kilka czynników wpływa na najlepszą konfigurację projektu, taką jak procesor CPU, pamięć i zasoby sieciowe maszyny klienckiej, pojemność obsługi obciążenia aplikacji docelowej i typ akcji wykonywanych w testach.

Można określić liczbę równoległych procesów roboczych w wierszu polecenia interfejsu wiersza polecenia programu Playwright lub skonfigurować workers właściwość w pliku konfiguracji usługi Playwright.

Możesz określić liczbę równoległych procesów roboczych w wierszu polecenia interfejsu NumberOfTestWorkers wiersza polecenia programu Playwright lub skonfigurować .runsettings właściwość w pliku.

Dowiedz się więcej o tym , jak określić optymalną konfigurację optymalizacji ukończenia zestawu testów.

Następny krok

Pomyślnie utworzono obszar roboczy Playwright w Azure Portal i uruchomiono testy Playwright w przeglądarkach w chmurze.

Przejdź do następnego przewodnika Szybki start, aby skonfigurować ciągłe kompleksowe testowanie, uruchamiając testy playwright w przepływie pracy ciągłej integracji/ciągłego wdrażania.

Konfigurowanie ciągłego kompleksowego testowania w ciągłej integracji/ciągłego wdrażania