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. 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 będziesz mieć przepływ pracy ciągłej integracji, który uruchamia pakiet testowy Playwright na dużą skalę za pomocą testowania dramaturgów firmy Microsoft.

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

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.

Konfigurowanie tokenu dostępu do 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ą. Token dostępu usługi można wygenerować w portalu Playwright, a następnie określić token dostępu w pliku konfiguracji usługi.

Aby wygenerować token dostępu 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. Wybierz ikonę ustawień obszaru roboczego, a następnie przejdź do strony Tokeny dostępu.

   

3. Wybierz pozycję Generuj nowy token, aby utworzyć nowy token dostępu dla przepływu pracy ciągłej integracji.

4. Wprowadź szczegóły tokenu dostępu, a następnie wybierz pozycję Generuj token.

   

   

5. Zapisz token dostępu w kluczu tajnym przepływu pracy ciągłej integracji, aby uniknąć określania tokenu w postaci zwykłego tekstu w definicji przepływu pracy:

   Funkcja GitHub Actions

   1. Przejdź do repozytorium GitHub i wybierz pozycję Ustawienia> Secrets i zmienne>Actions.

   2. Wybierz pozycję Nowy wpis tajny repozytorium.

   3. Wprowadź szczegóły wpisu tajnego, a następnie wybierz pozycję Dodaj wpis tajny , aby utworzyć wpis tajny ciągłej integracji/ciągłego wdrażania.

      Parametr	Wartość
      Nazwa/nazwisko	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Wartość	Wklej skopiowany wcześniej token dostępu obszaru roboczego.

   4. Wybierz przycisk OK , aby utworzyć wpis tajny przepływu pracy.

   Azure Pipelines

   1. Przejdź do projektu usługi Azure DevOps.

   2. Przejdź do strony Potoki , wybierz odpowiedni potok, a następnie wybierz pozycję Edytuj.

   3. Znajdź zmienne dla tego potoku.

   4. Dodaj nową zmienną.

   5. Wprowadź szczegóły zmiennej, a następnie wybierz pozycję Dodaj wpis tajny , aby utworzyć wpis tajny ciągłej integracji/ciągłego wdrażania.

      Parametr	Wartość
      Nazwa/nazwisko	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Wartość	Wklej skopiowany wcześniej token dostępu obszaru roboczego.
      Zachowaj ten wpis tajny wartości	Sprawdź tę wartość

   6. Wybierz przycisk OK, a następnie pozycję Zapisz , aby utworzyć wpis tajny przepływu pracy.

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

   /*
   * 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 i zatwierdź plik w repozytorium kodu źródłowego.

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

   - 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:
       # Access token and regional endpoint for Microsoft Playwright Testing
       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 }}
     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: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       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 będą uruchamiane w obszarze roboczym Testowanie w programie Microsoft Playwright w przeglądarkach hostowanych w chmurze w 20 równoległych procesach roboczych.

Uwaga

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.

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

Włączanie raportowania wyników testów

Testowanie w programie Microsoft Playwright obsługuje teraz wyświetlanie wyników testów w portalu Playwright. Dostęp w wersji zapoznawczej jest dostępny tylko przez zaproszenie.

Ważne

Funkcja raportowania usługi Microsoft Playwright Testing jest bezpłatna podczas korzystania z wersji zapoznawczej tylko do zapraszania. Jednak istniejące funkcje 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. 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.

4. Zapisz token usługi GitHub w kluczu tajnym przepływu pracy ciągłej integracji, aby uniknąć określania tokenu w postaci zwykłego tekstu w definicji przepływu pracy:

   Funkcja GitHub Actions

   1. Przejdź do repozytorium GitHub i wybierz pozycję Ustawienia> Secrets i zmienne>Actions.

   2. Wybierz pozycję Nowy wpis tajny repozytorium.

   3. Wprowadź szczegóły wpisu tajnego, a następnie wybierz pozycję Dodaj wpis tajny , aby utworzyć wpis tajny ciągłej integracji/ciągłego wdrażania.

      Parametr	Wartość
      Nazwa/nazwisko	PAT_TOKEN_PACKAGE
      Wartość	Wklej skopiowany wcześniej token dostępu obszaru roboczego.

   4. Wybierz przycisk OK , aby utworzyć wpis tajny przepływu pracy.

   Azure Pipelines

   1. Przejdź do projektu usługi Azure DevOps.

   2. Przejdź do strony Potoki , wybierz odpowiedni potok, a następnie wybierz pozycję Edytuj.

   3. Znajdź zmienne dla tego potoku.

   4. Dodaj nową zmienną.

   5. Wprowadź szczegóły zmiennej, a następnie wybierz pozycję Dodaj wpis tajny , aby utworzyć wpis tajny ciągłej integracji/ciągłego wdrażania.

      Parametr	Wartość
      Nazwa/nazwisko	PAT_TOKEN_PACKAGE
      Wartość	Wklej skopiowany wcześniej token dostępu obszaru roboczego.
      Zachowaj ten wpis tajny wartości	Sprawdź tę wartość

   6. Wybierz przycisk OK, a następnie pozycję Zapisz , aby utworzyć wpis tajny przepływu pracy.

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

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

6. Zaktualizuj plik konfiguracji playwrighta.

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

7. Zaktualizuj definicję przepływu pracy ciągłej integracji, aby zainstalować pakiet raportowania przed uruchomieniem testów, aby opublikować raport testów playwright w testach programu Microsoft Playwright.

   Funkcja GitHub Actions

   - name: Install reporting package
     working-directory: path/to/playwright/folder # update accordingly
     run: |
       npm config set @microsoft:registry=https://npm.pkg.github.com
       npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
       npm install
   
   - name: Run Playwright tests
     working-directory: path/to/playwright/folder # update accordingly
     env:
       # Access token and regional endpoint for Microsoft Playwright Testing
       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 }}
     run: npx playwright test
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install reporting package"
     inputs:
       targetType: 'inline'
       script: |
           'npm config set @microsoft:registry=https://npm.pkg.github.com'
           'npm set //npm.pkg.github.com/:_authToken ${{secrets PAT_TOKEN_PACKAGE}}'
           'npm install'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PowerShell@2
     enabled: true
     displayName: "Run Playwright tests"
     env:
       PLAYWRIGHT_SERVICE_ACCESS_TOKEN: $(PLAYWRIGHT_SERVICE_ACCESS_TOKEN)
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: $(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt)
     inputs:
       targetType: 'inline'
       script: 'npx playwright test -c playwright.service.config.ts --workers=20'
       workingDirectory: path/to/playwright/folder # update accordingly
   

   Napiwek

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

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