Browserstack
Run Playwright suites on BrowserStack’s cloud grid when you need Safari, Firefox, or a Windows/macOS browser matrix beyond local Chromium.
Overview
browserstack is an agent skill for the Ship phase that configures Playwright to run tests on BrowserStack’s cloud grid for cross-browser and cross-device coverage.
Install
npx skills add https://github.com/alirezarezvani/claude-skills --skill browserstackWhat is this skill?
- Triggers on browserstack, cross-browser, cloud testing, browser matrix, Safari/Firefox compatibility phrases
- Stops with setup guidance if BROWSERSTACK_USERNAME or BROWSERSTACK_ACCESS_KEY is missing
- /pw:browserstack setup path to patch playwright.config.ts with CDP wsEndpoint caps
- Conditional projects switch when BrowserStack env vars are present
- Example Windows 11 + latest Chrome cloud project definition included
- 2 required env vars: BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY
Adoption & trust: 1.5k installs on skills.sh; 17.5k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You only test on local Chromium but users report breakage on Safari, Firefox, or specific Windows and macOS versions you cannot reproduce on one laptop.
Who is it for?
Solo builders with Playwright already in repo who need occasional real-browser matrices before release.
Skip if: Projects with no Playwright setup, mobile-native-only apps without web E2E, or teams forbidden from sending tests to third-party clouds.
When should I use this skill?
When the user mentions browserstack, cross-browser, cloud testing, browser matrix, test on Safari/Firefox, or browser compatibility.
What do I get? / Deliverables
Playwright is wired to BrowserStack CDP endpoints with documented caps so the same suite can execute on the cloud browser matrix when credentials are set.
- Updated playwright.config.ts BrowserStack projects
- Runnable cloud test invocation plan
- Credential missing stop message when env incomplete
Recommended Skills
Journey fit
Canonical shelf is Ship → testing because the skill configures and executes cross-browser Playwright runs as a pre-release quality gate. Testing subphase matches BrowserStack connectOptions, credential checks, and browser/OS matrix projects rather than production monitoring.
How it compares
Skill-guided Playwright + BrowserStack wiring—not a replacement for local fast tests or a standalone BrowserStack CLI cheat sheet.
Common Questions / FAQ
Who is browserstack for?
Indie web builders using Playwright who want agent-guided BrowserStack configuration for Safari, Firefox, and OS variants.
When should I use browserstack?
Use it in Ship testing when mentions include browserstack, cross-browser, cloud testing, browser matrix, or testing on Safari/Firefox before launch.
Is browserstack safe to install?
It requires cloud credentials and network access; review the Security Audits panel on this page and store BROWSERSTACK_* secrets outside committed config.
SKILL.md
READMESKILL.md - 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](https://www.browserstack.com/accounts/settings) and stop. ## Capabilities ### 1. Configure for BrowserStack ``` /pw:browserstack setup ``` Steps: 1. Check current `playwright.config.ts` 2. Add BrowserStack connect options: ```typescript // 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 ], }); ``` 3. Add npm script: `"test:e2e:cloud": "npx playwright test --project='chrome@*' --project='firefox@*' --project='webkit@*'"` ### 2. Run Tests on BrowserStack ``` /pw:browserstack run ``` Steps: 1. Verify credentials are set 2. Run tests with BrowserStack projects: ```bash BROWSERSTACK_USERNAME=$BROWSERSTACK_USERNAME \ BROWSERSTACK_ACCESS_KEY=$BROWSERSTACK_ACCESS_KEY \ npx playwright test --project='chrome@*' --project='firefox@*' ``` 3. Monitor execution 4. Report results per browser ### 3. Get Build Results ``` /pw:browserstack results ``` Steps: 1. Call `browserstack_get_builds` MCP tool 2. Get latest build's sessions 3. For each session: - Status (pass/fail) - Browser and OS - Duration - Video URL - Log URLs 4. Format as summary table ### 4. Check Available Browsers ``` /pw:browserstack browsers ``` Steps: 1. Call `browserstack_get_browsers` MCP tool 2. Filter for Playwright-compatible browsers 3. Display available browser/OS combinations ### 5. Local Testing ``` /pw:browserstack local ``` For testing localhost or staging behind firewall: 1. Install BrowserStack Local: `npm install -D browserstack-local` 2. Add local tunnel to config 3. Provide setup instructions ## MCP Tools Used | Tool | When | |---|---| | `browserstack_get_plan` | Check account limits | | `