browserstack

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

BrowserStack Integration

BrowserStack 集成

Run Playwright tests on BrowserStack's cloud grid for cross-browser and cross-device testing.

在BrowserStack的云网格上运行Playwright测试，实现跨浏览器和跨设备测试。

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.

必须设置以下环境变量：

```
BROWSERSTACK_USERNAME
```
— 你的BrowserStack用户名
```
BROWSERSTACK_ACCESS_KEY
```
— 你的访问密钥

如果未设置，请告知用户如何从browserstack.com/accounts/settings获取这些信息并停止操作。

Capabilities

功能配置

1. Configure for BrowserStack

1. 配置BrowserStack

/pw:browserstack setup

Steps:

Check current
```
playwright.config.ts
```
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: 'chrome@latest:Windows 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: 'firefox@latest:Windows 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: 'webkit@latest:OS 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@*'"

/pw:browserstack setup

步骤：

检查当前的
```
playwright.config.ts
```
文件
添加BrowserStack连接选项：

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: 'chrome@latest:Windows 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: 'firefox@latest:Windows 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: 'webkit@latest:OS 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
  ],
});

添加npm脚本：

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

2. Run Tests on BrowserStack

2. 在BrowserStack上运行测试

/pw:browserstack run

Steps:

Verify credentials are set

Run tests with BrowserStack projects:

bash

BROWSERSTACK_USERNAME=$BROWSERSTACK_USERNAME \
BROWSERSTACK_ACCESS_KEY=$BROWSERSTACK_ACCESS_KEY \
npx playwright test --project='chrome@*' --project='firefox@*'

Monitor execution
Report results per browser

/pw:browserstack run

步骤：

验证凭据已设置

使用BrowserStack项目运行测试：

bash

BROWSERSTACK_USERNAME=$BROWSERSTACK_USERNAME \
BROWSERSTACK_ACCESS_KEY=$BROWSERSTACK_ACCESS_KEY \
npx playwright test --project='chrome@*' --project='firefox@*'

监控测试执行
按浏览器报告测试结果

3. Get Build Results

3. 获取构建结果

/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

/pw:browserstack results

步骤：

调用
```
browserstack_get_builds
```
MCP工具
获取最新构建的测试会话
针对每个会话，获取以下信息：
- 状态（通过/失败）
- 浏览器和操作系统
- 测试时长
- 视频链接
- 日志链接
格式化为汇总表格

4. Check Available Browsers

4. 查看可用浏览器

/pw:browserstack browsers

Steps:

Call
```
browserstack_get_browsers
```
MCP tool
Filter for Playwright-compatible browsers
Display available browser/OS combinations

/pw:browserstack browsers

步骤：

调用
```
browserstack_get_browsers
```
MCP工具
筛选出兼容Playwright的浏览器
显示可用的浏览器/操作系统组合

5. Local Testing

5. 本地测试

/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

/pw:browserstack local

针对本地主机或防火墙后的预发布环境测试：

安装BrowserStack Local：
```
npm install -D browserstack-local
```
在配置中添加本地隧道
提供设置说明

MCP Tools Used

使用的MCP工具

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

工具	使用场景
`browserstack_get_plan`	检查账户限制
`browserstack_get_browsers`	列出可用浏览器
`browserstack_get_builds`	列出近期构建
`browserstack_get_sessions`	获取构建中的测试会话
`browserstack_get_session`	获取会话详情（视频、日志）
`browserstack_update_session`	标记测试通过/失败
`browserstack_get_logs`	获取文本/网络日志

Output

输出内容

Cross-browser test results table
Per-browser pass/fail status
Links to BrowserStack dashboard for video/screenshots
Any browser-specific failures highlighted

跨浏览器测试结果表格
各浏览器的通过/失败状态
指向BrowserStack控制台的视频/截图链接
突出显示任何浏览器特定的失败情况