Angular CLI E2E 测试错误的 ChromeDriver

Question

我正在使用角度 CLI。我创建了它：

ng new MyFirstApp

然后我尝试运行端到端测试：

ng e2e

我收到以下错误消息：

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)

问题似乎是我在一台 chrome 版本受到限制并且在 chrome 78 而 angular 使用 chrome 79 的计算机上。我需要一些方法来告诉 angular 使用 chrome 78 的驱动程序。我试过做这与使用 webdriver-manager 设置版本但是没有用。无论如何，这个模块甚至不在我的 packages.json 中。

看看我的尝试：

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

如何消除此错误？感谢您提供的任何帮助。

这是我的版本信息：

• 操作系统：Windows 10
• 节点：12.13.1
• NPM：6.13.2
• 角度：8.2.14
• Angular CLI：8.3.21

这是我的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

我最近遇到了这个问题。我最终使用了特定版本的 Puppeteer，因为它的每个版本都对应于 Chromium 的特定主要版本。

这就是你要做的：

1. 在Puppeteer's API docs 中，找到与您要使用的Chromium 版本兼容的版本。就您而言，我们正在寻找使用 Chrome 78 的版本，因此我们发现我们需要 Puppeteer v1.20.x。
2. 将该版本的 Puppeteer 安装为 devDependency 中的 package.json，例如执行 npm install --save-dev puppeteer@1.20.x。这将安装 Puppeteer v1.20 和 Chromium 78。
3. 在项目的protractor.conf.js 文件中，首先将此导入添加到顶部：

   const puppeteer = require('puppeteer');
   

   然后找到这些行

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

   并将它们替换为

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

您的 Protractor 端到端测试现在使用您希望的 Chromium 版本运行，并且仅在您将 Puppeteer 升级到较新版本时才会使用较新的 Chromium 版本。

或者，您可以在protractor.conf.js 中添加和设置config.chromeDriver 到特定Chrome 版本的可执行路径。

Answer 2

我能够使用它：

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

但是，我将上面的第一个命令放在哪里，这样我就不需要手动执行它了？

Answer 3

对于第一个命令，您可以在 package.json 文件中添加脚本命令。

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

在终端运行 npm run start-e2e 它将先执行 firstCommand 然后再执行 ng e2e ---webdriver-update=false

您可能需要根据 package.json 文件中的脚本配置更改 ng e2e。