Delen via

Quickstart: Doorlopend end-to-end testen met Playwright-werkruimten instellen

In deze quickstart stelt u doorlopend end-to-end testen in met Playwright Workspaces om te controleren of uw web-app correct wordt uitgevoerd in verschillende browsers en besturingssystemen met elke codedoorvoering en het oplossen van problemen met tests 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 Playwright Workspaces.

Vereiste voorwaarden

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 Azure Portal met uw Azure-account en navigeer naar uw werkruimte.

  2. Selecteer de pagina Aan de slag .

    Schermopname van het navigeren naar de pagina Aan de slag.

  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 Waarde
    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 { createAzurePlaywrightConfig, ServiceOS } from '@azure/playwright';
import { DefaultAzureCredential } from '@azure/identity';
import config from './playwright.config';

/* Learn more about service configuration at https://aka.ms/pww/docs/config */
export default defineConfig(
  config,
  createAzurePlaywrightConfig(config, {
    exposeNetwork: '<loopback>',
    connectTimeout: 3 * 60 * 1000, // 3 minutes
    os: ServiceOS.LINUX,
    credential: new DefaultAzureCredential(),
  })
);

    Met de serviceconfiguratie kunt u standaard build-pijplijnen versnellen door tests parallel uit te voeren met behulp van browsers die worden gehost in de cloud.

  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 Playwright Workspaces-pakket in devDependencies de sectie.

"devDependencies": {
    "@azure/playwright": "latest"
}

Servicepakket installeren

Installeer het Playwright Workspaces-pakket in uw project.

dotnet add package Azure.Developer.Playwright.NUnit

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.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Serviceconfiguratie instellen

  1. Maak een nieuw bestand PlaywrightServiceNUnitSetup.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.Playwright.NUnit;
using Azure.Identity;
using System.Runtime.InteropServices;
using System;

namespace PlaywrightService.SampleTests; // Remember to change this as per your project namespace

[SetUpFixture]
public class PlaywrightServiceNUnitSetup : PlaywrightServiceBrowserNUnit
{
    public PlaywrightServiceNUnitSetup() : base(
        credential: new DefaultAzureCredential(),
    )
    {
        // no-op
    }
}
  1. Sla het bestand op en voer het door in de opslagplaats voor broncode.

Authenticatie instellen

De CI-machine waarop Playwright-tests worden uitgevoerd, moet worden geverifieerd met de Playwright Workspaces-service om de browsers te krijgen om de tests uit te voeren.

De service biedt twee authenticatiemethoden: Microsoft Entra ID en Access Tokens. 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:

Vereiste voorwaarden

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 (indien nodig met extra uitleg of context) Bron (Microsoft Entra-toepassing of beheerde identiteit)
AZURE_CLIENT_ID Klant-ID
AZURE_SUBSCRIPTION_ID Abonnements-id
AZURE_TENANT_ID Map-id (tenant)

Opmerking

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

Waarschuwing

We raden u ten zeerste aan om 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-werkruimte en dit gebruiken in uw installatie. We raden Microsoft Entra ID echter ten zeerste aan voor verificatie vanwege de verbeterde beveiliging. Toegangstokens zijn weliswaar handig, maar functioneren als wachtwoorden met een lange levensduur en zijn vatbaarder voor compromittering.

  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 Waarde
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. Open de CI-werkstroomdefinitie.

  2. Voeg de volgende stappen toe om uw Playwright-tests uit te voeren in Playwright Workspaces.

    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 (Playwright Workspaces)
  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 Playwright Workspaces
            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. U configureert uw omgeving door omgevingsvariabelen op te geven.

  1. Open de CI-werkstroomdefinitie.

  2. Voeg de volgende stappen toe om uw Playwright-tests uit te voeren in Playwright Workspaces.

    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 Playwright Workspaces
          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 -- 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 Playwright-werkruimte in in de cloud gehoste browsers, in 20 parallelle werkrollen. De resultaten worden gepubliceerd naar de service en kunnen worden weergegeven in Azure Portal.

Waarschuwing

Met Playwright Workspaces worden kosten in rekening gebracht op basis van het totale aantal verbruikte testminuten. 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 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

Playwright kan uitgebreide testartefacten verzamelen, zoals logboeken, traceringen en schermopnamen bij elke testuitvoering. Zie de Playwright-documentatie voor meer informatie over het weergeven van testartefacten in uw CI-pijplijn.

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

  • Last updated on