如何在Travis CI中配置WebdriverIO测试？React项目CI执行失败排查

我之前也碰到过一模一样的情况——本地Chrome、Firefox跑测试顺得不行，一到Travis的无头Chrome就直接卡壳。这主要是因为Travis的容器环境和本地桌面环境有差异，你漏了几个关键配置项：

1. 补充虚拟显示环境与Chrome启动参数 #

Travis的无头环境没有真实显示器，得用xvfb（虚拟X服务器）模拟显示环境，同时给Chrome加上无头模式的强制参数。修改你的.travis.yml如下：

language: node_js
node_js:
  - '8.9'
dist: trusty
addons:
  chrome: stable
before_install:
  # 指定Chrome可执行文件路径，让测试框架能定位到它
  - export CHROME_BIN=google-chrome-stable
  # 设置虚拟显示端口
  - export DISPLAY=:99.0
  # 启动xvfb虚拟显示服务
  - sh -e /etc/init.d/xvfb start
before_script:
  # 启动无头Chrome，带上适配Travis的必要参数
  - google-chrome-stable --headless --disable-gpu --no-sandbox --remote-debugging-port=9222 &
script:
  # 执行你的测试命令，比如原本的npm test
  - npm test

这里几个核心参数的作用：

• --no-sandbox：Travis容器没有权限使用Chrome的沙箱机制，不加这个根本启动不了Chrome
• --disable-gpu：无头模式下不需要GPU加速，避免环境兼容性报错
• --remote-debugging-port：可选配置，方便你调试无头Chrome的运行状态

2. 调整测试框架的适配配置 #

如果你用的是Create React App，得修改package.json里的test脚本，确保它适配Travis的非交互环境：

"scripts": {
  "test": "react-scripts test --env=jsdom --watchAll=false"
}

--watchAll=false是告诉测试跑完就退出，不要进入监听模式——Travis需要的是一次性执行完的非交互测试。

如果是Jest配合Puppeteer的场景，还要在jest.config.js里补充启动配置：

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['./jest.setup.js']
}

在jest.setup.js里添加Puppeteer的无头启动参数：

const puppeteer = require('puppeteer');

beforeAll(async () => {
  global.browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-gpu']
  });
});

afterAll(async () => {
  await global.browser.close();
});

3. 确认依赖安装完整性 #

最后检查下package.json里的依赖，确保react-testing-library、jest这类测试相关包都在依赖列表里，Travis执行npm install时能正确安装这些依赖。

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