由于 Chrome 与 Chromedriver 版本不匹配,Angular e2e 测试在 GitHub 操作中失败

标签 angular google-chrome github github-actions webdriver-manager

我的open source Angular projectlintbuildteste2e 一切都进行了成功的 GitHub 操作。然而,不久之后,我看到了这一点:

[00:20:01] I/launcher - Running 1 instances of WebDriver
[00:20:01] I/direct - Using ChromeDriver directly...
[00:20:07] E/launcher - session not created: This version of ChromeDriver only supports Chrome version 85
  (Driver info: chromedriver=85.0.4183.87 (cd6713ebf92fa1cacc0f1a598df280093af0c5d7-refs/branch-heads/4183@{#1689}),platform=Linux 5.3.0-1034-azure x86_64)
[00:20:07] E/launcher - SessionNotCreatedError: session not created: This version of ChromeDriver only supports Chrome version 85
  (Driver info: chromedriver=85.0.4183.87 (cd6713ebf92fa1cacc0f1a598df280093af0c5d7-refs/branch-heads/4183@{#1689}),platform=Linux 5.3.0-1034-azure x86_64)
    at Object.checkLegacyResponse (/home/runner/work/sample-angular-oauth2-oidc-with-auth-guards/sample-angular-oauth2-oidc-with-auth-guards/node_modules/selenium-webdriver/lib/error.js:546:15)
    at parseHttpResponse (/home/runner/work/sample-angular-oauth2-oidc-with-auth-guards/sample-angular-oauth2-oidc-with-auth-guards/node_modules/selenium-webdriver/lib/http.js:509:13)
    at /home/runner/work/sample-angular-oauth2-oidc-with-auth-guards/sample-angular-oauth2-oidc-with-auth-guards/node_modules/selenium-webdriver/lib/http.js:441:30
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

在某种程度上,这是有道理的,因为 GitHub 镜像包含 Chrome 84,并且似乎正在下载 85 版本的 chromedriver。但这也没有意义,因为 Angular 使用 webdriver-manager,我认为它应该管理正确版本的 chromedriver?为什么会安装错误的版本?还是我把事情搞反了?

我的情况应该可以通过 fork 存储库并设置相同的 GitHub Actions 来重现,以下是工作流程的相关部分:

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2

    # Based on: https://docs.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows#example-using-the-cache-action
    - name: Cache node modules
      uses: actions/cache@v2
      env:
        cache-name: cache-node-modules
      with:
        # npm cache files are stored in `~/.npm` on Linux/macOS
        path: ~/.npm
        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-build-${{ env.cache-name }}-
          ${{ runner.os }}-build-
          ${{ runner.os }}-

    - name: Install dependencies
      run: npm ci

    - name: Linting
      run: npm run lint

    - name: Build
      run: npm run build -- --prod

    - name: Tests
      run: npm run e2e -- --configuration=ci

angular.json 目标也很简单:

"e2e": {
  "builder": "@angular-devkit/build-angular:protractor",
  "options": {
    "protractorConfig": "e2e/protractor.conf.js",
    "devServerTarget": "sample-auth-guards:serve"
  },
  "configurations": {
    "production": {
      "devServerTarget": "sample-auth-guards:serve:production"
    },
    "ci": {
      "devServerTarget": "sample-auth-guards:serve:production",
      "protractorConfig": "e2e/protractor-ci.conf.js"
    }
  }
}

我尝试更新所有 NPM 开发依赖项,但这没有帮助。

我还尝试在工作流程中设置 webdriverUpdate=false(假设来自 GitHub 的图像声称拥有 Chrome 84关联的 chromedriver 版本),但是这导致:

[16:43:43] I/launcher - Running 1 instances of WebDriver
[16:43:44] I/direct - Using ChromeDriver directly...
[16:43:44] E/direct - Error code: 135
[16:43:44] E/direct - Error message: Could not find update-config.json. Run 'webdriver-manager update' to download binaries.
[16:43:44] E/direct - Error: Could not find update-config.json. Run 'webdriver-manager update' to download binaries.

许多“解决方案”(例如 this related SO thread )建议将 chromedriver 更新到特定 chrome 版本。但这不是我想要的,因为每当 GitHub 更新他们的图像时,我都会再次遇到同样的问题。

还需要注意的是:我希望有一个特定于 CI 的解决方案。开发人员(即我)通常会在他们的计算机上安装最新的 Chrome,因此运行 npm run e2e 仍应为我的计算机提供正确的 chromedriver。

底线:如何让 Angular 项目下载正确版本的 chromedriver? 即:属于计算机上安装的 Chrome 版本的版本?

最佳答案

问题在于 Protractor 而不是 github 操作。看来这个问题发生很多。基本上, Protractor 会在 chrome 推出稳定版本之前将 chrome 驱动程序更新到最新版本,因此差异会导致此设置中断。正如您已经提到的,当前 Protractor 下载的是 85 版本,但 chrome 版本是 84。

来源: https://github.com/angular/protractor/issues/5460

fork 你的代码并找到两个解决方案

解决方案 1:将 google chrome 更新到最新的内部工作流程

  - run: sudo apt-get install google-chrome-stable

这将安装当前最新的稳定版本的 google chrome,即 85。似乎已经发布,因此您可以正常运行所有内容。为了将来的引用,这只有效,因为 chrome 最终发布了 85 作为稳定版本,如果没有,我们将遇到相同的问题,并且我们将不得不执行与解决方案 2 中相同的版本提取设置。

管道显示其有效: https://github.com/meroware/sample-angular-oauth2-oidc-with-auth-guards/actions/runs/230800136

如果您想要进行实际修复,而不必担心版本控制奇偶性,那么您可以执行以下操作。

解决方案 2:在 docker 内部运行以确保我们的构建是干净的

管道显示其有效: https://github.com/meroware/sample-angular-oauth2-oidc-with-auth-guards/runs/1046824367

工作流程代码网址: https://github.com/meroware/sample-angular-oauth2-oidc-with-auth-guards/blob/master/.github/workflows/ci-workflow.yml

这是更改的快速片段

     container:
        image: ubuntu:trusty
     steps:
     - uses: actions/checkout@v2
     - name: Use Node.js
       uses: actions/setup-node@v1
       with:
         node-version: '14.x'
     # Based on: https://docs.github.com/en/actions/configuring-and-managing-workflows/caching-dependencies-to-speed-up-workflows#example-using-the-cache-action
     - name: Cache node modules
       uses: actions/cache@v2
       env:
         cache-name: cache-node-modules
       with:
         # npm cache files are stored in `~/.npm` on Linux/macOS
         path: ~/.npm
         key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
         restore-keys: |
           ${{ runner.os }}-build-${{ env.cache-name }}-
           ${{ runner.os }}-build-
           ${{ runner.os }}-
     - name: Setup chrome driver environment
       run: |
         apt-get update # Remove if running outside container
         apt-get clean # Remove if running outside container
         apt-get install -y wget # Remove if running outside container
         wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - # Remove if running outside container
         echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list # Remove if running outside container
         apt-get -y update # Remove if running outside container
         apt-get install -y google-chrome-stable # If not running in docker then run this line with sudo
         VERSION=`google-chrome --version | egrep -o '[0-9]+.[0-9]+' | head -1` # Get chrome version that we just installed
         npm i webdriver-manager@latest -D # Install webdriver manager locally
         npm i chromedriver --chromedriver_version=$VERSION -D # Install chrome driver to the version that we got from google chrome installation above

关于由于 Chrome 与 Chromedriver 版本不匹配,Angular e2e 测试在 GitHub 操作中失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63651059/

相关文章:

github - 为什么有些提交显示为已提交 "on GitHub"?

angular - 订阅 Angular 中父组件的变化

node.js - 在带 Angular Electron 内部使用keytar

javascript - 如何异步调用方法并等待 API 调用完成

javascript - Chart.js Canvas 元素在 Chrome 60 中具有负高度和宽度

git - 手动设置 'forked from' 到 GitHub 项目

javascript - 在 Angular 中注册事件的最佳方式

jQuery、$.load 在 webkit 和 opera 中不起作用?

css - Chrome 不居中文本

git - 如何在不使用重置的情况下将 Git 存储库及其 Github 远程恢复到之前的提交?