Run Playwright Tests on Cloud Browsers using Playwright Workspaces

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.

Understanding Playwright Workspaces

Playwright Workspaces is an Azure App Testing capability that provides cloud execution environments for Playwright tests. The entire experience is managed through the Azure Portal, where you create and manage workspace resources, monitor test runs, and access reports.

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

1. Sign in to the Azure Portal
2. Navigate to Azure App Testing
3. Select Playwright Workspaces
4. Click Create
5. Choose your subscription, resource group, and region
6. Create the workspace resource

This workspace acts as the cloud execution environment for your Playwright 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 Playwright Workspace resource in Azure Portal
2. In the workspace setup section, download the service configuration file
3. Add the file (playwright.service.config.ts) to your project
4. Place it alongside your playwright.config.ts

This configuration connects your local Playwright tests to the Azure-hosted browser infrastructure.

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