Azure Playwright Testing Service (Preview): Run Playwright Tests on Cloud Browsers

Overview

End‑to‑end testing at scale is a common challenge when teams need reliable, cross‑browser validation without managing infrastructure. Azure Playwright Testing Service (Preview) simplifies this by allowing you to run Playwright tests on cloud-hosted browsers directly from your local setup.

In this post, I’ll walk through how to:

• Set up Azure Playwright Testing Service
• Configure your Playwright project
• Run UI and API tests on remote browsers
• View execution logs, HTML reports, and traces

This guide uses Playwright with TypeScript in Visual Studio / VS Code and is based on hands‑on setup steps.

Prerequisites

Before you begin, ensure you have:

• An active Azure subscription
• Node.js installed
• A Playwright project using TypeScript
• Visual Studio or Visual Studio Code

Step 1: Create a Playwright Workspace in Azure Portal

1. Go to Azure Portal → Microsoft Playwright Testing (Preview)
2. Select your subscription and region
3. Create a new workspace

Once created, the workspace will serve as the execution environment for your cloud browser tests.

Step 2: Create a Playwright Project Locally

Create a Playwright project in Visual Studio or VS Code and add your test cases under the tests folder.

Example structure:

tests/

└── example.spec.ts

Your Playwright tests will be executed from this project using Azure-hosted browsers.

Step 3: Add Playwright Service Configuration

1. Open your Azure Playwright workspace
2. On the Home page, download the Playwright service configuration file
   • Link provided in portal: https://aka.ms/mpt/service-config
3. Add the file (playwright.service.config.ts) to your project
4. Place it in the same directory as playwright.config.ts

This configuration enables communication between your local tests and the cloud service.

Step 4: Generate Access Token and Service URL

Within the Playwright Testing portal:

1. Generate a new access token
2. Copy:
   • Access Token
   • Region-specific Service URL

Step 5: Configure Environment Variables

Create a .env file in the same folder as your config files and add:

PLAYWRIGHT_SERVICE_ACCESS_TOKEN={YOUR_ACCESS_TOKEN} PLAYWRIGHT_SERVICE_URL={YOUR_REGION_ENDPOINT}

These values authenticate your test runs with Azure Playwright Testing Service.

Step 6: Install Playwright VS Code Extension (Optional)

For an improved developer experience, install the Playwright Test extension:

• https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

Step 7: Run Tests on Remote Browsers

Open a terminal and run:

To execute a specific test file:

npx playwright test example.spec.ts --config=playwright.service.config.ts