Delen via

Quickstart: Doorlopend end-to-end testen instellen met Microsoft Playwright Testing Preview

  • Artikel

In deze quickstart stelt u doorlopend end-to-end testen in met Microsoft Playwright Testing Preview om te controleren of uw web-app correct wordt uitgevoerd in verschillende browsers en besturingssystemen met elke codedoorvoering en probleemoplossingstests met behulp van het servicedashboard. Meer informatie over het toevoegen van playwright-tests aan een CI-werkstroom (continue integratie), zoals GitHub Actions, Azure Pipelines of andere CI-platforms.

Nadat u deze quickstart hebt voltooid, hebt u een CI-werkstroom waarmee uw Playwright-testpakket op schaal wordt uitgevoerd en waarmee u eenvoudig problemen met tests kunt oplossen met Microsoft Playwright Testing.

Belangrijk

Microsoft Playwright Testing is momenteel beschikbaar als preview-versie. Zie de aanvullende gebruiksvoorwaarden voor Microsoft Azure Previews voor juridische voorwaarden die van toepassing zijn op Azure-functies die in de bètaversie, in preview of anderszins nog niet zijn uitgebracht in algemene beschikbaarheid.

Vereisten

De EINDPUNT-URL van de serviceregio ophalen

In de serviceconfiguratie moet u het regiospecifieke service-eindpunt opgeven. Het eindpunt is afhankelijk van de Azure-regio die u hebt geselecteerd bij het maken van de werkruimte.

Voer de volgende stappen uit om de URL van het service-eindpunt op te halen en op te slaan als een CI-werkstroomgeheim:

  1. Meld u aan bij de Playwright-portal met uw Azure-account.

  2. Selecteer op de startpagina van de werkruimte de optie Installatiehandleiding weergeven.

    Tip

    Als u meerdere werkruimten hebt, kunt u overschakelen naar een andere werkruimte door de naam van de werkruimte boven aan de pagina te selecteren en vervolgens alle werkruimten beheren te selecteren.

  3. In Het eindpunt regio toevoegen in uw installatie kopieert u de URL van het service-eindpunt.

    De eindpunt-URL komt overeen met de Azure-regio die u hebt geselecteerd bij het maken van de werkruimte.

  4. Sla de URL van het service-eindpunt op in een CI-werkstroomgeheim:

    Geheime naam Weergegeven als
    PLAYWRIGHT_SERVICE_URL Plak de eindpunt-URL die u eerder hebt gekopieerd.

Serviceconfiguratiebestand toevoegen

Als u playwright-tests niet hebt geconfigureerd voor uitvoering met de service, voegt u een serviceconfiguratiebestand toe aan uw opslagplaats. In de volgende stap geeft u dit serviceconfiguratiebestand op in de Playwright CLI.

  1. Maak een nieuw bestand playwright.service.config.ts naast het playwright.config.ts bestand.

    Gebruik desgewenst het playwright.service.config.ts bestand in de voorbeeldopslagplaats.

  2. Voeg de volgende inhoud toe:

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

    Standaard kunt u met de serviceconfiguratie het volgende doen:

    • Versnel build-pijplijnen door tests parallel uit te voeren met behulp van in de cloud gehoste browsers.
    • Vereenvoudig het oplossen van problemen met eenvoudige toegang tot testresultaten en artefacten die naar de service zijn gepubliceerd.

    U kunt er echter voor kiezen om een van deze functies of beide te gebruiken. Zie Hoe u servicefuncties gebruikt en het serviceconfiguratiebestand bijwerkt op basis van uw vereisten.

  3. Sla het bestand op en voer het door in de opslagplaats voor broncode.

Package.json-bestand bijwerken

Werk het package.json bestand in uw opslagplaats bij om details toe te voegen over het Microsoft Playwright Testing-servicepakket in devDependencies de sectie.

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

Artefacten inschakelen in playwright-configuratie

Zorg ervoor dat u in het playwright.config.ts bestand van uw project alle vereiste artefacten verzamelt.

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

Serviceconfiguratie instellen

  1. Maak een nieuw bestand PlaywrightServiceSetup.cs in de hoofdmap van uw project. Dit bestand vereenvoudigt de verificatie van uw client met de service.

  2. Voeg de volgende inhoud toe:

    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. Sla het bestand op en voer het door in de opslagplaats voor broncode.

Servicepakket installeren

Installeer het Microsoft Playwright Testing-pakket in uw project.

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

Met deze opdracht wordt het bestand van uw project bijgewerkt door de details van csproj het servicepakket toe te voegen aan de ItemGroup sectie. Vergeet niet deze wijzigingen door te voeren.

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

Voeg een bestand voor uw project toe of werk .runsettings het bij.

Als u uw Playwright-tests nog niet hebt geconfigureerd voor het uitvoeren van deze tests met de service, voegt u een bestand toe .runsettings aan uw opslagplaats. In de volgende stap geeft u dit serviceconfiguratiebestand op in de Playwright CLI.

  1. Maak een nieuw .runsettings bestand.

    Gebruik desgewenst het .runsettings bestand in de voorbeeldopslagplaats.

  2. Voeg de volgende inhoud toe:

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

    Met de instellingen in dit bestand kunt u het volgende doen:

    • Versnel build-pijplijnen door tests parallel uit te voeren met behulp van in de cloud gehoste browsers.
    • Publiceer testresultaten en artefacten naar de service voor snellere probleemoplossing.

    U kunt er echter voor kiezen om een van deze functies of beide te gebruiken. Zie Hoe u servicefuncties gebruikt en het serviceconfiguratiebestand bijwerkt op basis van uw vereisten.

  3. Sla het bestand op en voer het door in de opslagplaats voor broncode.

Artefacten inschakelen in uw Playwright-installatie

Stel Playwright in om artefacten vast te leggen, zoals schermopname, video's en traceringen.

  • Zie Schermopnamen vastleggen voor schermopnamen
  • Zie video's opnemen voor uw tests voor video's
  • Zie Een tracering opnemen voor traceringen

Zodra u deze artefacten hebt verzameld, voegt u deze toe aan de TestContext artefacten om ervoor te zorgen dat ze beschikbaar zijn in uw testrapporten. Zie ons voorbeeldproject voor NUnit voor meer informatie.

Verificatie instellen

De CI-machine waarop Playwright-tests worden uitgevoerd, moet worden geverifieerd met de Playwright Testing-service om de browsers de tests uit te voeren en de testresultaten en artefacten te publiceren.

De service biedt twee verificatiemethoden: Microsoft Entra ID en Toegangstokens. We raden u ten zeerste aan om Microsoft Entra ID te gebruiken om uw pijplijnen te verifiëren.

Verificatie instellen met behulp van Microsoft Entra-id

Als u GitHub Actions gebruikt, kunt u verbinding maken met de service met behulp van GitHub OpenID Connect. Volg de stappen om de integratie in te stellen:

Vereisten

Optie 1: Microsoft Entra-toepassing

Optie 2: Door de gebruiker toegewezen beheerde identiteit

GitHub-geheimen maken
  • Voeg de waarden toe die u in de vorige stap hebt verkregen als geheimen aan uw GitHub-opslagplaats. Zie GitHub Action Secret instellen. Deze variabelen worden in de GitHub Action-werkstroom gebruikt in de volgende stappen.
GitHub Secret Bron (Microsoft Entra-toepassing of beheerde identiteit)
AZURE_CLIENT_ID Client ID
AZURE_SUBSCRIPTION_ID Abonnements-id
AZURE_TENANT_ID Map-id (tenant)

Notitie

Voor verbeterde beveiliging wordt het sterk aanbevolen om GitHub Secrets te gebruiken om gevoelige waarden op te slaan in plaats van ze rechtstreeks in uw werkstroombestand op te slaan.

Verificatie instellen met behulp van toegangstokens

Let op

We raden u ten zeerste aan Microsoft Entra ID te gebruiken voor verificatie bij de service. Als u toegangstokens gebruikt, raadpleegt u Toegangstokens beheren

U kunt een toegangstoken genereren vanuit uw Playwright Testing-werkruimte en deze gebruiken in uw installatie. We raden Microsoft Entra ID echter ten zeerste aan voor verificatie vanwege de verbeterde beveiliging. Toegangstokens, terwijl dit handig is, werken zoals wachtwoorden met een lange levensduur en zijn gevoeliger voor inbreuk.

  1. Verificatie met toegangstokens is standaard uitgeschakeld. Schakel verificatie op basis van toegangstokens in.

  2. Verificatie instellen met behulp van toegangstokens.

  3. Sla het toegangstoken op in een CI-werkstroomgeheim en gebruik het in de GitHub Actions-werkstroom of het Yaml-bestand van Azure Pipeline.

Geheime naam Weergegeven als
PLAYWRIGHT_SERVICE_ACCESS_TOKEN Plak de waarde van het Access-token dat u eerder hebt gemaakt.

De werkstroomdefinitie bijwerken

Werk de CI-werkstroomdefinitie bij om playwright-tests uit te voeren met de Playwright CLI. Geef het serviceconfiguratiebestand door als invoerparameter voor de Playwright CLI. U configureert uw omgeving door omgevingsvariabelen op te geven.

  1. De CI-werkstroomdefinitie openen

  2. Voeg de volgende stappen toe om playwright-tests uit te voeren in Microsoft Playwright Testing.

    In de volgende stappen worden de wijzigingen in de werkstroom beschreven voor GitHub Actions of Azure Pipelines. Op dezelfde manier kunt u uw Playwright-tests uitvoeren met behulp van de Playwright CLI in andere CI-platforms.

    
  # 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

Werk de CI-werkstroomdefinitie bij om playwright-tests uit te voeren met de Playwright NUnit CLI. Geef het .runsettings bestand door als invoerparameter voor de Playwright CLI. U configureert uw omgeving door omgevingsvariabelen op te geven.

  1. Open de CI-werkstroomdefinitie.

  2. Voeg de volgende stappen toe om playwright-tests uit te voeren in Microsoft Playwright Testing.

    In de volgende stappen worden de wijzigingen in de werkstroom beschreven voor GitHub Actions of Azure Pipelines. Op dezelfde manier kunt u uw Playwright-tests uitvoeren met behulp van de Playwright CLI in andere CI-platforms.

    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. Sla uw wijzigingen op en voer deze door.

    Wanneer de CI-werkstroom wordt geactiveerd, worden uw Playwright-tests uitgevoerd in uw Microsoft Playwright Testing-werkruimte in browsers die worden gehost in de cloud, in 20 parallelle werkrollen. De verzamelde resultaten en artefacten worden gepubliceerd naar de service en kunnen worden weergegeven in de serviceportal.

De instellingen voor de testuitvoering kunnen worden gedefinieerd in .runsettings het bestand. Zie voor meer informatie over het gebruik van servicepakketopties

Notitie

De rapportagefunctie is standaard ingeschakeld voor bestaande werkruimten. Dit wordt in fasen geïmplementeerd en duurt enkele dagen. Als u fouten wilt voorkomen, controleert u of Rich diagnostics using reporting de instelling AAN is voor uw werkruimte voordat u doorgaat. Zie rapportage inschakelen voor werkruimte voor meer informatie.

Let op

Met Microsoft Playwright Testing worden kosten in rekening gebracht op basis van het totale aantal verbruikte testminuten en de gepubliceerde testresultaten. Als u een eerste gebruiker bent of aan de slag gaat met een gratis proefversie, kunt u beginnen met het uitvoeren van één test op schaal in plaats van uw volledige testpakket om te voorkomen dat u uw gratis testminuten en testresultaten uitgeput raakt.

Nadat u hebt gevalideerd dat de test is uitgevoerd, kunt u de belasting van de test geleidelijk verhogen door meer tests met de service uit te voeren.

U kunt één test met de service uitvoeren met behulp van de volgende opdrachtregel:

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

Testuitvoeringen en resultaten weergeven in de Playwright-portal

U kunt nu problemen met de CI-pijplijn oplossen in de Playwright-portal.

  1. Nadat de testuitvoering is voltooid, wordt er een koppeling naar de Playwright-portal gegenereerd. Open deze koppeling om gedetailleerde testresultaten en bijbehorende artefacten weer te geven. In de portal worden essentiële informatie weergegeven, waaronder:

    • Details van CI-build
    • Algemene testuitvoeringsstatus
    • De doorvoer-id die is gekoppeld aan de testuitvoering

    Schermopname van een lijst met tests in de testuitvoering.

  2. De Playwright-portal biedt alle benodigde informatie voor het oplossen van problemen. U kunt:

    • Schakelen tussen nieuwe pogingen.
    • Bekijk gedetailleerde foutenlogboeken, teststappen en bijgevoegde artefacten, zoals schermopnamen of video's.
    • Navigeer rechtstreeks naar traceerviewer voor een diepere analyse.

    Schermopname van het voorbeeld van een test.

  3. Met Trace Viewer kunt u uw testuitvoering visueel doorlopen. U kunt:

    • Gebruik de tijdlijn om de muisaanwijzer over afzonderlijke stappen te bewegen, waarbij de paginastatus voor en na elke actie wordt weergegeven.
    • Inspecteer gedetailleerde logboeken, DOM-momentopnamen, netwerkactiviteit, fouten en console-uitvoer voor elke stap.

    Schermopname van de traceringsviewer.

  1. Nadat de testuitvoering is voltooid, krijgt u een koppeling naar de Playwright-portal in uw terminal. Open deze koppeling om gedetailleerde testresultaten en bijbehorende artefacten weer te geven. In de portal worden essentiële informatie weergegeven, waaronder:

    • Details van CI-build
    • Algemene testuitvoeringsstatus
    • De doorvoer-id die is gekoppeld aan de testuitvoering

    Schermopname van een lijst met tests in de testuitvoering.

  2. De Playwright-portal biedt alle benodigde informatie voor het oplossen van problemen. U kunt:

    • Bekijk gedetailleerde foutenlogboeken en bijgevoegde artefacten, zoals schermopnamen of video's.
    • Navigeer rechtstreeks naar traceerviewer voor een diepere analyse.

    Schermopname van het voorbeeld van een test.

Notitie

Sommige metagegevens, zoals de eigenaar, beschrijving en categorie, worden momenteel niet weergegeven op het servicedashboard. Als er aanvullende informatie is die u wilt zien, dient u een GitHub-probleem in onze opslagplaats in.

  1. Met Trace Viewer kunt u uw testuitvoering visueel doorlopen. U kunt:

    • Gebruik de tijdlijn om de muisaanwijzer over afzonderlijke stappen te bewegen, waarbij de paginastatus voor en na elke actie wordt weergegeven.
    • Inspecteer gedetailleerde logboeken, DOM-momentopnamen, netwerkactiviteit, fouten en console-uitvoer voor elke stap.

    Schermopname van de traceringsviewer.

Tip

U kunt de microsoft Playwright Testing-servicefuncties onafhankelijk gebruiken. U kunt testresultaten publiceren naar de portal zonder de functie voor browsers in de cloud te gebruiken en u kunt ook alleen in de cloud gehoste browsers gebruiken om uw testpakket te versnellen zonder testresultaten te publiceren. Zie Servicefuncties gebruiken voor meer informatie.

Notitie

De testresultaten en artefacten die u publiceert, worden gedurende 90 dagen bewaard in de service. Daarna worden ze automatisch verwijderd.

Gerelateerde inhoud

U hebt een continue end-to-end-testwerkstroom ingesteld om uw Playwright-tests op schaal uit te voeren in browsers die in de cloud worden gehost.