browserstack-cloud-testing

Cloud-based cross-browser and cross-device testing with BrowserStack including Automate, App Automate, Percy visual testing, Observability, and integration with Playwright, Selenium, and CI/CD pipelines.

Jump to install

Repository: PramodDutta/qaskills
Last source activity: April 14, 2026 at 07:59
Detected SKILL.md language: English
Stars: 201
Forks: 21

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/PramodDutta/qaskills --skill browserstack-cloud-testing

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

BrowserStack Cloud Testing Skill

You are an expert in BrowserStack cloud testing platform. When the user asks you to set up cross-browser testing, configure BrowserStack Automate with Playwright or Selenium, implement Percy visual testing, or optimize cloud test execution, follow these detailed instructions.

Core Principles

Capability-driven browser selection -- Define browser and device capabilities precisely. Use BrowserStack's capability generators to avoid configuration errors.

Parallel execution optimization -- Maximize parallel test sessions to reduce total execution time. Design tests for independence to enable safe parallelization.

Local testing for pre-deployment -- Use BrowserStack Local to test staging environments and localhost applications through a secure tunnel before deploying to production.

Visual regression with Percy -- Integrate Percy snapshots into existing Playwright or Selenium tests for automated visual comparison across browsers and viewports.

Observability for debugging -- Enable BrowserStack Observability to get AI-powered failure analysis, flaky test detection, and performance insights without additional instrumentation.

Network and geolocation simulation -- Use BrowserStack's network throttling and geolocation capabilities to test under realistic conditions for global users.

Cost-efficient test distribution -- Balance test coverage across browsers and devices based on analytics data. Test the top 80% of user configurations, not every possible combination.

Project Structure

browserstack-tests/ config/ browserstack.config.ts capabilities.ts local-config.ts tests/ e2e/ login.spec.ts checkout.spec.ts search.spec.ts visual/ homepage-visual.spec.ts product-page-visual.spec.ts mobile/ mobile-navigation.spec.ts mobile-checkout.spec.ts helpers/ browserstack-client.ts local-tunnel.ts capability-builder.ts percy/ percy-config.ts snapshot-helpers.ts scripts/ run-parallel.sh check-session-status.ts reports/ .gitkeep

Playwright + BrowserStack Configuration

// config/browserstack.config.ts import { defineConfig, devices } from '@playwright/test'; const BS_CAPS = { 'browserstack.username': process.env. || , : process.. || , : process.. || , : , : , : , : , }; ({ : , : , : , : , : [ [, { : }], [, { : }], ], : { : process.. || , : , : , }, : [ { : , : { : { : ({ ..., : , : , : , : , : , : (), }), }, }, }, { : , : { : { : ({ ..., : , : , : , : , : , : (), }), }, }, }, { : , : { : { : ({ ..., : , : , : , : , : , : (), }), }, }, }, { : , : { : { : ({ ..., : , : , : , : , : (), }), }, }, }, { : , : { : { : ({ ..., : , : , : , : , : (), }), }, }, }, ], }); (): { encoded = (.(caps)); ; } (): { timestamp = ().().()[]; ci = process.. ? : ; commit = process..?.(, ) || ; ; }

BrowserStack Cloud Testing Skill

Core Principles

Capability-driven browser selection -- Define browser and device capabilities precisely. Use BrowserStack's capability generators to avoid configuration errors.

Parallel execution optimization -- Maximize parallel test sessions to reduce total execution time. Design tests for independence to enable safe parallelization.

Local testing for pre-deployment -- Use BrowserStack Local to test staging environments and localhost applications through a secure tunnel before deploying to production.

Visual regression with Percy -- Integrate Percy snapshots into existing Playwright or Selenium tests for automated visual comparison across browsers and viewports.

Observability for debugging -- Enable BrowserStack Observability to get AI-powered failure analysis, flaky test detection, and performance insights without additional instrumentation.

Network and geolocation simulation -- Use BrowserStack's network throttling and geolocation capabilities to test under realistic conditions for global users.

Cost-efficient test distribution -- Balance test coverage across browsers and devices based on analytics data. Test the top 80% of user configurations, not every possible combination.

Project Structure

Playwright + BrowserStack Configuration

// helpers/browserstack-client.ts interface SessionInfo { name: string; duration: number; os: string; os_version: string; browser: string; browser_version: string; status: 'passed' | 'failed' | 'error'; reason: string; public_url: string; video_url: string; logs: string; } export class BrowserStackClient { private username: string; private accessKey: string; private baseUrl = 'https://api.browserstack.com'; constructor() { this.username = process.env.BROWSERSTACK_USERNAME || ''; this.accessKey = process.env.BROWSERSTACK_ACCESS_KEY || ''; } private get authHeader(): string { return `Basic ${Buffer.from(`${this.username}:${this.accessKey}`).toString('base64')}`; } async updateSessionStatus( sessionId: string, status: 'passed' | 'failed', reason?: string ): Promise<void> { await fetch(`${this.baseUrl}/automate/sessions/${sessionId}.json`, { method: 'PUT', headers: { 'Content-Type': 'application/json', Authorization: this.authHeader, }, body: JSON.stringify({ status, reason }), }); } async getSession(sessionId: string): Promise<SessionInfo> { const response = await fetch( `${this.baseUrl}/automate/sessions/${sessionId}.json`, { headers: { Authorization: this.authHeader } } ); const data = await response.json(); return data.automation_session; } async getBuilds(limit = 10): Promise<any[]> { const response = await fetch( `${this.baseUrl}/automate/builds.json?limit=${limit}`, { headers: { Authorization: this.authHeader } } ); const data = await response.json(); return data; } async getBuildSessions(buildId: string): Promise<any[]> { const response = await fetch( `${this.baseUrl}/automate/builds/${buildId}/sessions.json`, { headers: { Authorization: this.authHeader } } ); return response.json(); } async getAccountUsage(): Promise<{ parallel_sessions_running: number; parallel_sessions_max: number }> { const response = await fetch(`${this.baseUrl}/automate/plan.json`, { headers: { Authorization: this.authHeader }, }); return response.json(); } }

// helpers/capability-builder.ts interface BrowserCapability { browser: string; browserVersion: string; os: string; osVersion: string; deviceName?: string; buildName: string; sessionName: string; } export class CapabilityBuilder { private baseCapabilities: Record<string, string> = {}; constructor() { this.baseCapabilities = { 'browserstack.username': process.env.BROWSERSTACK_USERNAME || '', 'browserstack.accessKey': process.env.BROWSERSTACK_ACCESS_KEY || '', 'browserstack.debug': 'true', 'browserstack.networkLogs': 'true', 'browserstack.consoleLogs': 'info', }; } desktop(browser: string, version: string, os: string, osVersion: string): Record<string, string> { return { ...this.baseCapabilities, browser, browser_version: version, os, os_version: osVersion, resolution: '1920x1080', }; } mobile(device: string, osVersion: string, browser = 'chrome'): Record<string, string> { return { ...this.baseCapabilities, device, os_version: osVersion, browser, realMobile: 'true', }; } withLocal(identifier: string): this { this.baseCapabilities['browserstack.local'] = 'true'; this.baseCapabilities['browserstack.localIdentifier'] = identifier; return this; } withBuild(name: string): this { this.baseCapabilities['build'] = name; return this; } withGeolocation(country: string): this { this.baseCapabilities['browserstack.geoLocation'] = country; return this; } withNetworkProfile(profile: 'no-throttling' | '4g' | '3g' | '2g'): this { const profiles: Record<string, string> = { 'no-throttling': 'no-throttling', '4g': '4g-lte-advanced-good', '3g': '3g-umts-good', '2g': '2g-gprs-good', }; this.baseCapabilities['browserstack.networkProfile'] = profiles[profile]; return this; } } // Usage examples const builder = new CapabilityBuilder() .withBuild('PR-123-smoke') .withLocal('github-12345'); const chromeWindows = builder.desktop('chrome', 'latest', 'Windows', '11'); const safariMac = builder.desktop('safari', 'latest', 'OS X', 'Sonoma'); const iPhone15 = builder.mobile('iPhone 15', '17'); const pixel8 = builder.mobile('Google Pixel 8', '14.0');

name	BrowserStack Cloud Testing
description	Cloud-based cross-browser and cross-device testing with BrowserStack including Automate, App Automate, Percy visual testing, Observability, and integration with Playwright, Selenium, and CI/CD pipelines.
version	1.0.0
author	thetestingacademy
license	MIT
tags	["browserstack","cross-browser","cloud-testing","device-testing","percy","visual-testing","automate","app-automate","observability","parallel-testing"]
testingTypes	["e2e","visual","mobile","performance","accessibility"]
frameworks	["playwright","selenium","cypress","appium"]
languages	["typescript","javascript","java","python"]
domains	["web","mobile"]
agents	["claude-code","cursor","github-copilot","windsurf","codex","aider","continue","cline","zed","bolt","gemini-cli","amp"]

name	BrowserStack Cloud Testing
description	Cloud-based cross-browser and cross-device testing with BrowserStack including Automate, App Automate, Percy visual testing, Observability, and integration with Playwright, Selenium, and CI/CD pipelines.
version	1.0.0
author	thetestingacademy
license	MIT
tags	["browserstack","cross-browser","cloud-testing","device-testing","percy","visual-testing","automate","app-automate","observability","parallel-testing"]
testingTypes	["e2e","visual","mobile","performance","accessibility"]
frameworks	["playwright","selenium","cypress","appium"]
languages	["typescript","javascript","java","python"]
domains	["web","mobile"]
agents	["claude-code","cursor","github-copilot","windsurf","codex","aider","continue","cline","zed","bolt","gemini-cli","amp"]

browserstack-cloud-testing

Install options

Review the source files