browserstack

BrowserStack 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 : 'chrome@latest:Windows 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 : 'firefox@latest:Windows 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 : 'webkit@latest:OS 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 Tool When browserstack_get_plan Check account limits browserstack_get_browsers List available browsers browserstack_get_builds List recent builds browserstack_get_sessions Get sessions in a build browserstack_get_session Get session details (video, logs) browserstack_update_session Mark pass/fail browserstack_get_logs Get text/network logs Output Cross-browser test results table Per-browser pass/fail status Links to BrowserStack dashboard for video/screenshots Any browser-specific failures highlighted