Browserstack

What This Skill Does

The BrowserStack skill allows users to run Playwright tests on BrowserStack's cloud grid for cross-browser and cross-device testing. It configures Playwright to connect to BrowserStack, enabling comprehensive testing across different environments. This skill is ideal for ensuring web applications function correctly on various browsers and devices.

When to Use

• Configure Playwright for BrowserStack.
• Run tests on multiple browsers and devices.
• Generate cross-browser test reports.
• Integrate BrowserStack into CI/CD pipelines.
• Test on different operating systems.
• Ensure compatibility across environments.

Key Features

• Configures Playwright to connect to BrowserStack.
• Supports testing on a wide range of browsers and devices.
• Requires BrowserStack credentials for authentication.
• Provides code snippets for configuring playwright.config.ts.
• Enables cross-browser and cross-device testing.
• Streamlines integration with BrowserStack's cloud grid.

Manual Installation

Manual installation

• View Full Skill Content.
• The complete markdown content that gets installed.
• Browser.
• Stack Integration.

Run Playwright tests on BrowserStack's cloud grid for cross-browser and cross-device testing.

Prerequisites

Environment variables must be set: BROWSERSTACK_USERNAME — your BrowserStack username BROWSERSTACK_ACCESS_KEY — your access key

If not set, inform the user how to get them from browserstack.com/accounts/settings and stop.

Capabilities

1. Configure for BrowserStack

/pw:browserstack setup

Steps: Check current playwright.config.ts Add BrowserStack connect options:

// Add to playwright.config.ts import { defineConfig } from '@playwright/test';

const isBS = !!process.env. BROWSERSTACK_USERNAME;

export default defineConfig({ // ... existing config projects: isBS ? [ { name: "chromelatestwindows-11", use: { connectOptions: { wsEndpoint: wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({ 'browser': 'chrome', 'browser_version': 'latest', 'os': 'Windows', 'os_version': '11', 'browserstack.username': process.env.BROWSERSTACK_USERNAME, 'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY, }))}, }, }, }, { name: "firefoxlatestwindows-11", use: { connectOptions: { wsEndpoint: wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({ 'browser': 'playwright-firefox', 'browser_version': 'latest', 'os': 'Windows', 'os_version': '11', 'browserstack.username': process.env.BROWSERSTACK_USERNAME, 'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY, }))}, }, }, }, { name: "webkitlatestos-x-ventura", use: { connectOptions: { wsEndpoint: wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({ 'browser': 'playwright-webkit', 'browser_version': 'latest', 'os': 'OS X', 'os_version': 'Ventura', 'browserstack.username': process.env.BROWSERSTACK_USERNAME, 'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY, }))}, }, }, }, ] : [ // ... local projects fallback ], });

Add npm script: "test:e2e:cloud": "npx playwright test --project='chrome@' --project='firefox@' --project='webkit@*'"

2. Run Tests on BrowserStack

/pw:browserstack run

Steps: Verify credentials are set Run tests with BrowserStack projects: BROWSERSTACK_USERNAME=$BROWSERSTACK_USERNAME
BROWSERSTACK_ACCESS_KEY=$BROWSERSTACK_ACCESS_KEY
npx playwright test --project='chrome@' --project='firefox@' Monitor execution Report results per browser

3. Get Build Results

/pw:browserstack results

Steps: Call browserstack_get_builds MCP tool Get latest build's sessions For each session:

• Status (pass/fail)
• Browser and OS
• Duration
• Video URL
• Log URLs Format as summary table

4. Check Available Browsers

/pw:browserstack browsers

Steps: Call browserstack_get_browsers MCP tool Filter for Playwright-compatible browsers Display available browser/OS combinations

5. Local Testing

/pw:browserstack local

For testing localhost or staging behind firewall: Install BrowserStack Local: npm install -D browserstack-local Add local tunnel to config Provide setup instructions

MCP Tools Used

Output

Cross-browser test results table Per-browser pass/fail status Links to BrowserStack dashboard for video/screenshots

• Any browser-specific failures highlighted.
• Browser.
• Stack Integration.

Run Playwright tests on BrowserStack's cloud grid for cross-browser and cross-device testing.