GitLab CI中运行含Chrome扩展的Selenium无头脚本问题求助

先明确xvfb的作用 #

xvfb是虚拟X服务器，能在无图形界面的服务器环境（比如GitLab CI的runner）中模拟桌面显示，完全适用于GitLab CI场景，之前失败大概率是配置环节出错。

可行实现步骤 #

1. 选择适配的CI镜像

选用预装Chrome、xvfb及测试框架依赖的Docker镜像，比如包含Node.js+Chrome+xvfb的镜像，避免手动安装依赖的麻烦。

2. 配置.gitlab-ci.yml

以下是完整配置示例（以Node.js+Selenium测试栈为例）：

stages:
  - test

chrome-extension-test:
  stage: test
  image: cypress/browsers:node18.12.0-chrome107
  before_script:
    - npm ci # 安装项目依赖
    # 启动xvfb虚拟显示，指定分辨率和颜色深度
    - Xvfb :99 -screen 0 1920x1080x24 > /dev/null 2>&1 &
    # 设置环境变量，让Chrome使用xvfb的虚拟显示
    - export DISPLAY=:99
  script:
    # 运行测试套件，注意在测试代码中配置Chrome加载扩展
    # 示例（Selenium ChromeOptions）：
    # ChromeOptions options = new ChromeOptions();
    # options.addExtensions(new File("./path/to/your-extension.crx"));
    - npm run test
  artifacts:
    paths:
      - test-reports/ # 保存测试报告，方便排查问题
    when: always

3. 测试代码中配置Chrome加载扩展

确保你的测试框架正确加载扩展：

• 如果用Selenium：通过ChromeOptions.addExtensions()指定打包好的.crx扩展文件路径
• 如果用Playwright：在创建浏览器上下文时，通过contextOptions.extensions传入扩展文件路径数组

4. 排查常见问题

• 扩展必须是打包后的.crx文件，不能直接用开发文件夹
• 确认xvfb启动成功：可以在before_script中加ps aux | grep Xvfb验证
• 检查Chrome启动日志：如果测试失败，查看Chrome的启动输出，确认扩展是否被正确加载
• 权限问题：确保CI镜像中的用户对扩展文件、xvfb进程有足够权限

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