如何在WebdriverIO v5配置文件中配置Chromium Driver并设置视口尺寸

嘿，咱们来搞定WebdriverIO v5里Chromium视口配置不生效的问题！下面我会一步步拆解正确的配置逻辑，帮你快速解决这个困扰。

1. 先确保Chromium Driver正确加载 #

首先得在你的配置文件（一般是wdio.conf.js）里启用chromedriver服务，这样WebdriverIO才能自动管理Chromium Driver的运行：

exports.config = {
  // 其他基础配置...
  services: ['chromedriver'], // 启用chromedriver服务，自动适配Chromium版本
  // 其他基础配置...
}

注意：如果你的Chromium不是系统默认安装的（比如用了自定义路径的二进制文件），需要在后续的capabilities里指定它的路径，避免WebdriverIO误调用默认Chrome。

2. 配置Chromium Capabilities与固定视口 #

接下来在capabilities数组里配置Chromium的具体参数，这里有两种可靠的方式设置固定宽高的视口，你可以任选一种（或者结合使用）：

方式一：通过Chrome Options启动参数强制设置 #

这是最稳定的方式，通过--window-size启动参数让Chromium一打开就使用指定的窗口尺寸（无缩放情况下，窗口尺寸等于视口尺寸）：

exports.config = {
  // 其他配置...
  capabilities: [
    {
      browserName: 'chrome', // 划重点：Chromium在WebdriverIO里的browserName依然是'chrome'
      'goog:chromeOptions': {
        // 自定义Chromium路径示例（按需取消注释）
        // binary: '/Applications/Chromium.app/Contents/MacOS/Chromium', // Mac系统
        // binary: 'C:\\Program Files\\Chromium\\chrome.exe', // Windows系统
        args: [
          '--window-size=1280,720', // 替换成你需要的宽高：宽度,高度（逗号分隔无空格）
          '--no-sandbox', // 解决Linux/CI环境下的权限报错
          '--disable-dev-shm-usage', // 避免容器环境下的资源不足问题
        ]
      }
    }
  ],
  // 其他配置...
}

方式二：直接设置WebdriverIO的windowSize属性 #

WebdriverIO本身提供了windowSize配置项，可以直接指定启动时的窗口尺寸：

exports.config = {
  // 其他配置...
  capabilities: [
    {
      browserName: 'chrome',
      windowSize: '1280x720', // 格式：宽度x高度（x分隔无空格）
      'goog:chromeOptions': {
        // 按需添加自定义binary路径或其他启动参数
      }
    }
  ],
  // 其他配置...
}

3. 排查配置不生效的常见坑 #

如果还是没生效，你可以检查这几点：

• 版本匹配：Chromium和Chromedriver的版本必须对应，WebdriverIO的chromedriver服务会自动下载对应Chrome版本的driver，但自定义Chromium需要手动确认版本一致性。
• 代码覆盖：测试代码里如果调用了browser.setWindowSize()等窗口操作，会覆盖配置文件里的设置。
• 参数格式错误：--window-size是逗号分隔，windowSize是x分隔，不要搞混格式。

4. 可选：验证视口是否生效 #

你可以在测试代码里加一行验证，确认视口尺寸符合预期：

describe('视口验证测试', () => {
  it('检查当前视口尺寸', async () => {
    const { width, height } = await browser.getWindowSize();
    console.log(`当前视口宽：${width}，高：${height}`);
    // 断言尺寸是否符合配置值
    await expect(width).toBe(1280);
    await expect(height).toBe(720);
  });
});

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