如何在Windows的GitLab Runner中禁用无头模式运行WebdriverIO测试

问题背景 #

我有一套WebdriverIO测试套件，本地运行时为有头模式，但放入GitLab流水线后自动变为无头模式。尝试过set WEBDRIVER_HEADLESS=false和在Chrome选项中设置headless:false都未成功，不想为了这个需求迁移到Playwright，求可行的解决方式。

解决步骤 #

1. 修正环境变量设置方式 #

GitLab Runner大多使用Linux容器环境，Windows的set命令无效，需使用Linux兼容的环境变量配置：

• 在.gitlab-ci.yml中直接定义变量：

  test-with-head:
    stage: test
    variables:
      WEBDRIVER_HEADLESS: "false"
    script:
      - npm install
      - npm run test
  

• 或在执行测试前临时导出变量：

  export WEBDRIVER_HEADLESS=false && npm run test
  

2. 让WDIO配置动态读取环境变量 #

不要在配置文件中硬编码无头模式参数，而是根据环境变量动态生成Chrome启动参数：

// wdio.conf.js
exports.config = {
  // 其他配置项...
  capabilities: [{
    browserName: 'chrome',
    'goog:chromeOptions': {
      // 根据环境变量决定是否添加无头参数
      args: process.env.WEBDRIVER_HEADLESS === 'true' ? ['--headless=new'] : []
    }
  }]
}

注意：Chrome 112+推荐使用--headless=new参数，旧版本可改用--headless=chrome或--headless，避免参数不兼容导致失效。

3. 排查Runner默认配置覆盖问题 #

部分GitLab Runner镜像可能默认注入了WEBDRIVER_HEADLESS=true或Chrome无头参数，需在CI配置中明确覆盖该变量，确保自定义设置优先级更高。

4. 验证环境变量是否生效 #

可在测试脚本前添加打印命令，确认变量值是否正确传递：

echo "当前WEBDRIVER_HEADLESS值: $WEBDRIVER_HEADLESS"

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