Angular项目GitHub Actions中e2e测试因Chrome与Chromedriver版本不匹配失败

我完全懂你的痛点——硬编码ChromeDriver版本号太折腾，GitHub的runner镜像一更新就得改配置，根本不是长久之计。这里有个只针对CI环境的优雅方案，既能让ChromeDriver自动匹配当前runner的Chrome版本，又完全不影响本地开发的e2e测试流程：

具体步骤来啦 #

1. 在GitHub Actions工作流里加个前置步骤，安装自动匹配版本的ChromeDriver #

我们可以用npm的chromedriver包，它会自动检测系统里的Chrome版本，然后下载完全对应的驱动，直接替代Angular自带webdriver-manager的默认行为。打开你的.github/workflows/xxx.yml，在执行e2e测试的步骤前加上这段：

- name: Install ChromeDriver matching runner's Chrome version
  run: |
    npm install --save-dev chromedriver
    npx chromedriver --version # 这一步可以验证版本是否和Chrome匹配，方便排查问题

2. 修改Protractor配置，让CI环境单独用新安装的驱动 #

打开你的protractor.conf.js（或者protractor.conf.ts），加个环境变量判断——只有在CI环境下才指定ChromeDriver的路径，本地开发完全不受影响：

const { SpecReporter } = require('jasmine-spec-reporter');
// 引入刚安装的chromedriver的路径
const chromeDriverPath = require('chromedriver').path;

exports.config = {
  allScriptsTimeout: 11000,
  specs: ['./src/**/*.e2e-spec.ts'],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: ['--headless', '--no-sandbox', '--disable-gpu'] // CI环境必须的无头模式参数，别忘加
    },
    // 只有CI环境才启用这个配置，本地还是用默认逻辑
    ...(process.env.CI ? { chromeDriver: chromeDriverPath } : {})
  },
  // 其他原有配置...
  onPrepare() {
    // 原有onPrepare代码...
    // 在CI环境下关掉Angular自带的webdriver-manager，避免冲突
    if (process.env.CI) {
      require('protractor').webdriverManager.stopManager();
    }
  }
};

3. 不用额外设置CI环境变量——GitHub Actions自带！ #

GitHub Actions会自动给所有runner设置CI=true的环境变量，所以上面的process.env.CI判断会自动生效，不用你手动配置。

为啥这个方案靠谱？ #

• chromedriver包会自动嗅探系统Chrome版本，下载完全匹配的驱动，不管GitHub怎么更新runner镜像，都能自动适配，一劳永逸
• 通过环境变量做隔离，本地开发时还是用Angular默认的webdriver-manager，完全不会影响你平时的e2e测试流程
• 全程不用硬编码任何版本号，彻底摆脱版本不兼容的烦恼

小提醒 #

• 如果你的项目是Angular 12+，用的是@angular-devkit/build-angular内置的webdriver管理，这个方案依然好使——因为我们通过Protractor配置直接指定了ChromeDriver路径，会覆盖默认的驱动查找逻辑
• 推荐在workflow里临时安装chromedriver，而不是加到项目的devDependencies里，这样不会影响本地的依赖环境

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