使用节点 8 async/await 和 angular 6 调试量角器时出错答案

【问题标题】：Error debugging protractor with node 8 async/await and angular 6使用节点 8 async/await 和 angular 6 调试量角器时出错
【发布时间】：2019-05-16 02:50:53
【问题描述】：

我无法让量角器调试器与节点 8 async/await 和 Angular 6 一起工作。使用 elementExplorer、browser.pause() 和 browser.debugger() 以旧方式返回节点 7 不是一种选择。也因为在未来，control flow 将从 Selenium 中删除，我一直在读到，使用节点 8 async/await 而不是control flow，这是一种更好的调试体验。

我正在使用 Angular 6.0.3、Angular CLI 6.0.5、节点 8.11.2 和 chrome 71.0.3578.98。我通过使用 CLI 生成测试应用程序来重现该问题：

ng new stack-overflow-debugging-protractor --style=scss --routing

使用 Angular CLI 生成此应用会自动安装和配置量角器 5.3.2。

我有一个简单的测试，成功运行 ng e2e：

describe('workspace-project App', () => {
  it('should display welcome message', () => {
    browser.get('/');
    expect(element(by.css('app-root h1')).getText()).toEqual('Welcome to app!');
  });
});

I follow this document to set up my debugging environment

为了使其与 async/await 一起工作，我需要禁用 control flow，因此在 protractor.conf.js 中添加 SELENIUM_PROMISE_MANAGER: false 并在 ./e2e/tsconfig.e2e.json 中将 "target": "es5" 更改为 "target": "es2017"

在 e2e 测试中，我添加 async 和 await 并添加命令 debugger

describe('workspace-project App', () => {
  it('should display welcome message', async () => {
    await browser.get('/');
    debugger;
    await expect(element(by.css('app-root h1')).getText()).toEqual('Welcome to app!');
  });
});

当我执行ng e2e 时，它仍然可以成功运行：

我在终端会话中运行调试器：

node --inspect-brk ./node_modules/protractor/bin/protractor ./e2e/protractor.conf.js

我在浏览器中打开 chrome 检查器chrome://inspect/#devices，找到当前运行的目标并点击inspect。然后我点击按钮resume script execution（或F8），测试应该在第一行以debugger 关键字暂停。

但它不会，Chrome 会自动打开一个新窗口，并显示错误 ERR_CONNECTION_REFUSED。 Chrome DevTools 的控制台是空的。终端会话给出：

E/protractor - Could not find Angular on page http://localhost:4200/ : retries looking for angular exceeded
Failed: Angular could not be found on the page http://localhost:4200/. If this is not an Angular application, you may need to turn off waiting for Angular.
Please see https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular-on-page-load

所以我阅读了建议并将 getPageTimeout: 60000 添加到 protractor.conf.js 到 .然后我得到错误：

Failed: Error while running testForAngular: script timeout: result was not received in 11 seconds

似乎同样的错误，所以我将protractor.conf.js 行allScriptsTimeout: 11000 更改为60000。然后我得到错误：

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
at ontimeout (timers.js:498:11)
at tryOnTimeout (timers.js:323:5)
(node:11716) UnhandledPromiseRejectionWarning: Error: 'fail' was used when there was no current spec, this could be because an asynchronous test timed out
(node:11716) UnhandledPromiseRejectionWarning: Unhandled promise rejection. 
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which wasnot handled with .catch(). (rejection id: 1)

再次，所以我将protractor.conf.js 行defaultTimeoutInterval: 30000 作为jasmineNodeOpts 的一部分更改为60000。同样的错误。

我也尝试了更高的值，200000，但结果等待时间更长但错误相同。

谁知道这个问题的解决方案？

【问题讨论】：

你用什么 IDE 来开发你的代码？
我用VS Code开发
它不会解决你的问题，但我建议你尝试在 webstorm 中调试。当您使用 async/await 和直观时非常强大。我今天刚刚解决了我的最后一个问题，可以传递参数来运行配置。你可以在这里找到它stackoverflow.com/questions/49945455/…
@SergeyPleshakov 我两年前从 webstorm 切换到 vscode。我不想回去！！当我在 vscode 中调试时，我会收到相同的错误消息。我特别用终端会话和没有 IDE 重现了我的问题，以确保问题不是 IDE。
从命令行运行量角器不会自动启动您的应用程序来运行测试。在执行量角器之前，您是否在另一个终端窗口中运行 ng start？或者，您应该能够执行 node —inspect-brk ./node_modules/.bin/ng e2e。没有笔记本电脑可以尝试，否则您所做的一切看起来都是正确的。

标签： angular jasmine protractor

【解决方案1】：

直接运行 Protractor 不会自动启动应用程序来运行测试，这是 ng e2e 命令所做工作的一部分。

要解决此问题，您可以使用ng serve 在单独的终端窗口中启动应用程序，或者您可以针对ng e2e 命令运行调试器（这将在后台启动应用程序）：

node --inspect-brk ./node_modules/.bin/ng e2e

【讨论】：