Szybki start: uruchamianie pełnych testów na dużą skalę przy użyciu wersji zapoznawczej testowania playwrighta firmy Microsoft

Z tego przewodnika Szybki start dowiesz się, jak uruchamiać testy playwright z wysoce równoległymi przeglądarkami w chmurze przy użyciu wersji zapoznawczej testowania playwright firmy Microsoft. Użyj infrastruktury chmury, aby zweryfikować aplikację w wielu przeglądarkach, urządzeniach i systemach operacyjnych.

Po ukończeniu tego przewodnika Szybki start masz obszar roboczy Testowania dramaturgów firmy Microsoft do uruchamiania testów dramaturgów na dużą skalę.

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.
• 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 Microsoft Playwright Testing.

Tworzenie obszaru roboczego

Aby rozpocząć uruchamianie testów playwright na dużą skalę w przeglądarkach w chmurze, należy najpierw utworzyć obszar roboczy Microsoft Playwright Testing w portalu Playwright.

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

2. Jeśli masz już obszar roboczy, wybierz istniejący obszar roboczy i przejdź do następnego kroku.

   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. Jeśli nie masz jeszcze obszaru roboczego, wybierz pozycję + Nowy obszar roboczy, a następnie podaj następujące informacje:

   Pole	opis
   Nazwa obszaru roboczego	Wprowadź unikatową nazwę, aby zidentyfikować obszar roboczy. Nazwa może składać się tylko z znaków alfanumerycznych i mieć długość od 3 do 64 znaków.
   Subskrypcja platformy Azure	Wybierz subskrypcję platformy Azure, której chcesz użyć dla tego obszaru roboczego Testowanie dramaturgów firmy Microsoft.
   Region	Wybierz lokalizację geograficzną do hostowania obszaru roboczego. Jest to lokalizacja, w której są przechowywane dane przebiegu testu dla obszaru roboczego.

   

4. Wybierz pozycję Utwórz obszar roboczy, aby utworzyć obszar roboczy w ramach subskrypcji.

   Podczas tworzenia obszaru roboczego zostanie utworzona nowa grupa zasobów i zasób platformy Azure do testowania playwright firmy Microsoft w ramach subskrypcji platformy Azure.

Po zakończeniu tworzenia obszaru roboczego nastąpi przekierowanie do przewodnika konfiguracji.

Tworzenie tokenu dostępu na potrzeby uwierzytelniania usługi

Microsoft Playwright Testing używa tokenów dostępu do autoryzowania użytkowników do uruchamiania testów dramaturgów z usługą. Najpierw wygenerujesz token dostępu usługi w portalu Playwright, a następnie zapiszesz wartość w zmiennej środowiskowej.

Aby wygenerować token dostępu, wykonaj następujące kroki:

1. W przewodniku konfiguracji obszaru roboczego w obszarze Tworzenie tokenu dostępu wybierz pozycję Generuj token.

   

2. Skopiuj token dostępu dla obszaru roboczego.

   Do skonfigurowania środowiska w późniejszym kroku potrzebna jest wartość tokenu dostępu.

   

Konfigurowanie 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, wykonaj następujące kroki:

1. W obszarze Dodawanie punktu końcowego regionu w konfiguracji skopiuj punkt końcowy regionu dla obszaru roboczego.

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

   

Konfigurowanie środowiska

Aby skonfigurować środowisko, należy skonfigurować PLAYWRIGHT_SERVICE_ACCESS_TOKEN zmienne środowiskowe i PLAYWRIGHT_SERVICE_URL przy użyciu wartości uzyskanych 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. .env Utwórz plik obok playwright.config.ts pliku w projekcie Playwright:

   PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Pamiętaj, aby zastąpić {MY-ACCESS-TOKEN} symbole zastępcze i {MY-REGION-ENDPOINT} wartościami skopiowanymi wcześniej.

Uwaga

Upewnij się, że nie dodasz .env pliku do repozytorium kodu źródłowego, aby uniknąć wycieku wartości tokenu dostępu.

Dodawanie pliku konfiguracji usługi

Aby uruchomić testy playwright w obszarze roboczym Microsoft Playwright Testing, należy dodać plik konfiguracji usługi wraz z plikiem konfiguracji playwright. Plik konfiguracji usługi odwołuje się do zmiennych środowiskowych, aby uzyskać punkt końcowy obszaru roboczego i token dostępu.

Aby dodać konfigurację usługi do projektu:

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ść:

   /*
   * This file enables Playwright client to connect to remote browsers.
   * It should be placed in the same directory as playwright.config.ts.
   */
   
   import { defineConfig } from '@playwright/test';
   import config from './playwright.config';
   import dotenv from 'dotenv';
   
   // Define environment on the dev box in .env file:
   //  .env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
   //    PLAYWRIGHT_SERVICE_URL=XXX
   
   // Define environment in your GitHub workflow spec.
   //  env:
   //    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
   //    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
   //    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
   
   dotenv.config();
   
   // Name the test run if it's not named yet.
   process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();
   
   // Can be 'linux' or 'windows'.
   const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';
   
   export default defineConfig(config, {
     // Define more generous timeout for the service operation if necessary.
     // timeout: 60000,
     // expect: {
     //   timeout: 10000,
     // },
     workers: 20,
   
     // Enable screenshot testing and configure directory with expectations.
     // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
     ignoreSnapshots: false,
     snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
     
     use: {
       // Specify the service endpoint.
       connectOptions: {
         wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
           // Can be 'linux' or 'windows'.
           os,
           runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
         })}`,
         timeout: 30000,
         headers: {
           'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
         },
         // Allow service to access the localhost.
         exposeNetwork: '<loopback>'
       }
     },
     // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
     projects: config.projects? config.projects : [{}]
   });
   

3. Zapisz plik.

Uruchamianie testów na dużą skalę za pomocą testowania playwrighta firmy Microsoft

Teraz przygotowano konfigurację do uruchamiania testów dramaturgów w chmurze za pomocą testowania playwrighta firmy Microsoft. Możesz użyć interfejsu wiersza polecenia playwright do uruchamiania testów lub użyć rozszerzenia Playwright Test Visual Studio Code.

Uruchamianie pojedynczego testu na dużą skalę

W przypadku testowania playwright firmy Microsoft opłaty są naliczane 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 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.

Wykonaj następujące kroki, aby uruchomić pojedynczy test playwrighta z testowaniem microsoft Playwright:

Interfejs wiersza polecenia dramaturga

Aby uruchomić testy za pomocą interfejsu wiersza polecenia playwright firmy Microsoft, 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 programie Visual Studio Code z testowaniem playwright firmy Microsoft, 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.

   

   Napiwek

   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.

Uwaga

W zależności od rozmiaru zestawu testów mogą być naliczane dodatkowe opłaty za minuty testu po upływie przydzielonych bezpłatnych minut testu.

Uruchamianie pełnego zestawu testów na dużą skalę

Po sprawdzeniu, czy możesz uruchomić pojedynczy test przy użyciu testowania playwright firmy Microsoft, możesz uruchomić pełny zestaw testów Playwright na dużą skalę.

Wykonaj następujące kroki, aby uruchomić pełny pakiet testowy Playwright z testowaniem playwrighta firmy Microsoft:

Interfejs wiersza polecenia dramaturga

Po uruchomieniu wielu testów playwright lub pełnego zestawu testów za pomocą testowania playwright firmy Microsoft można opcjonalnie określić liczbę równoległych procesów roboczych 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)
   
   To open last HTML report run:
   
       npx playwright show-report
   

Visual Studio Code

Aby uruchomić pakiet testowy Playwright w programie Visual Studio Code za pomocą testowania playwrighta firmy Microsoft:

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

2. Wybierz przycisk Uruchom testy, aby uruchomić wszystkie testy za pomocą testowania dramaturgowego firmy Microsoft.

   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.

   

   Napiwek

   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.

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

Przejdź do portalu Playwright, aby wyświetlić metadane przebiegu testu i dziennik aktywności dla obszaru roboczego.

Dziennik aktywności zawiera listę dla każdego przebiegu testu następujące szczegóły: łączny czas ukończenia testu, liczba równoległych procesów roboczych i liczba minut testu.

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

Testowanie w programie Microsoft Playwright obsługuje teraz wyświetlanie wyników testów w portalu Playwright. Ta funkcja jest dostępna tylko jako funkcja zapraszania.

Ważne

Funkcja raportowania usługi Microsoft Playwright Testing jest bezpłatna podczas korzystania z wersji zapoznawczej tylko do zapraszania. Jednak istniejące funkcje wszystkich przeglądarek hostowanych w chmurze nadal rozliczają się zgodnie z planem cenowym platformy Azure.

Po uzyskaniu dostępu do narzędzia do raportowania wykonaj następujące kroki, aby skonfigurować testy.

1. Na stronie głównej obszaru roboczego przejdź do Ustawienia.

   

2. W Ustawienia wybierz pozycję Ogólne i upewnij się, że raportowanie jest włączone.

   

3. Upewnij się, że środowisko jest poprawnie skonfigurowane, jak wspomniano w sekcji Konfigurowanie środowiska.

4. Instalowanie pakietu raportowania

   Ponieważ funkcja nie jest obecnie publiczna, należy wykonać kilka dodatkowych kroków, aby zainstalować pakiet. Te kroki nie będą potrzebne, gdy funkcja stanie się publiczna.

   1. Utwórz plik o .npmrc nazwie w tej samej lokalizacji co plik konfiguracji Playwright.

   2. Dodaj następującą zawartość do pliku i zapisz.

      @microsoft:registry=https://npm.pkg.github.com
      

   3. Utwórz osobisty token dostępu usługi GitHub, wykonując następujące kroki.

   Musisz podać read:packages uprawnienia do tokenu. Ten token jest określany jako PAT_TOKEN_PACKAGE w pozostałej części tego artykułu.

   1. Uruchom następujące polecenie w terminalu w lokalizacji pliku konfiguracji Playwright. Zastąp PAT_TOKEN_PACKAGE element tokenem wygenerowany w poprzednim kroku.

          npm set //npm.pkg.github.com/:_authToken PAT_TOKEN_PACKAGE
      

   2. Zaktualizuj plik package.json przy użyciu pakietu.

       "dependencies": {
                  "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
          }
      

   3. Uruchom polecenie npm install , aby zainstalować pakiet.

5. Aktualizowanie pliku Playwright.config

   Dodaj reportera Playwright Testing w Playwright.config.ts taki sam sposób, jak w przypadku innych reporterów.

   import { defineConfig } from '@playwright/test';
   
   export default defineConfig({
       reporter: [
       ['list'],
       ['json', {  outputFile: 'test-results.json' }],
       ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
       ],
   });
   

   Upewnij się, że artefakty są włączone w konfiguracji, aby lepiej rozwiązać problemy.

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

6. Uruchamianie testów dramaturgów

   Możesz uruchomić npx playwright test polecenie i wyświetlić wyniki i artefakty w portalu testowania dramaturgu.

   

Napiwek

Usługa Microsoft Playwright Testing umożliwia publikowanie wyników testów w portalu niezależnie od funkcji przeglądarek hostowanych w chmurze.

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.

Za pomocą testowania dramaturgowego firmy Microsoft można uruchamiać maksymalnie 50 równoległych procesów roboczych. 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.

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 Microsoft Playwright Testing w portalu Playwright i uruchomiono testy playwrighta 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