Quickstart: Set up continuous end-to-end testing with Microsoft Playwright Testing Preview

In this quickstart, you set up continuous end-to-end testing with Microsoft Playwright Testing Preview to validate that your web app runs correctly across different browsers and operating systems with every code commit and troubleshoot tests easily using the service dashboard. Learn how to add your Playwright tests to a continuous integration (CI) workflow, such as GitHub Actions, Azure Pipelines, or other CI platforms.

After you complete this quickstart, you have a CI workflow that runs your Playwright test suite at scale and helps you troubleshoot tests easily with Microsoft Playwright Testing.

Important

Microsoft Playwright Testing is currently in preview. For legal terms that apply to Azure features that are in beta, in preview, or otherwise not yet released into general availability, see the Supplemental Terms of Use for Microsoft Azure Previews.

Prerequisites

• An Azure account with an active subscription. If you don't have an Azure subscription, create a free account before you begin.

• A Microsoft Playwright Testing workspace. Complete the quickstart: run Playwright tests at scale to create a workspace.

GitHub Actions

• A GitHub account. If you don't have a GitHub account, you can create one for free.
• A GitHub repository that contains your Playwright test specifications and GitHub Actions workflow. To create a repository, see Creating a new repository.
• A GitHub Actions workflow. If you need help with getting started with GitHub Actions, see create your first workflow
• Set up authentication from GitHub Actions to Azure. See Use GitHub Actions to connect to Azure

Azure Pipelines

• An Azure DevOps organization and project. If you don't have an Azure DevOps organization, you can create one for free.
• A pipeline definition. If you need help with getting started with Azure Pipelines, see create your first pipeline.
• Azure Resource Manager Service connection to securely authenticate to the service from Azure Pipelines, see Azure Resource Manager service connection

Get the service region endpoint URL

In the service configuration, you have to provide the region-specific service endpoint. The endpoint depends on the Azure region you selected when creating the workspace.

To get the service endpoint URL and store it as a CI workflow secret, perform the following steps:

1. Sign in to the Playwright portal with your Azure account.

2. On the workspace home page, select View setup guide.

   Tip

   If you have multiple workspaces, you can switch to another workspace by selecting the workspace name at the top of the page, and then select Manage all workspaces.

3. In Add region endpoint in your setup, copy the service endpoint URL.

   The endpoint URL matches the Azure region that you selected when creating the workspace.

4. Store the service endpoint URL in a CI workflow secret:

   Secret name	Value
   PLAYWRIGHT_SERVICE_URL	Paste the endpoint URL you copied previously.

Add service configuration file

If you haven't configured your Playwright tests yet for running them on cloud-hosted browsers, 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/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']],
     }
   );
   

   By default, the service configuration enables you to:

   • Accelerate build pipelines by running tests in parallel using cloud-hosted browsers.
   • Simplify troubleshooting with easy access to test results and artifacts published to the service.

   However, you can choose to use either of these features or both. See How to use service features and update the service configuration file as per your requirement.

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 Microsoft Playwright Testing service package in devDependencies section.

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

Enable artifacts in Playwright configuration

In the playwright.config.ts file of your project, make sure you are collecting all the required artifacts.

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

Update the workflow definition

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 Microsoft Playwright Testing.

   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

   
     # 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 }} 
       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_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
     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
   

   Azure Pipelines

   - task: PowerShell@2
     enabled: true
     displayName: "Install dependencies"
     inputs:
       targetType: 'inline'
       script: 'npm ci'
       workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: AzureCLI@2
     displayName: Run Playwright Test  
       env:
       PLAYWRIGHT_SERVICE_URL: $(PLAYWRIGHT_SERVICE_URL)
       PLAYWRIGHT_SERVICE_RUN_ID: ${{ parameters.runIdPrefix }}$(Build.DefinitionName) - $(Build.BuildNumber) - $(System.JobAttempt) 
     inputs:
       azureSubscription: My_Service_Connection # Service connection used to authenticate this pipeline with Azure to use the service
       scriptType: 'pscore'
       scriptLocation: 'inlineScript'
       inlineScript: |
         npx playwright test -c playwright.service.config.ts --workers=20
     addSpnToEnvironment: true
     workingDirectory: path/to/playwright/folder # update accordingly
   
   - task: PublishPipelineArtifact@1
     displayName: Upload Playwright report
     inputs:
       targetPath: path/to/playwright/folder/playwright-report/ # update accordingly
       artifact: 'Playwright tests'
       publishLocation: 'pipeline'
   

3. Save and commit your changes.

   When the CI workflow is triggered, your Playwright tests run in your Microsoft Playwright Testing workspace on cloud-hosted browsers, across 20 parallel workers.

Note

Reporting feature is enabled by default for existing workspaces. This is being rolled out in stages and will take a few days. To avoid failures, confirm that Rich diagnostics using reporting setting is ON for your workspace before proceeding. See, Enable reporting for workspace.

Caution

With Microsoft Playwright Testing, you get charged based on the number of total test minutes and test result published. If you're a first-time user or getting started with a free trial, you might start with running a single test at scale instead of your full test suite to avoid exhausting your free test minutes and test results.

After you validate that the test runs successfully, you can gradually increase the test load by running more tests with the service.

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

View test runs and results in the Playwright portal

You can now troubleshoot the CI pipeline in the Playwright portal,

1. After your test run completes, a link to the Playwright Portal is generated. Open this link to view detailed test results and associated artifacts. The portal displays essential information, including:

   • CI build details
   • Overall test run status
   • The commit ID linked to the test run

   

2. The Playwright portal provides all the necessary information for troubleshooting. You can:

   • Switch between retries.
   • View detailed error logs, test steps, and attached artifacts such as screenshots or videos.
   • Navigate directly to the Trace Viewer for deeper analysis.

   

3. The Trace Viewer allows you to step through your test execution visually. You can:

   • Use the timeline to hover over individual steps, revealing the page state before and after each action.
   • Inspect detailed logs, DOM snapshots, network activity, errors, and console output for each step.

   

Tip

You can use Microsoft Playwright Testing service features independently. You can publish test results to the portal without using the cloud-hosted browsers feature and you can also use only cloud-hosted browsers to expedite your test suite without publishing test results. For details, see How to use service features.

Note

The test results and artifacts that you publish are retained on the service for 90 days. After that, they are automatically deleted.

Related content

You've successfully set up a continuous end-to-end testing workflow to run your Playwright tests at scale on cloud-hosted browsers.

• Grant users access to the workspace

• Manage your workspaces