Quickstart: Set up continuous end-to-end testing with Playwright Workspaces

Add service configuration file

If you don't have Playwright tests configured to run with the service, add a service configuration file to your repository. In the next step, you then specify this service configuration file on the Playwright CLI.

1. Create a new file playwright.service.config.ts alongside the playwright.config.ts file.

   Optionally, use the playwright.service.config.ts file in the sample repository.

2. Add the following content to it:

   import { defineConfig } from '@playwright/test';
   import { getServiceConfig, ServiceOS } from '@azure/playwright';
   import { DefaultAzureCredential } from '@azure/identity';
   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: 3 * 60 * 1000, // 3 minutes
       os: ServiceOS.LINUX,
       credential: new DefaultAzureCredential(),
     })
   );
   

   By default, the service configuration enables you to accelerate build pipelines by running tests in parallel using cloud-hosted browsers.

3. Save and commit the file to your source code repository.

Update package.json file

Update the package.json file in your repository to add details about Playwright Workspaces package in devDependencies section.

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

Install service package

In your project, install Playwright Workspaces package.

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

This command updates your project's csproj file by adding the service package details to the ItemGroup section. Remember to commit these changes.

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

Set up service configuration

1. Create a new file PlaywrightServiceNUnitSetup.cs in the root directory of your project. This file facilitates authentication of your client with the service.
2. Add the following content to it:

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. Save and commit the file to your source code repository.

Update the CI workflow definition to run your Playwright tests with the Playwright CLI. Pass the service configuration file as an input parameter for the Playwright CLI. You configure your environment by specifying environment variables.

1. Open the CI workflow definition.

2. Add the following steps to run your Playwright tests in Playwright Workspaces.

   The following steps describe the workflow changes for GitHub Actions or Azure Pipelines. Similarly, you can run your Playwright tests by using the Playwright CLI in other CI platforms.

   • 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
   

Update the CI workflow definition to run your Playwright tests with the Playwright NUnit CLI. You configure your environment by specifying environment variables.

1. Open the CI workflow definition.

2. Add the following steps to run your Playwright tests in Playwright Workspaces.

   The following steps describe the workflow changes for GitHub Actions or Azure Pipelines. Similarly, you can run your Playwright tests by using the Playwright CLI in other CI platforms.

   • 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
   

You can run a single test with the service by using the following command-line:

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