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

[aozolin]

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.

[joaopslins]

I have the same issue. The problem is not protractor, it's the growl component from primeng. It uses timeout() so the protractor thinks that the angular is busy and waits until timeout. That's why when you use waitForAngular(false) it works. I didn't find a solution yet too.

[aozolin]

Thanks jotapsi.

In this case I see 2 probable issues:

1. It's Primeng issue, and they have to fix the issue.
2. Primeng uses timeouts as it's allowed by Angular. So in this case Protractor should handle such cases somehow.

[joaopslins]

Yeah, you can see here, on the initTimeout() method, there is a setTimeout function. You know this is the problem because when you set the "sticky" input to true, the protractor problem goes away, at least in my case.

My workaround for now is set waitForAngular to false and finish my test case this way, then I set it back to true and do a page refresh, resetting the timeout and then we can do the other tests normally.

PrimeNG could add an input to the Growl Component so we could run the timeout outside angular zone, thus resolving the issue, but I don't really know if they are willing to do that.

I really do not believe it's Protractor's fault, technically it's working as intended.

[SrivaniA]

I see this too. I have the following versions installed :

Node Version: v8.9.1
Protractor Version: 5.2.0
Browser(s): Chrome 62.0.3202.89
Operating System and Version Mac OS High Sierra 10.13.1
angular version : 2.3.0

I observed this since last two days when my tests which were passing earlier suddenly started to fail.

My bad , setting browser.waitForAngularEnabled(false) isn't really solving the problem as it is inconsistent and not working every time.
Any better work around till the issue is resolved.

[SrivaniA]

update : My dev team made changes to the application code which made the timeout to run outside angular zone. This made my tests green. But , i strongly believe this needs to be considered by protractor , perhaps.

[aozolin]

Yes, I believe, there are some other components expect PrimeNG growl one. That might use timeouts as well. So we have to deal with such cases.

It's better to get some thought about the issue from Protractor's team. As they might be aware of the issue and have some generic approach how to workaround it.

[qiyigg]

For now, if you have a "Repeated" setTimeout / setInterval in your app, Angular will always waits for your "setTimeout / setInterval " and therefore never stable and Protractor will wait for it forever.
The regular solution is let that kind of "Repeated" setTimeout / setInterval run outside the Angular so that Angular zone won't be aware of that kind of async tasks.
But that solution is not ideal, some third party library has that kind of async call and we cannot change third party library.
Our current plan is to introduce a new mechanism to let Protractor ignore some asynchronous tasks based on some Rules.
@heathkit is working on it, but it is involved with lots of changes in Angular and Zone. There's no ETA for that right now.

[shivangsanghi]

I am also facing the same issue in my project.

[carlospliego]

Same issue

[lxme]

Same issue.

[britomarco]

Same issue.

[justintoth]

Same issue....

[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)

[justintoth]

Thanks, the browser.waitForAngularEnabled(false) worked for me!

[adam3039]

I have the same issue. I have a bit of code running on a Rxjs interval and get this error. If I comment out the interval, all is well.

[shivangsanghi]

You need to use browser.waitForAngularEnabled(true) before the timeout. this code(browser.waitForAngularEnabled(true)) will wait for pending http requests and timeouts to finish. This worked fine for me, Hope this will work for you guys also.

[mboughaba]

Faced this issue today ✋
In my case, I believe that it is caused by pending http request to angularfire2.

I solved it by adding

    browser.waitForAngularEnabled(false);

[aozolin]

Fixed by PrimeNG team.
The issue is being closed.

[russelltrafford]

@aozolin can you confirm in which git commit/issue/release version this is fixed? Perhaps by referencing the fix PR to this issue?

[russelltrafford]

For anyone else wondering, incase they don't reply, I'm assuming they meant fixed in either #4681 or #4681

[StanislavKharchenko]

Hello.
I have the same problem with timeouts on Angular application, which uses primeng = 5.2.5.
Could you please specify in what version of primeng this problem was fixed?

Thank you.

[aschlei]

@qiyigg Do you know if the change you mentioned (to let Protractor conditionally ignore some asynchronous tasks) was ever merged in? And if so, is there any documentation or examples for how we might use this feature? We're running into this same problem with libraries besides primeng.

[qiyigg]

@aschlei Sorry, It hasn't been checked in yet.
For now, you can disable sync with angular in your test:
browser.waitForAngularEnabled(false);

[DocsWebApps]

Same problem but this solution worked OK.

browser.waitForAngularEnabled(false);

[JamboBuenna]

@qiyigg Do you know if the change you mentioned (to let Protractor conditionally ignore some asynchronous tasks) was ever merged in? This is now a problem for everyone using Firebase with Angular & can imagine this will be an issue that will keep coming up.

[qiyigg]

@JamboBuenna As far as I know, @heathkit task was paused, and mainly because the original implementation relies on some Angular API that we might deprecate soon.

add @vikerman, who will take over the Protractor stuff.

[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

[wiedzmin26]

@vikerman Can you help with it?

[yadimon]

i had the same issue and started to implement a plugin for this.
https://www.npmjs.com/package/protractor-sync-options-plugin
you can already use it to ignore some special async tasks.

need community help to develop it to high quality and probably more protractor/angular versions.