Test run fails with :"Failed: Timed out waiting for asynchronous Angular tasks to finish after..."

Bug report

• Node Version: v8.9.1
• Protractor Version: 5.2.0
• Angular Version: 5.0.1
• Browser(s): Chrome 62.0.3202.89
• Operating System and Version Mac OS High Sierra 10.13.1, Windows 10
• Your protractor configuration file

require('ts-node/register');
exports.config = {
  suites: {
    login: [
      'test/e2e/prime.e2e.ts'
    ]
  },
  framework: 'jasmine2',
  allScriptsTimeout: 110000,
  getPageTimeout: 110000,
  jasmineNodeOpts: {
    showTiming: true,
    showColors: true,
    isVerbose: false,
    includeStackTrace: false,
    defaultTimeoutInterval: 600000
  },
  directConnect: true,
  multiCapabilities: [
    {
      'browserName': 'chrome',
      shardTestFiles: false,
      maxInstances: 1
    }
  ]
};

• A relevant example test

import { browser, by, element, ExpectedConditions as EC } from 'protractor';
describe('Test to show Protractor vs Angular sync issue', () => {
    it('Prime NG growl', () => {
        browser.get('https://www.primefaces.org/primeng/#/growl');
        expect(element(by.css('.ui-button[label="Warn"]')).isPresent()).toBe(true);
        element(by.css('.ui-button[label="Warn"]')).click();
        element(by.css('.ui-button[label="Success"]')).click();
    });
});

• Output from running the test Failed: Timed out waiting for asynchronous Angular tasks to finish after 110 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: https://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular While waiting for element with locator - Locator: By(css selector, .ui-button[label="Success"])

• Steps to reproduce the bug Just run above test case.

• The URL you are running your tests against (if relevant) https://www.primefaces.org/primeng/#/growl

Hi protractor team,

Recently we have faced with blocking issue, synchronisation between Protractor and Angular fails. Please use above test example to reproduce the issue. If modify the test case and put browser.waitForAngularEnabled(false); after the first click - test passed success. So it looks like Protractor becomes waiting for Angular to complete its tasks infinitely.

Please investigate the issue and help to fix it as it’s a really blocker for our team now.

[qiyigg]

As mentioned above, this was caused by repeated settimeout/setInterval in the test app. Just sync with @heathkit His change probably can be checked in at the end of this month, which should be able to let Protractor conditionally ignore some asynchronous tasks.

For now, the recommend way is to let the repeated settimeout/setInterval run outside angular, so that it won’t affect the stability of angular.

If you cannot do so, e.g. the repeated settimeout/setInterval comes from a third party library, you have to disable sync with angular in your test: browser.waitForAngularEnabled(false)

[heathkit]

We do have a design for this, but I’m no longer working on Protractor and haven’t had time to put it together.

Anyone who wants to could make a Protractor plugin using the new Testability API that could selectively ignore tasks. The rough outline would be:

1. Create a Protractor plugin that implements waitForPromise
2. In your new waitForPromise, call Testability.whenStable() and pass it an update callback (see https://github.com/angular/angular/blob/16c03c0f38491444942fb165f1e8e2c7651d1494/packages/core/src/testability/testability.ts#L191). This callback will be called every time an async task starts or finishes.
3. In your update callback, look at the list of tasks and filter out the ones you don’t care about. If the update callback returns true, whenStable() will return.

The current implementation of Testability does depend on Zone.js. However, I think you can count on Testability.whenStable() to continue to have knowledge of async tasks, regardless of what, if anything, happens with Zone.js