Angular CLI E2E Testing Wrong ChromeDriver

Question

I am using the angular CLI. I created it with:

ng new MyFirstApp

I then tried to run the end to end tests with:

ng e2e

I got the following error message:

E/launcher - session not created: This version of ChromeDriver only supports Chrome version 79
Driver info: chromedriver=79.0.3945.16

at Object.checkLegacyResponse (C:\TestProj\Angular\MyFirstApp\node_modules\selenium-webdriver\lib\error.js:546:15)
    at parseHttpResponse (C:\TestProj\Angular\MyFirstApp\node_modules\selenium-webdriver\lib\http.js:509:13)
    at C:\TestProj\Angular\MyFirstApp\node_modules\selenium-webdriver\lib\http.js:441:30
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
From: Task: WebDriver.createSession()
    at Function.createSession (C:\TestProj\Angular\MyFirstApp\node_modules\selenium-webdriver\lib\webdriver.js:769:24)
    at Function.createSession (C:\TestProj\Angular\MyFirstApp\node_modules\selenium-webdriver\chrome.js:761:15)
    at Direct.getNewDriver (C:\TestProj\Angular\MyFirstApp\node_modules\protractor\built\driverProviders\direct.js:77:33)
    at Runner.createBrowser (C:\TestProj\Angular\MyFirstApp\node_modules\protractor\built\runner.js:195:43)
    at C:\TestProj\Angular\MyFirstApp\node_modules\protractor\built\runner.js:339:29
    at _fulfilled (C:\TestProj\Angular\MyFirstApp\node_modules\q\q.js:834:54)
    at C:\TestProj\Angular\MyFirstApp\node_modules\q\q.js:863:30
    at Promise.promise.promiseDispatch (C:\TestProj\Angular\MyFirstApp\node_modules\q\q.js:796:13)
    at C:\TestProj\Angular\MyFirstApp\node_modules\q\q.js:556:49
    at runSingle (C:\TestProj\Angular\MyFirstApp\node_modules\q\q.js:137:13)

The problem seems to be that I am on a computer where the chrome version is restricted and is at chrome 78 while angular is using chrome 79. I need some way of telling angular to use the driver for chrome 78. I tried doing this with setting the version with webdriver-manager but that didn't work. This module isn't even in my packages.json anyway.

See what I tried:

npm install webdriver-manager -g
webdriver-manager update --version.chrome=78.0.3904.108
ng e2e --webdriver-update=false

How do I make this error go away? Thanks for any help you can provide.

Here is my versioning information:

• Operating System: Windows 10
• Node: 12.13.1
• NPM: 6.13.2
• Angular: 8.2.14
• Angular CLI: 8.3.21

Here is my packages.json:

{
  "name": "my-first-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.21",
    "@angular/cli": "~8.3.21",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Answer 1

I experienced this issue recently. I ended up using a specific version of Puppeteer since every version of it corresponds to a specific major version of Chromium.

Here's what you do:

1. In Puppeteer's API docs, find the version that is compatible with the version of Chromium you want to use. In your case, we're looking for the version that uses Chrome 78, so we see that we need Puppeteer v1.20.x.
2. Install that version of Puppeteer as a devDependency in package.json, for example execute npm install --save-dev [email protected]. This will install Puppeteer v1.20 and Chromium 78.
3. In your project's protractor.conf.js file, first add this import to the top:

   const puppeteer = require('puppeteer');
   

   then find these lines

   capabilities: {
     'browserName': 'chrome'
   },
   

   and replace them with

   capabilities: {
     browserName: 'chrome',
     chromeOptions: {
       args: ['--headless', '--disable-gpu', '--window-size=1024,768'],
       binary: puppeteer.executablePath(),
     },
   },
   

Your Protractor end-to-end tests now run with the version of Chromium you wish and will only use a newer Chromium version when you upgrade Puppeteer to a newer version.

Alternatively, you can add and set config.chromeDriver to the executable path of a specific Chrome version in protractor.conf.js.

Answer 2

I was able to get this to work with:

node ./node_modules/protractor/bin/webdriver-manager update --gecko=false --versions.chrome '78.0.3904.108'
ng e2e --webdriver-update=false

However, where do I put the first command above so I don't need to do it manually?

Answer 3

For the first command you can add script command in package.json file.

"script": { 
"firstCommand": "node ./node_modules/protractor/bin/webdriver-manager update --gecko=false --versions.chrome '78.0.3904.108'"
"start-e2e": "firstCommand && ng e2e ---webdriver-update=false"
}

On terminal run npm run start-e2e It will execute firstCommand first and than ng e2e ---webdriver-update=false

You may need to change ng e2e depending on script configuration in package.json file.