Sdílet prostřednictvím


Rychlý start: Nastavení průběžného kompletního testování pomocí microsoft Playwright Testing Preview

V tomto rychlém startu nastavíte průběžné kompletní testování pomocí microsoft Playwright Testing Preview, 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 snadno řešit potíže 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í microsoft Playwright Testing.

Důležité

Microsoft Playwright Testing je aktuálně ve verzi Preview. Právní podmínky, které se vztahují na funkce Azure, které jsou ve verzi beta, ve verzi Preview nebo které ještě nejsou vydány v obecné dostupnosti, najdete v dodatečných podmínkách použití pro verze Microsoft Azure Preview.

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 portálu Playwright pomocí svého účtu Azure.

  2. Na domovské stránce pracovního prostoru vyberte Zobrazit průvodce nastavením.

    Tip

    Pokud máte více pracovních prostorů, můžete přepnout do jiného pracovního prostoru tak, že v horní části stránky vyberete název pracovního prostoru a pak vyberete Spravovat všechny pracovní prostory.

  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:

    Název tajného klíče 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.config.ts nový souborplaywright.service.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 { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing';
    import config from './playwright.config';
    
    /* Learn more about service configuration at https://aka.ms/mpt/config */
    export default defineConfig(
      config,
      getServiceConfig(config, {
        exposeNetwork: '<loopback>',
        timeout: 30000,
        os: ServiceOS.LINUX,
        useCloudHostedBrowsers: true
      }),
      {
        /* 
        Playwright Testing service reporter is added by default.
        This will override any reporter options specified in the base playwright config.
        If you are using more reporters, please update your configuration accordingly.
        */
        reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']],
      }
    );
    

    Ve výchozím nastavení konfigurace služby umožňuje:

    • Zrychlete kanály sestavení paralelním spouštěním testů pomocí prohlížečů hostovaných v cloudu.
    • Zjednodušení řešení potíží s snadným přístupem k výsledkům testů a artefaktům publikovaným ve službě

    Můžete se ale rozhodnout použít některou z těchto funkcí nebo obojího. Podívejte se, jak používat funkce služby a aktualizovat konfigurační soubor služby podle vašich požadavků.

  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 služby Microsoft Playwright Testing v devDependencies části.

"devDependencies": {
    "@azure/microsoft-playwright-testing": "^1.0.0-beta.6"
}

Povolení artefaktů v konfiguraci Playwright

playwright.config.ts V souboru projektu se ujistěte, že shromažďujete všechny požadované artefakty.

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

Nastavení konfigurace služby

  1. V kořenovém adresáři projektu vytvořte nový soubor PlaywrightServiceSetup.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.MicrosoftPlaywrightTesting.NUnit;
    using NUnit.Framework;
    
    namespace PlaywrightTests; // Remember to change this as per your project namespace
    
    [SetUpFixture]
    public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
    
  3. Uložte a potvrďte soubor do úložiště zdrojového kódu.

Instalace balíčku služby

V projektu nainstalujte balíček Microsoft Playwright Testing.

dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease

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.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Přidejte nebo aktualizujte .runsettings soubor projektu.

Pokud jste ještě nenakonfigurovali testy Playwright pro jejich spuštění se službou, přidejte .runsettings do úložiště soubor. V dalším kroku zadáte tento konfigurační soubor služby v rozhraní příkazového řádku Playwright.

  1. Vytvořte nový .runsettings soubor.

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

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

    <?xml version="1.0" encoding="utf-8"?>
    <RunSettings>
        <TestRunParameters>
            <!-- The below parameters are optional -->
            <Parameter name="Os" value="linux" />
            <!--<Parameter name="RunId" value="sample-run-id1" />-->
            <Parameter name="ServiceAuthType" value="EntraId" />
            <Parameter name="UseCloudHostedBrowsers" value="true" />
            <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" />
            <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />-->
            <Parameter name="EnableGitHubSummary" value="false" />
            <!--<Parameter name="ExposeNetwork" value="*" />-->
        </TestRunParameters>
      <!-- NUnit adapter -->  
      <NUnit>
        <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files -->
        <NumberOfTestWorkers>10</NumberOfTestWorkers>
      </NUnit>
      <!-- General run configuration -->
      <RunConfiguration>
        <EnvironmentVariables>
          <!-- For debugging selectors, it's recommend to set the following environment variable -->
            <!--<DEBUG>pw:api*</DEBUG>--> 
        </EnvironmentVariables>
      </RunConfiguration>
      <!-- Playwright -->  
      <Playwright>
        <BrowserName>chromium</BrowserName>
        <ExpectTimeout>5000</ExpectTimeout>
        <LaunchOptions>
          <Headless>false</Headless>
          <!--Channel>msedge</Channel-->
        </LaunchOptions>
      </Playwright>
        <LoggerRunSettings>
            <Loggers>
                <!--microsoft playwright testing service logger for reporting -->
                <Logger friendlyName="microsoft-playwright-testing" enabled="True" />
                <!--could enable any logger additionally -->
                <Logger friendlyName="trx" enabled="false" />
            </Loggers>
        </LoggerRunSettings>
    </RunSettings>
    

    Nastavení v tomto souboru vám umožní:

    • Zrychlete kanály sestavení paralelním spouštěním testů pomocí prohlížečů hostovaných v cloudu.
    • Publikování výsledků testů a artefaktů do služby za účelem rychlejšího řešení potíží

    Můžete se ale rozhodnout použít některou z těchto funkcí nebo obojího. Podívejte se, jak používat funkce služby a aktualizovat konfigurační soubor služby podle vašich požadavků.

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

Povolení artefaktů v nastavení Playwright

Nastavte playwright pro zachycení artefaktů, jako jsou snímky obrazovky, videa a trasování.

Jakmile tyto artefakty shromáždíte, připojte je k nim, abyste měli jistotu TestContext , že jsou v testovacích sestavách k dispozici. Další informace najdete v našem ukázkovém projektu pro NUnit.

Nastavení ověřování

Počítač CI, na kterém běží testy Playwright, se musí ověřit pomocí služby Playwright Testing, aby prohlížeče získaly spouštění testů a publikování výsledků testu a artefaktů.

Služba nabízí dvě metody ověřování: Microsoft Entra ID a přístupové tokeny. 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 instančním objektem pomocí webu Azure Portal, Azure CLI nebo Azure PowerShellu.

  • Zkopírujte hodnoty ID klienta, ID předplatného a ID adresáře (tenanta) a použijte je 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 Testing. Další podrobnosti najdete v tématu správa přístupu.

  • Nakonfigurujte přihlašovací údaje federované identity v aplikaci Microsoft Entra tak, aby důvěřovaly tokenům vydaným GitHub Actions do vašeho úložiště GitHub.

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 Client ID
AZURE_SUBSCRIPTION_ID Subscription ID
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 pro ověřování ve službě použít MICROSOFT Entra ID. 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 Testing a použít ho v nastavení. Kvůli rozšířenému zabezpečení však důrazně doporučujeme microsoft Entra ID pro ověřování. Přístupové tokeny, zatímco pohodlné, fungují jako dlouhodobá hesla a jsou náchylnější k ohrožení zabezpečení.

  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.

Název tajného klíče 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ření definice pracovního postupu CI

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

    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 (Microsoft Playwright Testing)
      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 Microsoft Playwright Testing
                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. .runsettings Předejte soubor 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 microsoft Playwright Testing.

    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 Microsoft Playwright Testing
              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 --settings:.runsettings --logger "microsoft-playwright-testing" -- 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 Microsoft Playwright Testing v prohlížečích hostovaných v cloudu napříč 20 paralelními pracovními procesy. Shromážděné výsledky a artefakty se publikují do služby a dají se zobrazit na portálu služby.

Nastavení testovacího spuštění je možné definovat v .runsettings souboru. Další informace najdete v tématu použití možností balíčku služby.

Poznámka:

Funkce vytváření sestav je ve výchozím nastavení povolená pro existující pracovní prostory. Tato akce se zavádí ve fázích a bude trvat několik dní. Abyste se vyhnuli chybám, před pokračováním ověřte, že Rich diagnostics using reporting je pro váš pracovní prostor zapnuté nastavení. Další informace najdete v tématu Povolení vytváření sestav pro pracovní prostor.

Upozornění

Microsoft Playwright Testing vám bude účtován na základě celkového počtu spotřebovaných minut testů a publikovaných výsledků testů. 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é testovací sady, abyste se vyhnuli vyčerpání bezplatných minut testů a výsledků testů.

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 spuštění a výsledků na portálu Playwright

Teď můžete řešit potíže s kanálem CI na portálu Playwright.

  1. Po dokončení testovacího spuštění se vygeneruje odkaz na portál Playwright. Otevřením tohoto odkazu zobrazíte podrobné výsledky testů a přidružené artefakty. Portál zobrazuje základní informace, mezi které patří:

    • Podrobnosti o sestavení CI
    • Celkový stav testovacího spuštění
    • ID potvrzení propojené s testovacím spuštěním

    Snímek obrazovky znázorňující seznam testů v testovacím spuštění

  2. Portál Playwright poskytuje všechny potřebné informace pro řešení potíží. Můžete provádět následující akce:

    • Přepínání mezi opakovanými pokusy
    • Prohlédněte si podrobné protokoly chyb, testovací kroky a připojené artefakty, jako jsou snímky obrazovky nebo videa.
    • Pokud chcete provést hlubší analýzu, přejděte přímo do prohlížeče trasování.

    Snímek obrazovky znázorňující náhled testu

  3. Prohlížeč trasování umožňuje vizuálně procházet provádění testů. Můžete provádět následující akce:

    • Časovou osu použijte k najetí myší na jednotlivé kroky a zobrazte stav stránky před a po každé akci.
    • Pro každý krok zkontrolujte podrobné protokoly, snímky DOM, síťovou aktivitu, chyby a výstup konzoly.

    Snímek obrazovky znázorňující prohlížeč trasování

  1. Po dokončení testovacího spuštění získáte odkaz na portál Playwright v terminálu. Otevřením tohoto odkazu zobrazíte podrobné výsledky testů a přidružené artefakty. Portál zobrazuje základní informace, mezi které patří:

    • Podrobnosti o sestavení CI
    • Celkový stav testovacího spuštění
    • ID potvrzení propojené s testovacím spuštěním

    Snímek obrazovky znázorňující seznam testů v testovacím spuštění

  2. Portál Playwright poskytuje všechny potřebné informace pro řešení potíží. Můžete provádět následující akce:

    • Prohlédněte si podrobné protokoly chyb a připojené artefakty, jako jsou snímky obrazovky nebo videa.
    • Pokud chcete provést hlubší analýzu, přejděte přímo do prohlížeče trasování.

    Snímek obrazovky znázorňující náhled testu

Poznámka:

Některá metadata, jako je vlastník, popis a kategorie, se v současné době na řídicím panelu služby nezobrazují. Pokud máte další informace, které byste chtěli zahrnout, odešlete problém gitHubu v našem úložišti.

  1. Prohlížeč trasování umožňuje vizuálně procházet provádění testů. Můžete provádět následující akce:

    • Časovou osu použijte k najetí myší na jednotlivé kroky a zobrazte stav stránky před a po každé akci.
    • Pro každý krok zkontrolujte podrobné protokoly, snímky DOM, síťovou aktivitu, chyby a výstup konzoly.

    Snímek obrazovky znázorňující prohlížeč trasování

Tip

Funkce služby Microsoft Playwright Testing můžete používat nezávisle na sobě. Výsledky testů můžete publikovat na portálu bez použití funkce prohlížečů hostovaných v cloudu. K urychlení sady testů bez publikování výsledků testů můžete použít jenom prohlížeče hostované v cloudu. Podrobnosti najdete v tématu Použití funkcí služby.

Poznámka:

Výsledky testu a artefakty, které publikujete, se zachovají ve službě po dobu 90 dnů. Potom se automaticky odstraní.

Ú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.