‹ 首页

browserstack

@adriannoes · 收录于 1 周前

Run tests on BrowserStack. Use when user mentions "browserstack", "cross-browser", "cloud testing", "browser matrix", "test on safari", "test on firefox", or "browser compatibility".

场景跨浏览器测试兼容性检查上线前验证

适合你，如果需要在多种浏览器和设备上验证网页表现

/ 下载安装
browserstack.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add adriannoes/awesome-vibe-coding/browserstack
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- adriannoes/awesome-vibe-coding/browserstack
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify adriannoes/awesome-vibe-coding/browserstack
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
44GitHub stars
~762上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · e4ed3a9

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:

  1. Check current playwright.config.ts
  2. 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
  ],
});
  1. 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:
  4. Status (pass/fail)
  5. Browser and OS
  6. Duration
  7. Video URL
  8. Log URLs
  9. 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 | | 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
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…