Engineering TestingPlaywrightBrowserStack

Playwright Pro — BrowserStack

Run Playwright tests on BrowserStack cloud infrastructure.

$skillfish add ~skills/playwright-pro-browserstack

Real Examples Get Started Models & Context

Real Conversations

See how the Playwright Pro — BrowserStack skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

We need to run our suite on BrowserStack before our enterprise release. We support Chrome, Firefox, and Safari on Windows 11 and macOS. BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY are set.

Agent

Credentials confirmed. Updating playwright.config.ts with BrowserStack connect options. This skill includes executable scripts — I'll need your permission before running them.

Updated playwright.config.ts — adds BrowserStack projects when BROWSERSTACK_USERNAME is present:

const isBS = !!process.env.BROWSERSTACK_USERNAME;

projects: isBS ? [
  {
    name: 'chrome@latest:Windows 11',
    use: { connectOptions: { wsEndpoint: bsUrl('chrome', 'latest', 'Windows', '11') } },
  },
  {
    name: 'firefox@latest:Windows 11',
    use: { connectOptions: { wsEndpoint: bsUrl('playwright-firefox', 'latest', 'Windows', '11') } },
  },
  {
    name: 'webkit@latest:OS X Ventura',
    use: { connectOptions: { wsEndpoint: bsUrl('playwright-webkit', 'latest', 'OS X', 'Ventura') } },
  },
  // + Edge on Windows 11, Safari on Sonoma
] : localProjects,

Script added:

"test:e2e:cloud": "playwright test --project='chrome@*' --project='firefox@*' --project='webkit@*'"

Tests stream results back in real time. Every session gets a video recording and network log on the BrowserStack dashboard.

Run a smoke test on 5 critical paths across all 5 browsers to verify the connection?

You

BrowserStack build BS-4821 shows our date picker tests failing on Safari only — Chrome and Firefox pass. Can you pull the session details and tell me what's different?

Agent

Fetching build #BS-4821 sessions via browserstack_get_sessions.

Build #BS-4821 Summary:

chrome@latest:Windows 11   — 134/134 passed
firefox@latest:Windows 11  — 133/134 passed (1 flaky)
webkit@latest:OS X Ventura — 128/134 passed (6 failing)

All 6 Safari failures are in date-picker.spec.ts.

Pulling session logs via browserstack_get_logs...

Root cause from Safari console:

TypeError: e.createPointerEvent is not a function
  at DatePicker._handleDateClick (date-picker.min.js:1:8432)

Your date picker uses createPointerEvent — not supported in WebKit/Safari. Chrome and Firefox implement it; Safari does not.

Fix options:

Polyfill (recommended): Add pointer-events-polyfill — fixes for real users and tests
Test-level workaround:

if (browserName === 'webkit') {
  await dateInput.dispatchEvent('click');
} else {
  await dateInput.click();
}

File upstream bug with your date picker library

BrowserStack session video: https://automate.browserstack.com/builds/BS-4821/sessions/webkit-session-003

Option 1 is best — the polyfill fixes it for real Safari users too, not just tests. Add it?

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase. Web-based AI can use the knowledge and frameworks, but won't have tool access.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Best

Claude Opus 4 Claude Sonnet 4 GPT-4.1 Gemini 2.5 Pro Grok 3 Kimi K2

Good

Claude Haiku 4.5 GPT-4.1 mini Gemini 2.5 Flash Grok 3 mini

Larger models produce more detailed, production-ready outputs.

Context Window

This skill's SKILL.md is typically 3–10 KB — fits in any modern context window.

8K Skill only

32K+ Skill + conversation

100K+ Skill + references + codebase

All current frontier models (Claude, GPT, Gemini) support 100K+ context. Use the full window for complex multi-service work.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Ready to try Playwright Pro — BrowserStack?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.

$skillfish add ~skills/playwright-pro-browserstack

← Browse all 169 skills