如何在Sauce Labs及BrowserStack上实现Playwright移动端浏览器测试集成？

• 配置认证：将你的Sauce Labs用户名和访问密钥设置为环境变量SAUCE_USERNAME和SAUCE_ACCESS_KEY，也可直接在Playwright配置文件中指定（不推荐生产环境）。
• 编写Playwright配置：在playwright.config.js中添加云端连接配置，指定移动端webkit浏览器参数：

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    connectOptions: {
      wsEndpoint: `wss://${process.env.SAUCE_USERNAME}:${process.env.SAUCE_ACCESS_KEY}@ondemand.us-west-1.saucelabs.com:443/ws/hub`,
    },
    browserName: 'webkit',
    viewport: { width: 375, height: 667 }, // 匹配iPhone SE屏幕尺寸
    deviceScaleFactor: 2,
    hasTouch: true, // 开启触摸事件模拟
  },
});

• 执行测试：运行npx playwright test，测试会自动连接Sauce Labs云端移动端浏览器执行。

• 配置认证：设置环境变量BROWSERSTACK_USERNAME和BROWSERSTACK_ACCESS_KEY。
• 配置Playwright：在配置文件中指定BrowserStack的CDP端点，同时定义目标移动端设备参数：

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    connectOptions: {
      wsEndpoint: `wss://cdp.browserstack.com/playwright?caps=${encodeURIComponent(JSON.stringify({
        'browser': 'playwright-webkit',
        'os_version': '15',
        'device': 'iPhone 13',
        'browserstack.user': process.env.BROWSERSTACK_USERNAME,
        'browserstack.key': process.env.BROWSERSTACK_ACCESS_KEY,
        'browserstack.debug': 'true' // 开启调试日志
      }))}`,
    },
  },
});

• 执行测试：运行npx playwright test，测试将在BrowserStack指定的移动端设备上启动。

• Playwright内置移动端模拟：无需依赖云平台，直接用Playwright自带的设备模拟能力，完全满足UI组件的UI和功能测试需求。配置示例：

const { defineConfig, devices } = require('@playwright/test');

module.exports = defineConfig({
  projects: [
    {
      name: 'iPhone 13',
      use: { ...devices['iPhone 13'] },
    },
    {
      name: 'Pixel 5',
      use: { ...devices['Pixel 5'] },
    },
  ],
});

• 本地真机调试：将iOS/Android设备通过USB连接到本地，开启设备的Web Inspector（iOS需开启开发者模式，Android需开启USB调试），然后通过Playwright连接设备的WS端点进行测试。
• 其他云测试平台：比如LambdaTest，其Playwright集成流程更简化，只需替换WS端点和认证信息即可，支持更多移动端设备型号。

内容的提问来源于stack exchange，提问作者Sandeep