4

I can not get the protractor debugger to work with node 8 async/await and Angular 6. Going back to node 7 in the old way with elementExplorer, browser.pause() and browser.debugger() is not an option. Also because in the future, the control flow is being removed from Selenium and I keep reading that it's a better debugging experience using node 8 async/await instead of control flow.

I am using angular 6.0.3, angular CLI 6.0.5, node 8.11.2 & chrome 71.0.3578.98. I reproduce the problem by generating a test app with CLI:

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

Generating this app with angular CLI automatically installs & configures protractor 5.3.2.

I have a simple test that runs ng e2e with succes:

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

To make it work with async/await I need to disable control flow so in protractor.conf.js I add SELENIUM_PROMISE_MANAGER: false and in ./e2e/tsconfig.e2e.json I change "target": "es5" into "target": "es2017"

In the e2e test I add async and await and add the command 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!');
  });
});

When I execute ng e2e it still runs with succes:

I run the debugger in a teminal session:

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

I open chrome inspector chrome://inspect/#devices in browser, find the current running target and click on inspect. Then I click on the button resume script execution (or F8), and the test should pause at the first line with the debugger keyword.

But it doesn't and Chrome automatically opens a new window with an error ERR_CONNECTION_REFUSED. The console of Chrome DevTools is empty. The terminal session gives:

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

So I read the suggestions and add getPageTimeout: 60000 to protractor.conf.js to . Then I get error:

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

Seems like the same error so I change protractor.conf.js line allScriptsTimeout: 11000 into 60000. Then I get error:

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)

Again, so I change protractor.conf.js line defaultTimeoutInterval: 30000 as a part of jasmineNodeOpts into 60000. Same error.

I also tried a higher value, 200000, but in result the wait is longer but error is the same.

Who knows a solution for this problem?

Herman Fransen
  • 1,938
  • 4
  • 21
  • 38
  • what IDE do you use to develop your code? – Sergey Pleshakov Dec 14 '18 at 20:39
  • I use VS Code to develop – Herman Fransen Dec 14 '18 at 20:43
  • It won't solve your problem, but I would suggest you to try debug in webstorm. Very robust when you use with async/awaits and intuitive. I had just solved today my last problem with it and can pass parameters to run configuration. You can find it here https://stackoverflow.com/questions/49945455/is-it-possible-to-specify-params-in-protractor-debug-configuration-webstorm/53782925#53782925 – Sergey Pleshakov Dec 14 '18 at 21:09
  • @SergeyPleshakov I switched two years ago from webstorm to vscode. I don't want to go back !! When I debug in vscode I get the same error message. I special reproduced my problem with a terminal session and no IDE to make sure the problem is not the IDE. – Herman Fransen Dec 15 '18 at 16:06
  • 1
    Running protractor from command line won’t automatically start your application to run tests against. Do you run ng start in another terminal window before executing protractor? Or alternatively you should be able to do node —inspect-brk ./node_modules/.bin/ng e2e. Don’t have a laptop to try it, but otherwise everything you do looks correct. – Yaroslav Admin Dec 16 '18 at 11:21
  • @YaroslavAdmin: thanks a lot, you gave me the answer to my problem. When I start `ng serve` in a separate terminal session it work. It makes sense that protractor won't start my application to run tests against. – Herman Fransen Dec 16 '18 at 15:27
  • @YaroslavAdmin: Could you create an official answer so that I can approve it and other people can benefit from this knowledge? – Herman Fransen Dec 16 '18 at 15:27

1 Answers1

2

Running Protractor directly won't automatically start an application to run tests against, this is part of the work ng e2e command does.

To fix the issue you can either start application in the separate terminal window using ng serve or probably you can run debugger against ng e2e command (which will start an application under the hood):

node --inspect-brk ./node_modules/.bin/ng e2e
Yaroslav Admin
  • 11,842
  • 6
  • 54
  • 69