Guida introduttiva: Configurare test end-to-end continui con Playwright Workspaces

Aggiungere file di configurazione del servizio

Se non sono configurati test Playwright per l'esecuzione con il servizio, aggiungere un file di configurazione del servizio al repository. Nel passaggio successivo si specifica quindi questo file di configurazione del servizio nell'interfaccia della riga di comando (CLI) Playwright.

1. Creare un nuovo file playwright.service.config.ts insieme al file playwright.config.ts.

   Facoltativamente, usare il file playwright.service.config.ts nel repository di esempio.

2. Aggiungere il contenuto seguente:

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

   Per impostazione predefinita, la configurazione del servizio consente di accelerare le pipeline di compilazione eseguendo test in parallelo usando browser ospitati nel cloud.

3. Salvare ed eseguire il commit del file nel repository del codice sorgente.

Aggiornare il file package.json

Aggiornare il file package.json nel repository per aggiungere dettagli sul pacchetto Playwright Workspaces nella sezione devDependencies.

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

Installare il pacchetto del servizio

Nel progetto installare il pacchetto Playwright Workspaces.

dotnet add package Azure.Developer.Playwright.NUnit

Questo comando aggiorna il file csproj del progetto aggiungendo i dettagli del pacchetto del servizio alla sezione ItemGroup. Ricordarsi di eseguire il commit delle modifiche.

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

Configurare la configurazione del servizio

1. Creare un nuovo file PlaywrightServiceNUnitSetup.cs nella directory radice del progetto. Questo file facilita l'autenticazione del client con il servizio.
2. Aggiungere il contenuto seguente:

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. Salvare ed eseguire il commit del file nel repository del codice sorgente.

Aggiornare la definizione del flusso di lavoro CI per eseguire i test Playwright con l'interfaccia della riga di comando di Playwright. Passare il file di configurazione del servizio come parametro di input per l'interfaccia della riga di comando di Playwright. Per configurare l'ambiente, specificare le variabili di ambiente.

1. Aprire la definizione del flusso di lavoro CI.

2. Aggiungere i passaggi seguenti per eseguire i test Playwright in Playwright Workspaces.

   I passaggi seguenti descrivono le modifiche del flusso di lavoro per GitHub Actions o Azure Pipelines. Analogamente, è possibile eseguire i test Playwright usando l'interfaccia della riga di comando di Playwright in altre piattaforme 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
   

Aggiornare la definizione del flusso di lavoro CI per eseguire i test Playwright con l'interfaccia della riga di comando di Playwright NUnit. Per configurare l'ambiente, specificare le variabili di ambiente.

1. Aprire la definizione del flusso di lavoro CI.

2. Aggiungere i passaggi seguenti per eseguire i test Playwright in Playwright Workspaces.

   I passaggi seguenti descrivono le modifiche del flusso di lavoro per GitHub Actions o Azure Pipelines. Analogamente, è possibile eseguire i test Playwright usando l'interfaccia della riga di comando di Playwright in altre piattaforme 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
   

È possibile eseguire un singolo test con il servizio usando la riga di comando seguente:

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