Sdílet prostřednictvím

Rychlý start: Nastavení průběžného kompletního testování pomocí pracovních prostorů Playwright

V tomto rychlém startu nastavíte průběžné kompletní testování pomocí pracovních prostorů Playwright, abyste ověřili, že vaše webová aplikace funguje správně v různých prohlížečích a operačních systémech s každým potvrzením kódu a odstraňováním potíží s testy pomocí řídicího panelu služby. Zjistěte, jak přidat testy Playwright do pracovního postupu kontinuální integrace (CI), jako jsou GitHub Actions, Azure Pipelines nebo jiné platformy CI.

Po dokončení tohoto rychlého startu máte pracovní postup CI, který spouští sadu testů Playwright ve velkém měřítku a pomáhá snadno řešit potíže s testy pomocí pracovních prostorů Playwright.

Požadavky

Získání adresy URL koncového bodu oblasti služby

V konfiguraci služby musíte poskytnout koncový bod služby pro konkrétní oblast. Koncový bod závisí na oblasti Azure, kterou jste vybrali při vytváření pracovního prostoru.

Pokud chcete získat adresu URL koncového bodu služby a uložit ji jako tajný kód pracovního postupu CI, proveďte následující kroky:

  1. Přihlaste se k webu Azure Portal pomocí svého účtu Azure a přejděte do svého pracovního prostoru.

  2. Vyberte stránku Začínáme .

    Snímek obrazovky, který ukazuje, jak přejít na stránku Začínáme

  3. V části Přidat koncový bod oblasti v nastavení zkopírujte adresu URL koncového bodu služby.

    Adresa URL koncového bodu odpovídá oblasti Azure, kterou jste vybrali při vytváření pracovního prostoru.

  4. Uložte adresu URL koncového bodu služby do tajného kódu pracovního postupu CI:

    Tajné jméno Hodnota
    PLAYWRIGHT_SERVICE_URL Vložte adresu URL koncového bodu, kterou jste zkopírovali dříve.

Přidání konfiguračního souboru služby

Pokud nemáte testy Playwright nakonfigurované tak, aby běžely se službou, přidejte do úložiště konfigurační soubor služby. V dalším kroku zadáte tento konfigurační soubor služby v rozhraní příkazového řádku Playwright.

  1. Vytvořte spolu se souborem playwright.service.config.ts nový souborplaywright.config.ts.

    Volitelně můžete použít playwright.service.config.ts soubor v ukázkovém úložišti.

  2. Přidejte do něj následující obsah:

    import { defineConfig } from '@playwright/test';
import { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/pww/docs/config */
export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    exposeNetwork: '<loopback>',
    connectTimeout: 3 * 60 * 1000, // 3 minutes
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  })
);

    Ve výchozím nastavení umožňuje konfigurace služby zrychlit kanály sestavení paralelním spouštěním testů pomocí prohlížečů hostovaných v cloudu.

  3. Uložte a potvrďte soubor do úložiště zdrojového kódu.

Aktualizace souboru package.json

package.json Aktualizujte soubor v úložišti a přidejte podrobnosti o balíčku Playwright Workspaces v devDependencies části.

"devDependencies": {
    "@azure/playwright": "latest"
}

Instalace balíčku služby

V projektu nainstalujte balíček Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

Tento příkaz aktualizuje soubor projektu csproj přidáním podrobností balíčku služby do oddílu ItemGroup . Nezapomeňte tyto změny potvrdit.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Nastavení konfigurace služby

  1. V kořenovém adresáři projektu vytvořte nový soubor PlaywrightServiceNUnitSetup.cs . Tento soubor usnadňuje ověřování klienta se službou.
  2. Přidejte do něj následující obsah:
using Azure.Developer.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}
  1. Uložte a potvrďte soubor do úložiště zdrojového kódu.

Nastavení ověřování

Počítač CI, na kterém běží testy Playwright, se musí ověřit pomocí služby Playwright Workspaces, aby se prohlížeče spouštějí testy.

Služba nabízí dva způsoby ověřování: Microsoft Entra ID a Access Tokens. K ověření kanálů důrazně doporučujeme použít ID Microsoft Entra.

Nastavení ověřování pomocí Microsoft Entra ID

Pokud používáte GitHub Actions, můžete se ke službě připojit pomocí GitHub OpenID Connect. Podle pokynů nastavte integraci:

Požadavky

Možnost 1: Aplikace Microsoft Entra

  • Vytvořte aplikaci Microsoft Entra s oprávněním služby pomocí Azure portálu , příkazového nástroje Azure CLI , nebo modulu Azure PowerShell .

  • Zkopírujte hodnoty ID klienta, ID předplatnéhoa ID adresáře (tenanta), abyste je mohli použít později v pracovním postupu GitHub Actions.

  • Přiřaďte instančnímu Owner objektu vytvořenému v předchozím kroku roli nebo Contributor roli. Tyto role musí být přiřazeny v pracovním prostoru Playwright. Další podrobnosti najdete v tématu správa přístupu.

  • Nakonfigurujte federované identitní pověření v aplikaci Microsoft Entra tak, aby důvěřovalo tokenům vydaným GitHub Actions pro vaše úložiště na GitHubu.

možnost 2: Spravovaná identita přiřazená uživatelem

Vytvoření tajných kódů GitHubu
  • Přidejte hodnoty, které jste získali v předchozím kroku, jako tajné kódy do úložiště GitHub. Viz nastavení tajného kódu akce GitHubu. Tyto proměnné se používají v pracovním postupu Akce GitHubu v dalších krocích.
Tajný kód GitHubu Zdroj (aplikace Microsoft Entra nebo spravovaná identita)
AZURE_CLIENT_ID ID klienta
AZURE_SUBSCRIPTION_ID Identifikátor předplatného
AZURE_TENANT_ID ID adresáře (tenanta)

Poznámka:

Pokud chcete zvýšit zabezpečení, důrazně doporučujeme používat tajné kódy GitHubu k ukládání citlivých hodnot, nikoli k jejich zahrnutí přímo do souboru pracovního postupu.

Nastavení ověřování pomocí přístupových tokenů

Upozornění

Důrazně doporučujeme použít Microsoft Entra ID pro ověření ke službě. Pokud používáte přístupové tokeny, přečtěte si téma Správa přístupových tokenů.

Přístupový token můžete vygenerovat z pracovního prostoru Playwright a použít ho v nastavení. Důrazně však doporučujeme Microsoft Entra ID pro ověřování kvůli jeho vylepšenému zabezpečení. Přístupové tokeny, i když jsou pohodlné, fungují jako dlouhodobá hesla a jsou náchylnější ke kompromitaci.

  1. Ověřování pomocí přístupových tokenů je ve výchozím nastavení zakázané. Chcete-li použít, povolte ověřování na základě přístupového tokenu.

  2. Nastavte ověřování pomocí přístupových tokenů.

  3. Uložte přístupový token do tajného kódu pracovního postupu CI a použijte ho v pracovním postupu GitHub Actions nebo v souboru yaml služby Azure Pipeline.

Tajné jméno Hodnota
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Vložte hodnotu přístupového tokenu, který jste vytvořili dříve.

Aktualizace definice pracovního postupu

Aktualizujte definici pracovního postupu CI tak, aby spouštěly testy Playwright pomocí rozhraní příkazového řádku Playwright. Předejte konfigurační soubor služby jako vstupní parametr pro rozhraní příkazového řádku Playwright. Prostředí nakonfigurujete zadáním proměnných prostředí.

  1. Otevřete definici pracovního postupu CI.

  2. Přidejte následující kroky pro spuštění testů Playwright v pracovních prostorech Playwright.

    Následující kroky popisují změny pracovního postupu pro GitHub Actions nebo Azure Pipelines. Podobně můžete testy Playwright spustit pomocí rozhraní příkazového řádku Playwright na jiných platformách CI.

    
  # 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: Playwright Tests (Playwright Workspaces)
  on:
    push:
      branches: [main, master]
    pull_request:
      branches: [main, master]

  permissions: # Required when using Microsoft Entra ID to authenticate
    id-token: write
    contents: read

  jobs:
    test:
      timeout-minutes: 60
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4

        - name: Login to Azure with AzPowershell (enableAzPSSession true)
          uses: azure/login@v2
          with:
            client-id: ${{ secrets.AZURE_CLIENT_ID }} # GitHub Open ID connect values copied in previous steps
            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 Playwright Workspaces
            PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
            # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
          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

Aktualizujte definici pracovního postupu CI tak, aby spouštěly testy Playwright pomocí rozhraní příkazového řádku Playwright NUnit. Prostředí nakonfigurujete zadáním proměnných prostředí.

  1. Otevřete definici pracovního postupu CI.

  2. Přidejte následující kroky pro spuštění testů Playwright v pracovních prostorech Playwright.

    Následující kroky popisují změny pracovního postupu pro GitHub Actions nebo Azure Pipelines. Podobně můžete testy Playwright spustit pomocí rozhraní příkazového řádku Playwright na jiných platformách CI.

    on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
permissions: # Required when using AuthType as EntraId
  id-token: write
  contents: read
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
      steps:
      - uses: actions/checkout@v4
    # 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 }} # GitHub Open ID connect values copied in previous steps
          tenant-id: ${{ secrets.AZURE_TENANT_ID }}  
          subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}  
          enable-AzPSSession: true 

      - name: Setup .NET
        uses: actions/setup-dotnet@v4
        with:
          dotnet-version: 8.0.x

      - name: Restore dependencies
        run: dotnet restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Build
        run: dotnet build --no-restore
        working-directory: path/to/playwright/folder # update accordingly

      - name: Run Playwright tests
          working-directory: path/to/playwright/folder # update accordingly
        env:
          # Regional endpoint for Playwright Workspaces
          PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
          # PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }} # Not recommended, use Microsoft Entra ID authentication. 
        run: dotnet test -- NUnit.NumberOfTestWorkers=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

  1. Uložte a potvrďte provedené změny.

    Po aktivaci pracovního postupu CI se testy Playwright spustí v pracovním prostoru Playwright v prohlížečích hostovaných v cloudu napříč 20 paralelními pracovními procesy. Výsledky se publikují do služby a dají se zobrazit na webu Azure Portal.

Upozornění

U pracovních prostorů Playwright se vám budou účtovat poplatky na základě celkového počtu spotřebovaných testovacích minut. Pokud jste uživatelem poprvé nebo začínáte s bezplatnou zkušební verzí, můžete začít s spuštěním jednoho testu ve velkém měřítku místo plné sady testů, abyste se vyhnuli vyčerpání bezplatných testovacích minut.

Po ověření úspěšného spuštění testu můžete postupně zvýšit zátěž testu spuštěním dalších testů se službou.

Jeden test můžete se službou spustit pomocí následujícího příkazového řádku:

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

Zobrazení testovacích běhů a výsledků

Playwright může shromažďovat bohaté artefakty testů, jako jsou protokoly, trasování a snímky obrazovky při každém testovacím spuštění. Informace o zobrazení testovacích artefaktů v rámci kanálu CI najdete v dokumentaci playwright.

Související obsah

Úspěšně jste nastavili nepřetržitý kompletní testovací pracovní postup pro spouštění testů Playwright ve velkém měřítku v prohlížečích hostovaných v cloudu.

  • Last updated on