angular - 使用节点 8 异步/等待和 Angular 6 调试 Protractor 时出错

Question

我无法让 Protractor 调试器与节点 8 async/await 和 Angular 6 一起工作。以旧方式使用 elementExplorer 返回节点 7| , browser.pause()和 browser.debugger()不是一个选项。也因为将来，control flow正在从 Selenium 中删除，我一直在阅读，使用节点 8 异步/等待而不是 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 生成此应用会自动安装和配置 Protractor 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 时它仍然运行成功:

我在终端 session 中运行调试器:

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 的控制台是空的。终端 session 给出:

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，但结果等待时间更长但错误是一样的。

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

Answer 1

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

要解决此问题，您可以使用 ng serve 在单独的终端窗口中启动应用程序，或者您可以针对 ng e2e 命令运行调试器(这将启动应用程序引擎盖下):

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