Dela via


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 och felsöker tester enkelt med hjälp av tjänstinstrumentpanelen. 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 och hjälper dig att felsöka tester enkelt 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

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 Playwright-tester för körning med tjänsten 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:

    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']],
      }
    );
    

    Som standard gör tjänstkonfigurationen att du kan:

    • Påskynda bygg-pipelines genom att köra tester parallellt med hjälp av molnbaserade webbläsare.
    • Förenkla felsökningen med enkel åtkomst till testresultat och artefakter som publicerats till tjänsten.

    Du kan dock välja att använda någon av dessa funktioner eller båda. Se Så här använder du tjänstfunktioner och uppdaterar tjänstkonfigurationsfilen enligt dina behov.

  3. Spara och checka in filen på källkodslagringsplatsen.

Uppdatera package.json fil

package.json Uppdatera filen på lagringsplatsen för att lägga till information om Microsoft Playwright Testing Service-paketet i devDependencies avsnittet.

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

Aktivera artefakter i Playwright-konfiguration

playwright.config.ts Kontrollera att du samlar in alla nödvändiga artefakter i filen i projektet.

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

Konfigurera tjänstkonfiguration

  1. Skapa en ny fil PlaywrightServiceSetup.cs i rotkatalogen för projektet. Den här filen underlättar autentisering av klienten med tjänsten.

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

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

Installera tjänstpaket

Installera Microsoft Playwright Testing-paketet i projektet.

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

Det här kommandot uppdaterar projektets csproj fil genom att lägga till information om tjänstpaket i ItemGroup avsnittet. Kom ihåg att checka in ändringarna.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
  </ItemGroup>

Lägg till eller uppdatera .runsettings filen för projektet.

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

  1. Skapa en ny .runsettings fil.

    Du kan också använda .runsettings filen i exempellagringsplatsen.

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

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

    Med inställningarna i den här filen kan du:

    • Påskynda bygg-pipelines genom att köra tester parallellt med hjälp av molnbaserade webbläsare.
    • Publicera testresultat och artefakter till tjänsten för snabbare felsökning.

    Du kan dock välja att använda någon av dessa funktioner eller båda. Se Så här använder du tjänstfunktioner och uppdaterar tjänstkonfigurationsfilen enligt dina behov.

  3. Spara och checka in filen på källkodslagringsplatsen.

Aktivera artefakter i din playwright-konfiguration

Konfigurera Playwright för att fånga artefakter som skärmbild, videor och spårningar.

När du har samlat in dessa artefakter kopplar du dem till TestContext för att säkerställa att de är tillgängliga i dina testrapporter. Mer information finns i vårt exempelprojekt för NUnit.

Konfigurera autentisering

CI-datorn som kör Playwright-tester måste autentisera med Playwright Testing-tjänsten för att få webbläsarna att köra testerna och publicera testresultaten och artefakterna.

Tjänsten erbjuder två autentiseringsmetoder: Microsoft Entra-ID och åtkomsttoken. Vi rekommenderar starkt att du använder Microsoft Entra-ID för att autentisera dina pipelines.

Konfigurera autentisering med Microsoft Entra-ID

Om du använder GitHub Actions kan du ansluta till tjänsten med GitHub OpenID Connect. Följ stegen för att konfigurera integreringen:

Förutsättningar

Alternativ 1: Microsoft Entra-program

Alternativ 2: Användartilldelad hanterad identitet

Skapa GitHub-hemligheter
  • Lägg till de värden som du fick i föregående steg som hemligheter till din GitHub-lagringsplats. Se Konfigurera GitHub Action Secret. Dessa variabler används i GitHub Action-arbetsflödet i efterföljande steg.
GitHub-hemlighet Källa (Microsoft Entra-program eller hanterad identitet)
AZURE_CLIENT_ID Client ID
AZURE_SUBSCRIPTION_ID Prenumerations-ID:t
AZURE_TENANT_ID Katalog-ID (klientorganisation)

Kommentar

För förbättrad säkerhet rekommenderar vi starkt att du använder GitHub-hemligheter för att lagra känsliga värden i stället för att inkludera dem direkt i arbetsflödesfilen.

Konfigurera autentisering med hjälp av åtkomsttoken

Varning

Vi rekommenderar starkt att du använder Microsoft Entra-ID för autentisering till tjänsten. Om du använder åtkomsttoken läser du Hantera åtkomsttoken

Du kan generera en åtkomsttoken från din Playwright Testing-arbetsyta och använda den i konfigurationen. Vi rekommenderar dock starkt Microsoft Entra-ID för autentisering på grund av den förbättrade säkerheten. Åtkomsttoken fungerar, även om de är praktiska, som långlivade lösenord och är mer mottagliga för att komprometteras.

  1. Autentisering med åtkomsttoken är inaktiverat som standard. Om du vill använda aktiverar du åtkomsttokenbaserad autentisering.

  2. Konfigurera autentisering med hjälp av åtkomsttoken.

  3. Lagra åtkomsttoken i en CI-arbetsflödeshemlighet och använd den i GitHub Actions-arbetsflödet eller Azure Pipeline yaml-filen.

Hemligt namn Värde
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Klistra in värdet för åtkomsttoken som du skapade tidigare.

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.

    
      # 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
    

Uppdatera CI-arbetsflödesdefinitionen för att köra dina Playwright-tester med Playwright NUnit CLI. .runsettings Skicka filen 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.

    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. 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. De resultat och artefakter som samlas in publiceras till tjänsten och kan visas på tjänstportalen.

Inställningarna för testkörningen kan definieras i .runsettings filen. Mer information finns i använda alternativ för tjänstpaket

Kommentar

Rapporteringsfunktionen är aktiverad som standard för befintliga arbetsytor. Detta lanseras i etapper och kommer att ta några dagar. Kontrollera att inställningen är PÅ för arbetsytan innan du fortsätter för att Rich diagnostics using reporting undvika fel. Mer information finns i Aktivera rapportering för arbetsyta.

Varning

Med Microsoft Playwright Testing debiteras du baserat på antalet totalt antal förbrukade testminuter och publicerade testresultat. 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 hela testpaketet för att undvika att förbruka dina kostnadsfria testminuter och testresultat.

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

Visa testkörningar och resultat i Playwright-portalen

Nu kan du felsöka CI-pipelinen i Playwright-portalen.

  1. När testkörningen är klar genereras en länk till Playwright-portalen. Öppna den här länken om du vill visa detaljerade testresultat och associerade artefakter. Portalen visar viktig information, inklusive:

    • Information om CI-kompilering
    • Övergripande testkörningsstatus
    • Inchecknings-ID:t som är länkat till testkörningen

    Skärmbild som visar en lista över tester i testkörningen.

  2. Playwright-portalen innehåller all nödvändig information för felsökning. Du kan:

    • Växla mellan återförsök.
    • Visa detaljerade felloggar, teststeg och bifogade artefakter, till exempel skärmbilder eller videor.
    • Gå direkt till Spårningsläsaren för djupare analys.

    Skärmbild som visar förhandsversionen av ett test.

  3. Med Spårningsvisaren kan du gå igenom testkörningen visuellt. Du kan:

    • Använd tidslinjen för att hovra över enskilda steg och visa sidtillståndet före och efter varje åtgärd.
    • Granska detaljerade loggar, DOM-ögonblicksbilder, nätverksaktivitet, fel och konsolutdata för varje steg.

    Skärmbild som visar spårningsvisaren.

  1. När testkörningen är klar får du en länk till Playwright-portalen i terminalen. Öppna den här länken om du vill visa detaljerade testresultat och associerade artefakter. Portalen visar viktig information, inklusive:

    • Information om CI-kompilering
    • Övergripande testkörningsstatus
    • Inchecknings-ID:t som är länkat till testkörningen

    Skärmbild som visar en lista över tester i testkörningen.

  2. Playwright-portalen innehåller all nödvändig information för felsökning. Du kan:

    • Visa detaljerade felloggar och bifogade artefakter, till exempel skärmbilder eller videor.
    • Gå direkt till Spårningsläsaren för djupare analys.

    Skärmbild som visar förhandsversionen av ett test.

Kommentar

Vissa metadata, till exempel ägare, beskrivning och kategori, visas för närvarande inte på instrumentpanelen för tjänsten. Om det finns ytterligare information som du vill se inkluderad skickar du ett GitHub-problem på vår lagringsplats.

  1. Med Spårningsvisaren kan du gå igenom testkörningen visuellt. Du kan:

    • Använd tidslinjen för att hovra över enskilda steg och visa sidtillståndet före och efter varje åtgärd.
    • Granska detaljerade loggar, DOM-ögonblicksbilder, nätverksaktivitet, fel och konsolutdata för varje steg.

    Skärmbild som visar spårningsvisaren.

Dricks

Du kan använda Microsoft Playwright Testing-tjänstens funktioner oberoende av varandra. Du kan publicera testresultat på portalen utan att använda funktionen för molnbaserade webbläsare och du kan också använda endast molnbaserade webbläsare för att påskynda testpaketet utan att publicera testresultat. Mer information finns i Använda tjänstfunktioner.

Kommentar

Testresultaten och artefakterna som du publicerar behålls i tjänsten i 90 dagar. Därefter tas de bort automatiskt.

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.