Snabbstart: Köra tester från slutpunkt till slutpunkt i stor skala med förhandsversionen av Microsoft Playwright Testing

I den här snabbstarten får du lära dig hur du kör dina Playwright-tester med mycket parallella molnwebbläsare med Microsoft Playwright Testing Preview. Använd molninfrastrukturen för att verifiera ditt program i flera webbläsare, enheter och operativsystem.

När du har slutfört den här snabbstarten har du en Microsoft Playwright Testing-arbetsyta för att köra dina Playwright-tester i stor skala.

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.
• Ditt Azure-konto behöver rollen Ägare, Deltagare eller någon av de klassiska administratörsrollerna.
• Ett dramatikerprojekt. Om du inte har ett projekt skapar du ett med hjälp av dokumentationen om att komma igång med Dramatiker eller använder vårt Exempelprojekt för Microsoft Playwright Testing.

Skapa en arbetsyta

För att komma igång med att köra dina Playwright-tester i stor skala i molnwebbläsare skapar du först en Microsoft Playwright Testing-arbetsyta i Playwright-portalen.

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

2. Om du redan har en arbetsyta väljer du en befintlig arbetsyta och går vidare till nästa steg.

   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. Om du inte har någon arbetsyta än väljer du + Ny arbetsyta och anger sedan följande information:

   Fält	beskrivning
   Namn på arbetsyta	Ange ett unikt namn för att identifiera din arbetsyta. Namnet kan bara bestå av alfanumeriska tecken och ha en längd på mellan 3 och 64 tecken.
   Azure-prenumeration	Välj den Azure-prenumeration som du vill använda för den här Microsoft Playwright Testing-arbetsytan.
   Region	Välj en geografisk plats som värd för din arbetsyta. Det här är den plats där testkörningsdata lagras för arbetsytan.

   

4. Välj Skapa arbetsyta för att skapa arbetsytan i din prenumeration.

   När arbetsytan skapas skapas en ny resursgrupp och en Microsoft Playwright Testing Azure-resurs i din Azure-prenumeration.

När arbetsytan har skapats omdirigeras du till installationsguiden.

Skapa en åtkomsttoken för tjänstautentisering

Microsoft Playwright Testing använder åtkomsttoken för att tillåta användare att köra Playwright-tester med tjänsten. Först genererar du en tjänståtkomsttoken i Playwright-portalen och lagrar sedan värdet i en miljövariabel.

Utför följande steg för att generera åtkomsttoken:

1. I installationsguiden för arbetsytan går du till Skapa en åtkomsttoken och väljer Generera token.

   

2. Kopiera åtkomsttoken för arbetsytan.

   Du behöver värdet för åtkomsttoken för att konfigurera din miljö i ett senare steg.

   

Konfigurera tjänstregionens slutpunkt

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 tjänstens slutpunkts-URL:

1. I Lägg till regionslutpunkt i konfigurationen kopierar du regionslutpunkten för din arbetsyta.

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

   

Konfigurera din miljö

För att konfigurera din miljö måste du konfigurera PLAYWRIGHT_SERVICE_ACCESS_TOKEN miljövariablerna och PLAYWRIGHT_SERVICE_URL med de värden som du fick i föregående steg.

Vi rekommenderar att du använder modulen dotenv för att hantera din miljö. Med dotenvdefinierar du dina miljövariabler i .env filen.

1. Lägg till modulen i dotenv projektet:

   npm i --save-dev dotenv
   

2. Skapa en .env fil tillsammans med playwright.config.ts filen i ditt Playwright-projekt:

   PLAYWRIGHT_SERVICE_ACCESS_TOKEN={MY-ACCESS-TOKEN}
   PLAYWRIGHT_SERVICE_URL={MY-REGION-ENDPOINT}
   

   Ersätt {MY-ACCESS-TOKEN} platshållarna och {MY-REGION-ENDPOINT} text med de värden som du kopierade tidigare.

Varning

Se till att du inte lägger till filen i .env källkodslagringsplatsen för att undvika att ditt åtkomsttokenvärde läcker ut.

Lägga till en tjänstkonfigurationsfil

Om du vill köra dina Playwright-tester på din Microsoft Playwright Testing-arbetsyta måste du lägga till en tjänstkonfigurationsfil tillsammans med din Playwright-konfigurationsfil. Tjänstkonfigurationsfilen refererar till miljövariablerna för att hämta arbetsytans slutpunkt och din åtkomsttoken.

Så här lägger du till tjänstkonfigurationen i projektet:

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

Kör dina tester i stor skala med Microsoft Playwright Testing

Nu har du förberett konfigurationen för att köra dina Playwright-tester i molnet med Microsoft Playwright Testing. Du kan antingen använda Playwright CLI för att köra dina tester eller använda tillägget Playwright Test Visual Studio Code.

Köra ett enskilt test i stor skala

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.

Utför följande steg för att köra ett enda Playwright-test med Microsoft Playwright Testing:

Dramatiker CLI

Om du vill använda Playwright CLI för att köra dina tester med Microsoft Playwright Testing skickar du tjänstkonfigurationsfilen som en kommandoradsparameter.

1. Öppna ett terminalfönster.

2. Ange följande kommando för att köra ditt Playwright-test på fjärrwebbläsare på din arbetsyta:

   {name-of-file.spec.ts} Ersätt textplatshållaren med namnet på testspecifikationsfilen.

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

   När testet är klart kan du visa teststatusen i terminalen.

   Running 1 test using 1 worker
       1 passed (2.2s)
   
   To open last HTML report run:
   
   npx playwright show-report
   

Visual Studio Code

Om du vill köra ett enda Playwright-test i Visual Studio Code med Microsoft Playwright Testing väljer du tjänstkonfigurationsfilen i testutforskarens vy. Välj och kör sedan testet i listan över tester.

1. Installera tillägget Playwright Test Visual Studio Code.

2. Öppna testutforskarens vy i aktivitetsfältet.

   Testutforskaren identifierar automatiskt dina Playwright-tester och tjänstkonfigurationen i projektet.

   

3. Välj Välj standardprofil och välj sedan dina standardprojekt från tjänstkonfigurationsfilen.

   Observera att tjänstkörningsprofilerna kommer från filen playwright.service.config.ts som du lade till tidigare.

   Genom att ange en standardprofil kan du automatiskt köra dina tester med tjänsten eller köra flera Playwright-projekt samtidigt.

   

4. I listan över tester väljer du knappen Kör test bredvid ett test för att köra det.

   Testet körs på de projekt som du valde i standardprofilen. Om du har valt ett eller flera projekt från tjänstkonfigurationen körs testet på fjärrwebbläsare på din arbetsyta.

   

   Dricks

   Du kan fortfarande felsöka testkoden när du kör testerna i fjärrwebbläsare med hjälp av knappen Felsöka test .

5. Du kan visa testresultaten direkt i Visual Studio Code.

   

Du kan nu köra flera tester med tjänsten eller köra hela testpaketet på fjärrwebbläsare.

Varning

Beroende på storleken på din testsvit kan du debiteras ytterligare avgifter för testminuter utöver dina tilldelade kostnadsfria testminuter.

Köra en fullständig testsvit i stor skala

Nu när du har verifierat att du kan köra ett enda test med Microsoft Playwright Testing kan du köra en fullständig Drama-testsvit i stor skala.

Utför följande steg för att köra en fullständig Playwright-testsvit med Microsoft Playwright Testing:

Dramatiker CLI

När du kör flera Playwright-tester eller en fullständig testsvit med Microsoft Playwright Testing kan du också ange antalet parallella arbetare som en kommandoradsparameter.

1. Öppna ett terminalfönster.

2. Ange följande kommando för att köra din Playwright-testsvit på fjärrwebbläsare på din arbetsyta:

   npx playwright test --config=playwright.service.config.ts --workers=20
   

   Beroende på storleken på din testsvit kör det här kommandot dina tester på upp till 20 parallella arbetare.

   När testet är klart kan du visa teststatusen i terminalen.

   Running 6 tests using 6 workers
       6 passed (18.2s)
   
   To open last HTML report run:
   
       npx playwright show-report
   

Visual Studio Code

Så här kör du din Playwright-testsvit i Visual Studio Code med Microsoft Playwright Testing:

1. Öppna testutforskarens vy i aktivitetsfältet.

2. Välj knappen Kör tester för att köra alla tester med Microsoft Playwright Testing.

   När du kör alla tester används standardprofilen. I föregående steg konfigurerade du standardprofilen för att använda projekt från tjänstkonfigurationen.

   

   Dricks

   Du kan fortfarande felsöka testkoden när du kör testerna i fjärrwebbläsare med hjälp av knappen Felsöka tester .

3. Alternativt kan du välja en specifik tjänstkonfiguration i listan för att endast köra testerna för en specifik webbläsarkonfiguration.

   

4. Du kan visa alla testresultat på fliken Testresultat .

Visa testkörningar i Playwright-portalen

Gå till Playwright-portalen för att visa testkörningsmetadata och aktivitetsloggen för din arbetsyta.

Aktivitetsloggen för varje test kör följande information: den totala testtiden, antalet parallella arbetare och antalet testminuter.

Optimera parallell arbetskonfiguration

När testerna körs smidigt med tjänsten experimenterar du med att variera antalet parallella arbetare för att fastställa den optimala konfigurationen som minimerar testernas slutförandetid.

Med Microsoft Playwright Testing kan du köra med upp till 50 parallella arbetare. Flera faktorer påverkar den bästa konfigurationen för projektet, till exempel processor-, minnes- och nätverksresurser för klientdatorn, målprogrammets lasthanteringskapacitet och vilken typ av åtgärder som utförs i dina tester.

Du kan ange antalet parallella arbetare på kommandoraden Playwright CLI eller konfigurera workers egenskapen i konfigurationsfilen för Playwright-tjänsten.

Läs mer om hur du fastställer den optimala konfigurationen för att optimera slutförandet av testpaketet.

Gå vidare

Du har skapat en Microsoft Playwright Testing-arbetsyta i Playwright-portalen och kört dina Playwright-tester i molnwebbläsare.

Gå vidare till nästa snabbstart för att konfigurera kontinuerlig testning från slutpunkt till slutpunkt genom att köra dina Playwright-tester i ditt CI/CD-arbetsflöde.

Konfigurera kontinuerlig testning från slutpunkt till slutpunkt i CI/CD