CODEWITHSUNDEEP
angularjasmineprotractor
Herman Fransen
Herman Fransen

Reputation: 2210

Error debugging protractor with node 8 async/await and angular 6

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?

Upvotes: 4

Views: 4257

Answers (1)

Yaroslav Admin
Yaroslav Admin

Reputation: 14535

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

Upvotes: 2

Related Questions