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

• Účet Azure s aktivním předplatným. Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.

• Pracovní prostor Microsoft Playwright Testing. Dokončete rychlý start: Spuštěním testů Playwright ve velkém měřítku vytvořte pracovní prostor.

GitHub Actions

• Účet GitHub. Pokud nemáte účet GitHubu, můžete si ho zdarma vytvořit.
• Úložiště GitHub, které obsahuje specifikace testů Playwright a pracovní postup GitHub Actions. Pokud chcete vytvořit úložiště, přečtěte si téma Vytvoření nového úložiště.
• Pracovní postup GitHub Actions Pokud potřebujete pomoc s zahájením práce s GitHub Actions, přečtěte si téma Vytvoření prvního pracovního postupu.
• Nastavte ověřování z GitHub Actions do Azure. Viz Použití GitHub Actions pro připojení k Azure

Azure Pipelines

• Organizace a projekt Azure DevOps Pokud nemáte organizaci Azure DevOps, můžete si ji zdarma vytvořit.
• Definice kanálu. Pokud potřebujete pomoc se zahájením práce se službou Azure Pipelines, podívejte se na článek Vytvoření prvního kanálu.
• Připojení služby Azure Resource Manager k zabezpečenému ověření služby ze služby Azure Pipelines najdete v tématu Připojení ke službě Azure Resource Manager.

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 jste ještě nenakonfigurovali testy Playwright pro jejich spuštění v prohlížečích hostovaných v cloudu, 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. Viz Postup použití funkcí služby a aktualizace konfiguračního souboru služby podle vašeho požadavku.

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.3"
}

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

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.

   GitHub Actions

   
     # 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 }} 
       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_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: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     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. 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.

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í. Viz povolení vytváření sestav pro pracovní prostor.

Upozornění

Microsoft Playwright Testing vám bude účtován na základě celkového počtu testovacích minut 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

   

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

   

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.

   

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

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.

• Udělení přístupu uživatelům k pracovnímu prostoru

• Správa pracovních prostorů