BrowserStack Playwright 集成指南：云端跨浏览器自动化测试配置与运行
browserstack by alirezarezvani/claude-skills
安装命令
npx skills add https://github.com/alirezarezvani/claude-skills --skill browserstack🇨🇳中文介绍
BrowserStack 集成
在 BrowserStack 的云端网格上运行 Playwright 测试，以实现跨浏览器和跨设备测试。
前提条件
必须设置以下环境变量：
BROWSERSTACK_USERNAME— 您的 BrowserStack 用户名BROWSERSTACK_ACCESS_KEY— 您的访问密钥
如果未设置，请告知用户如何从 browserstack.com/accounts/settings 获取它们并停止。
功能
1. 为 BrowserStack 配置
/pw:browserstack setup
步骤：
- 检查当前的
playwright.config.ts - 添加 BrowserStack 连接选项：
// 添加到 playwright.config.ts
import { defineConfig } from '@playwright/test';
const isBS = !!process.env.BROWSERSTACK_USERNAME;
export default defineConfig({
// ... 现有配置
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,
}))}`,
},
},
},
] : [
// ... 本地项目回退配置
],
});
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
