Snabbstart: Konfigurera kontinuerlig testning från slutpunkt till slutpunkt med förhandsversionen av Microsoft Playwright Testing

I den här snabbstarten konfigurerar du kontinuerlig testning från slutpunkt till slutpunkt med Microsoft Playwright Testing Preview för att verifiera att webbappen körs korrekt i olika webbläsare och operativsystem med varje kodincheckning. Lär dig hur du lägger till dina Playwright-tester i ett arbetsflöde för kontinuerlig integrering (CI), till exempel GitHub Actions, Azure Pipelines eller andra CI-plattformar.

När du har slutfört den här snabbstarten har du ett CI-arbetsflöde som kör din Playwright-testsvit i stor skala med Microsoft Playwright Testing.

Viktigt!

Microsoft Playwright Testing är för närvarande i förhandsversion. Juridiska villkor som gäller för Azure-funktioner som är i betaversion, förhandsversion eller som ännu inte har släppts i allmän tillgänglighet finns i Kompletterande användningsvillkor för Förhandsversioner av Microsoft Azure.

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration. Om du inte har någon Azure-prenumeration skapar du ett kostnadsfritt konto innan du börjar.

• En Microsoft Playwright Testing-arbetsyta. Slutför snabbstarten : kör Playwright-tester i stor skala för att skapa en arbetsyta.

GitHub Actions

• Ett GitHub-konto. Om du inte har något GitHub-konto kan du skapa ett kostnadsfritt.
• En GitHub-lagringsplats som innehåller dina Playwright-testspecifikationer och GitHub Actions-arbetsflöde. Information om hur du skapar en lagringsplats finns i Skapa en ny lagringsplats.
• Ett GitHub Actions-arbetsflöde. Om du behöver hjälp med att komma igång med GitHub Actions kan du läsa skapa ditt första arbetsflöde

Azure Pipelines

• En Azure DevOps-organisation och ett projekt. Om du inte har en Azure DevOps-organisation kan du skapa en kostnadsfritt.
• En pipelinedefinition. Om du behöver hjälp med att komma igång med Azure Pipelines kan du läsa skapa din första pipeline.

Konfigurera en tjänståtkomsttoken

Microsoft Playwright Testing använder åtkomsttoken för att tillåta användare att köra Playwright-tester med tjänsten. Du kan generera en tjänståtkomsttoken i Playwright-portalen och sedan ange åtkomsttoken i tjänstkonfigurationsfilen.

Utför följande steg för att generera en åtkomsttoken och lagra den som en CI-arbetsflödeshemlighet:

1. Logga in på Playwright-portalen med ditt Azure-konto.

2. Välj ikonen för arbetsyteinställningar och gå sedan till sidan Åtkomsttoken .

   

3. Välj Generera ny token för att skapa en ny åtkomsttoken för ditt CI-arbetsflöde.

4. Ange information om åtkomsttoken och välj sedan Generera token.

   

   

5. Lagra åtkomsttoken i en CI-arbetsflödeshemlighet för att undvika att ange token i klartext i arbetsflödesdefinitionen:

   GitHub Actions

   1. Gå till din GitHub-lagringsplats och välj Inställningar> Sekrets och variabler>Åtgärder.

   2. Välj Ny lagringsplatshemlighet.

   3. Ange den hemliga informationen och välj sedan Lägg till hemlighet för att skapa CI/CD-hemligheten.

      Parameter	Värde
      Name (Name)	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Värde	Klistra in arbetsytans åtkomsttoken som du kopierade tidigare.

   4. Välj OK för att skapa arbetsflödeshemligheten.

   Azure Pipelines

   1. Gå till ditt Azure DevOps-projekt.

   2. Gå till sidan Pipelines , välj lämplig pipeline och välj sedan Redigera.

   3. Leta upp variablerna för den här pipelinen.

   4. Lägg till en ny variabel.

   5. Ange variabelinformationen och välj sedan Lägg till hemlighet för att skapa CI/CD-hemligheten.

      Parameter	Värde
      Name (Name)	PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Värde	Klistra in arbetsytans åtkomsttoken som du kopierade tidigare.
      Behåll det här värdet hemligt	Kontrollera det här värdet

   6. Välj OK och sedan Spara för att skapa arbetsflödeshemligheten.

Hämta tjänstregionens slutpunkts-URL

I tjänstkonfigurationen måste du ange den regionspecifika tjänstslutpunkten. Slutpunkten beror på vilken Azure-region du valde när du skapade arbetsytan.

Utför följande steg för att hämta url:en för tjänstslutpunkten och lagra den som en CI-arbetsflödeshemlighet:

1. Logga in på Playwright-portalen med ditt Azure-konto.

2. På arbetsytans startsida väljer du Visa installationsguide.

   Dricks

   Om du har flera arbetsytor kan du växla till en annan arbetsyta genom att välja namnet på arbetsytan överst på sidan och sedan välja Hantera alla arbetsytor.

3. I Lägg till regionslutpunkt i konfigurationen kopierar du url:en för tjänstslutpunkten.

   Slutpunkts-URL:en matchar den Azure-region som du valde när du skapade arbetsytan.

4. Lagra tjänstens slutpunkts-URL i en CI-arbetsflödeshemlighet:

   Hemligt namn	Värde
   PLAYWRIGHT_SERVICE_URL	Klistra in slutpunkts-URL:en som du kopierade tidigare.

Lägg till tjänstkonfigurationsfil

Om du inte har konfigurerat dina Playwright-tester ännu för att köra dem i molnbaserade webbläsare lägger du till en tjänstkonfigurationsfil på lagringsplatsen. I nästa steg anger du sedan den här tjänstkonfigurationsfilen i Playwright CLI.

1. Skapa en ny fil playwright.service.config.ts tillsammans med playwright.config.ts filen.

   Du kan också använda playwright.service.config.ts filen i exempellagringsplatsen.

2. Lägg till följande innehåll i det:

   /*
   * 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. Spara och checka in filen på källkodslagringsplatsen.

Uppdatera arbetsflödesdefinitionen

Uppdatera CI-arbetsflödesdefinitionen för att köra dina Playwright-tester med Playwright CLI. Skicka tjänstkonfigurationsfilen som en indataparameter för Playwright CLI. Du konfigurerar din miljö genom att ange miljövariabler.

1. Öppna CI-arbetsflödesdefinitionen

2. Lägg till följande steg för att köra dina Playwright-tester i Microsoft Playwright Testing.

   Följande steg beskriver arbetsflödesändringarna för GitHub Actions eller Azure Pipelines. På samma sätt kan du köra dina Playwright-tester med hjälp av Playwright CLI på andra CI-plattformar.

   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. Spara och checka in ändringarna.

   När CI-arbetsflödet utlöses körs dina Playwright-tester på din Microsoft Playwright Testing-arbetsyta i molnbaserade webbläsare, över 20 parallella arbetare.

Varning

Med Microsoft Playwright Testing debiteras du baserat på antalet totala testminuter. Om du är en förstagångsanvändare eller kommer igång med en kostnadsfri utvärderingsversion kan du börja med att köra ett enskilt test i stor skala i stället för din fullständiga testsvit för att undvika att uttömma dina kostnadsfria testminuter.

När du har verifierat att testet har körts kan du gradvis öka testbelastningen genom att köra fler tester med tjänsten.

Du kan köra ett enskilt test med tjänsten med hjälp av följande kommandorad:

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

Relaterat innehåll

Du har konfigurerat ett kontinuerligt testarbetsflöde från slutpunkt till slutpunkt för att köra dina Playwright-tester i stor skala i molnbaserade webbläsare.

• Ge användare åtkomst till arbetsytan

• Hantera dina arbetsytor