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. 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ý spustí sadu testů Playwright ve velkém měřítku 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.

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.

Konfigurace přístupového tokenu služby

Microsoft Playwright Testing používá přístupové tokeny k autorizaci uživatelů ke spouštění testů Playwright ve službě. Přístupový token služby můžete vygenerovat na portálu Playwright a pak zadat přístupový token v konfiguračním souboru služby.

Pokud chcete vygenerovat přístupový token a uložit ho 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. Vyberte ikonu nastavení pracovního prostoru a přejděte na stránku Přístupové tokeny .

   

3. Vyberte Vygenerovat nový token a vytvořte nový přístupový token pro pracovní postup CI.

4. Zadejte podrobnosti o přístupovém tokenu a pak vyberte Generovat token.

   

   

5. Uložte přístupový token do tajného kódu pracovního postupu CI, abyste zabránili zadání tokenu ve formátu prostého textu v definici pracovního postupu:

   GitHub Actions

   1. Přejděte do úložiště GitHub a vyberte Nastavení> Secrets a variables>Actions.

   2. Vyberte Nový tajný klíč úložiště.

   3. Zadejte podrobnosti o tajném kódu a pak výběrem možnosti Přidat tajný klíč vytvořte tajný klíč CI/CD.

      Parametr	Hodnota
      Název	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Hodnota	Vložte přístupový token pracovního prostoru, který jste zkopírovali dříve.

   4. Vyberte OK a vytvořte tajný kód pracovního postupu.

   Azure Pipelines

   1. Přejděte do projektu Azure DevOps.

   2. Přejděte na stránku Kanály , vyberte příslušný kanál a pak vyberte Upravit.

   3. Vyhledejte proměnné pro tento kanál.

   4. Přidejte novou proměnnou.

   5. Zadejte podrobnosti o proměnné a pak vyberte Přidat tajný klíč pro vytvoření tajného klíče CI/CD.

      Parametr	Hodnota
      Název	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Hodnota	Vložte přístupový token pracovního prostoru, který jste zkopírovali dříve.
      Zachovat tento tajný klíč hodnoty	Zkontrolujte tuto hodnotu.

   6. Vyberte OK a pak uložte tajný kód pracovního postupu.

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:

   /*
   * 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. Uložte a potvrďte soubor do úložiště zdrojového kódu.

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

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

Upozornění

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

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ů