Cypress集成GitLab CI/CD时headless模式启动失败提示缺少Xvfb依赖

问题原因 #

Cypress 8.6.0属于v9之前的旧版本，在Linux环境下运行时即使是headless模式，也依赖虚拟显示服务器Xvfb来模拟图形渲染环境。你本地Windows系统自带完善的图形相关依赖库所以可以正常运行，而GitLab CI使用的纯净node:latest镜像未预装Cypress运行必需的系统级依赖，因此触发报错。另外你的启动命令中ng serve带的-o参数是本地调试用的自动打开浏览器开关，CI环境下无需配置也可能引发额外异常。

解决方案 #

推荐优先选用第一种方案，无需手动处理依赖适配问题：

• 方案1：更换CI镜像为Cypress官方预配置的基础镜像，所有系统依赖已预装完成。修改你的.gitlab-ci.yml配置如下：

test:
  # 适配Cypress 8.6.0的官方基础镜像，含所有运行依赖
  image: cypress/base:16
  stage: test
  script:
    - npm ci
    # 去掉-o参数，避免CI环境尝试打开浏览器
    - npm start &
    # 增加等待前端服务启动的逻辑，避免测试提前执行报错
    - npx wait-on http://localhost:4222
    - npm test

同时修改package.json中的start命令，移除-o参数：

"start": "ng serve --proxy-config proxy.conf.json --port 4222"

• 方案2：如果必须保留node:latest镜像，可在CI脚本中手动安装所需系统依赖，修改.gitlab-ci.yml如下：

test:
  image: node:latest
  stage: test
  script:
    # 预装Cypress所需系统依赖
    - apt-get update && apt-get install -y --no-install-recommends xvfb libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth fonts-liberation
    - npm ci
    - npm start &
    - npx wait-on http://localhost:4222
    - npm test

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