首页/测试 & QA/browserstack
B

browserstack

by @alirezarezvaniv1.0.0
4.4(23)

在BrowserStack云网格上执行Playwright跨浏览器和设备测试,支持并行执行和实时调试

cross-browser-testingcloud-testingtest-automationplaywrightquality-assuranceGitHub
安装方式
npx skills add alirezarezvani/claude-skills --skill browserstack
compare_arrows

Before / After 效果对比

1
使用前

本地安装多个浏览器、手动切换设备测试、记录截图和日志,完整测试需要2-3天

使用后

BrowserStack云平台并行测试300+浏览器设备组合,2小时完成全面兼容性验证

description SKILL.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 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

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

Weekly Installs211Repositoryalirezarezvani/…e-skillsGitHub Stars6.0KFirst SeenMar 5, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykWarnInstalled oncodex201gemini-cli199kimi-cli198github-copilot198amp198cline198

forum用户评价 (0)

发表评价

效果
易用性
文档
兼容性

暂无评价,来写第一条吧

统计数据

安装量761
评分4.4 / 5.0
版本1.0.0
更新日期2026年3月21日
对比案例1 组

用户评分

4.4(23)
5
0%
4
0%
3
0%
2
0%
1
0%

为此 Skill 评分

0.0

兼容平台

🔧Claude Code

时间线

创建2026年3月21日
最后更新2026年3月21日