Démarrage rapide : Configurer des tests de bout en bout continus avec des espaces de travail playwright

Ajouter un fichier de configuration de service

Si vous n’avez pas configuré des tests Playwright pour les exécuter avec le service, ajoutez un fichier de configuration de service à votre référentiel. Lors de l’étape suivante, vous spécifierez ce fichier de configuration de service en utilisant l’interface de ligne de commande de Playwright.

1. Créez un fichier playwright.service.config.ts en même temps que le fichier playwright.config.ts.

   Si vous le souhaitez, utilisez le fichier playwright.service.config.ts dans l’exemple de référentiel.

2. Ajoutez le contenu suivant :

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

   Par défaut, la configuration du service vous permet d’accélérer les pipelines de génération en exécutant des tests en parallèle à l’aide de navigateurs hébergés dans le cloud.

3. Enregistrez et validez le fichier dans votre référentiel de code source.

Mettre à jour le fichier package.json

Mettez à jour le fichier dans votre référentiel pour ajouter des détails sur le package.json package des espaces de travail Playwright dans la devDependencies section.

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

Installer le package de service

Dans votre projet, installez le package Espaces de travail Playwright.

dotnet add package Azure.Developer.Playwright.NUnit

Cette commande met à jour le fichier csproj de votre projet en ajoutant les détails du package de service à la section ItemGroup. Pensez à valider les modifications.

  <ItemGroup>
    <PackageReference Include="Azure.Developer.Playwright.NUnit" Version="1.0.0" />
  </ItemGroup>

Définir la configuration du service

1. Créez un fichier PlaywrightServiceNUnitSetup.cs dans le répertoire racine de votre projet. Ce fichier facilite l’authentification de votre client auprès du service.
2. Ajoutez le contenu suivant :

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

3. Enregistrez et validez le fichier dans votre référentiel de code source.

Mettez à jour la définition de workflow de CI pour exécuter vos tests Playwright en utilisant l’interface de ligne de commande de Playwright. Transmettez le fichier de configuration de service en tant que paramètre d’entrée pour l’interface de ligne de commande de Playwright. Vous configurez votre environnement en spécifiant des variables d’environnement.

1. Ouvrez la définition de workflow de CI.

2. Ajoutez les étapes suivantes pour exécuter vos tests playwright dans les espaces de travail playwright.

   Les étapes suivantes décrivent les modifications de workflow pour GitHub Actions ou Azure Pipelines. De même, vous pouvez exécuter vos tests Playwright en utilisant l’interface de ligne de commande de Playwright dans d’autres plateformes de CI.

   • GitHub Actions
   • Azure Pipelines

   
     # 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
   

Mettez à jour la définition de workflow de CI pour exécuter vos tests Playwright en utilisant l’interface de ligne de commande NUnit de Playwright. Vous configurez votre environnement en spécifiant des variables d’environnement.

1. Ouvrez la définition de workflow de CI.

2. Ajoutez les étapes suivantes pour exécuter vos tests playwright dans les espaces de travail playwright.

   Les étapes suivantes décrivent les modifications de workflow pour GitHub Actions ou Azure Pipelines. De même, vous pouvez exécuter vos tests Playwright en utilisant l’interface de ligne de commande de Playwright dans d’autres plateformes de CI.

   • GitHub Actions
   • Azure Pipelines

   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
   

Vous pouvez exécuter un test unique avec le service à l’aide de la ligne de commande suivante :

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