如何将Saucelabs与Playwright+TypeScript集成及配置config.ts

完整配置示例 #

以下是在config.ts中配置SauceLabs远程执行的标准结构，和你熟悉的Java+Selenium配置逻辑对应：

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30 * 1000,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',

  projects: [
    // Chrome 测试项目
    {
      name: 'saucelabs-chrome',
      use: {
        // 对应Java中RemoteWebDriver的服务地址
        remoteServer: `https://${process.env.SAUCE_USERNAME}:${process.env.SAUCE_ACCESS_KEY}@ondemand.saucelabs.com:443/wd/hub`,
        // 对应Java中的DesiredCapabilities
        capabilities: {
          browserName: 'chrome',
          browserVersion: 'latest',
          // SauceLabs专属配置段，和Java中设置`sauce:xxx`类型的capability一致
          'sauce:options': {
            username: process.env.SAUCE_USERNAME,
            accessKey: process.env.SAUCE_ACCESS_KEY,
            build: 'playwright-sauce-demo-build-1',
            name: 'chrome-functional-tests',
            tags: ['playwright', 'saucelabs', 'regression'],
            screenResolution: '1920x1080'
          }
        },
        // 禁用Playwright本地浏览器通道，强制使用远程SauceLabs浏览器
        channel: undefined,
      },
    },
    // Firefox 测试项目
    {
      name: 'saucelabs-firefox',
      use: {
        remoteServer: `https://${process.env.SAUCE_USERNAME}:${process.env.SAUCE_ACCESS_KEY}@ondemand.saucelabs.com:443/wd/hub`,
        capabilities: {
          browserName: 'firefox',
          browserVersion: 'latest',
          'sauce:options': {
            username: process.env.SAUCE_USERNAME,
            accessKey: process.env.SAUCE_ACCESS_KEY,
            build: 'playwright-sauce-demo-build-1',
            name: 'firefox-functional-tests',
            tags: ['playwright', 'saucelabs', 'regression']
          }
        },
        channel: undefined,
      },
    }
  ],
});

关键配置对应说明 #

• remoteServer：等价于Java中初始化RemoteWebDriver时传入的SauceLabs远程URL，直接通过环境变量注入用户名和密钥，避免硬编码。
• capabilities：对应Java里的DesiredCapabilities或浏览器专属Options类，其中sauce:options是SauceLabs的专属配置区域，所有平台、构建、标签等自定义设置都在这里定义。
• 环境变量：建议通过SAUCE_USERNAME和SAUCE_ACCESS_KEY环境变量存储敏感信息，本地可以用.env文件配合dotenv包加载，CI环境直接配置系统变量即可。

额外注意事项 #

• 测试代码无需修改，Playwright会自动通过配置的远程服务器连接SauceLabs执行测试，和本地运行逻辑完全一致。
• 如果需要配置移动端设备（比如SauceLabs的模拟器/真机），只需在capabilities中添加对应的设备信息，例如：

  capabilities: {
    browserName: 'safari',
    platformName: 'iOS',
    platformVersion: '16.0',
    deviceName: 'iPhone 14',
    'sauce:options': { /* ... */ }
  }
  

• 若使用SauceLabs官方提供的sauce-playwright工具包，配置会更简化，但上述示例是通用的标准Playwright对接方式，和Selenium的远程执行逻辑对齐，更符合你的现有经验。

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