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
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 och skapa en arbetsyta.
- 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
- Konfigurera autentisering från GitHub Actions till Azure. Se Använda GitHub Actions för att ansluta till Azure
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:
Logga in på Playwright-portalen med ditt Azure-konto.
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.
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.
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.
Skapa en ny fil
playwright.service.config.ts
tillsammans medplaywright.config.ts
filen.Du kan också använda
playwright.service.config.ts
filen i exempellagringsplatsen.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.
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
Skapa en ny fil
PlaywrightServiceSetup.cs
i rotkatalogen för projektet. Den här filen underlättar autentisering av klienten med tjänsten.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 { };
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.
Skapa en ny
.runsettings
fil.Du kan också använda
.runsettings
filen i exempellagringsplatsen.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.
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.
- Skärmbilder finns i ta bilder
- För videor, se spela in videor för dina tester
- För spårningar, se registrera en spårning
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
Skapa ett Microsoft Entra-program med tjänstens huvudnamn genom att Azure Portal, Azure CLI eller Azure PowerShell.
Kopiera värdena för klient-ID, prenumerations-ID och katalog-ID (klientorganisation) som ska användas senare i ditt GitHub Actions-arbetsflöde.
Owner
Tilldela rollen ellerContributor
till tjänstens huvudnamn som skapades i föregående steg. Dessa roller måste tilldelas på arbetsytan Dramatikertestning. Mer information finns i hantera åtkomst.Konfigurera en federerad identitetsautentiseringsuppgift i ett Microsoft Entra-program för att lita på token som utfärdats av GitHub Actions till din GitHub-lagringsplats.
Alternativ 2: Användartilldelad hanterad identitet
Kopiera värdena för klient-ID, prenumerations-ID och katalog-ID (klientorganisation) som ska användas senare i ditt GitHub Actions-arbetsflöde.
Owner
Tilldela rollen ellerContributor
till den användartilldelade hanterade identiteten som skapades i föregående steg. Dessa roller måste tilldelas på arbetsytan Dramatikertestning. Mer information finns i hantera åtkomst.Konfigurera en federerad identitetsautentiseringsuppgift för en användartilldelad hanterad identitet för att lita på token som utfärdats av GitHub Actions till din GitHub-lagringsplats.
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.
Autentisering med åtkomsttoken är inaktiverat som standard. Om du vill använda aktiverar du åtkomsttokenbaserad autentisering.
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.
Öppna CI-arbetsflödesdefinitionen
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.
Öppna CI-arbetsflödesdefinitionen.
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
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.
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
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.
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.
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
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.
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.
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.
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.