Running Playwright Tests on BrowserStack

Running Playwright tests on BrowserStack allows you to execute your end-to-end tests across real browsers and operating systems on the cloud, instead of just local or headless environments.

Here’s a step-by-step guide to run Playwright tests on BrowserStack:

✅ Prerequisites

Node.js installed

Playwright project set up

A BrowserStack account

BrowserStack Username & Access Key (found in your Automate dashboard)

📦 Step 1: Install Playwright and BrowserStack CLI

Install Playwright (if not already):

bash

Copy

Edit

npm init -y

npm install -D playwright

npx playwright install

Install the BrowserStack CLI:

bash

Copy

Edit

npm install -D @browserstack/playwright-cli

📁 Step 2: Set Up Configuration

Create a browserstack.config.ts (or .js) in your root directory:

ts

Copy

Edit

import { defineConfig } from '@playwright/test';

export default defineConfig({

  projects: [

    {

      name: 'BrowserStack Chrome',

      use: {

        browserName: 'chromium',

        channel: 'chrome',

      },

    },

  ],

  reporter: [['list']],

  testDir: './tests',

});

🗝️ Step 3: Set BrowserStack Credentials

You can set them via environment variables:

bash

Copy

Edit

export BROWSERSTACK_USERNAME='your_username'

export BROWSERSTACK_ACCESS_KEY='your_access_key'

Or create a .env file:

dotenv

Copy

Edit

BROWSERSTACK_USERNAME=your_username

BROWSERSTACK_ACCESS_KEY=your_access_key

🧪 Step 4: Write a Sample Test

Example: tests/example.spec.ts

ts

Copy

Edit

import { test, expect } from '@playwright/test';

test('visit BrowserStack homepage', async ({ page }) => {

  await page.goto('https://www.browserstack.com/');

  await expect(page).toHaveTitle(/BrowserStack/);

});

🚀 Step 5: Run Tests on BrowserStack

Run using the BrowserStack CLI:

bash

Copy

Edit

npx browserstack-playwright --config=browserstack.config.ts

Optional flags:

--sync: waits for tests to complete and fetches results

--parallel=N: runs N tests in parallel

🔍 Step 6: View Test Results

Go to the BrowserStack Automate dashboard to:

View test videos

See logs and console output

Debug test failures

🧰 Advanced Options

Custom Capabilities:

You can customize OS, browser versions, and resolution using capabilities in your config.

ts

Copy

Edit

capabilities: {

  'os': 'Windows',

  'osVersion': '10',

  'browserName': 'Chrome',

  'browserVersion': 'latest',

  'buildName': 'playwright-build-1',

  'sessionName': 'My Test Session',

}

Local Testing:

To test localhost or internal apps:

bash

Copy

Edit

npm install -g browserstack-local

Then run:

bash

Copy

Edit

browserstack-local --key YOUR_ACCESS_KEY

🧩 Resources

BrowserStack Playwright Docs

Playwright Test Documentation

Learn Playwright Training Course in Hyderabad

Read More

Integrating Playwright with Azure DevOps

Playwright with Docker: Complete Setup

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions