Search code examples
angulargoogle-chromegithubgithub-actionswebdriver-manager

Angular e2e tests failing in GitHub actions because of Chrome vs Chromedriver version mismatch


My open source Angular project had a successfull GitHub action to lint, build, test, and e2eeverything. However, since a short while, I'm seeing this:

[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)

To a degree this makes sense, because the GitHub image contains Chrome 84, and it seems that version 85 of chromedriver is being downloaded. But it also does not make sense, since Angular uses webdriver-manager which I presume should manage the right version of chromedriver? Why is it installing the wrong version? Or do I have things backwards?

My situation should be reproducible by forking the repository and setting up the same GitHub Actions, here's the relevant bits of workflow:

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

The angular.json target is simple too:

"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"
    }
  }
}

I tried updating all NPM devdependencies, but that didn't help.

I've also tried setting webdriverUpdate=false in the workflow (presuming that since the image from GitHub claims to have Chrome 84 and the associated chromedriver version), but that leads to:

[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.

Many "solutions" (for example this related SO thread) suggest updating chromedriver to a specific chrome version. But that's not what I want, because then whenever GitHub updates their image I'll be in the same problem again.

Also important to note: I'd love to have a CI-specific solution. Developers (i.e. me) will have latest Chrome on their machine usually, so running npm run e2e should still give me the right chromedriver for my machine.

Bottom line: how can I make an Angular project download the right version of chromedriver? That is: the one that belongs to the version of Chrome installed on the machine?


Solution

  • I remixed the other answer into my final solution. I want to share it separately because for others it might also be as simple as these few lines:

    - name: Update Chrome # See https://stackoverflow.com/q/63651059/419956
      run: |
        wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
        sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list'
        sudo apt-get update
        sudo apt-get --only-upgrade install google-chrome-stable
    

    Somehow the image from GitHub Actions I was using needed Google's apt sources as well (even though it had Google Chrome already pre-installed), after that the update + install trick started to work fine.


    August 2023 Note on Angular with Protractor:

    Protractor has reached "end of life" and it shows. The underlying webdriver-manager tries to download a driver for Chrome 114 (it would need to be updated to find 116's driver in the new location, but is EOL together with Protractor) while the GitHub Actions now by default come with Chrome 116. Kind of the reverse problem from the original question. See this example issue on my own repository.