Protractor not working with Angular 10. It keeps waiting and then fails

[Haresh Godhani]

Hi there!

I'm writing the test cases for Angular 11 app and found the problem that protractor is not even able to locate any element from the page. It keeps waiting for the given time and then it fails. I have noticed the same problem with Angular 10 app as well.
If I test with Angular 9 then it works fine.

I had investigated more and found that when we call getAllAngularTestabilities()[0].isStable() for angular 9 then it returns true but for Angular 10 & 11 it returns false because hasPendingMacrotasks is always true and it never becomes false even though there is no task running in background.

I have already tons of test cases returned for my old app and now its all broken with angular upgrade.
I will be grateful if someone can help me to resolve this issue.

Bug report

• Node Version: v12.16.3
• Protractor Version: v7.0.0
• Angular Version: 11.1.0
• Browser(s): chrome=90.0.4430.212
• Operating System and Version Ubuntu 20.10
• Your protractor configuration file

config = {
    showColors: true,
    allScriptsTimeout: 30 * 10 * 1000, // Timeouts from Protractor (Waiting for Page to Load) & Timeouts from WebDriver (Asynchronous Script Timeout)
    getPageTimeout:  30 * 10 * 1000, // Timeouts from Protractor (Waiting for Page to Load)
    jasmineNodeOpts: {
        showColors: true,
        includeStackTrace: true,
        defaultTimeoutInterval: 30 * 10 * 1000 // Timeouts from Jasmine (Spec Timeout)
    },
}

• A relevant example test

describe("Sample test", () => {

     it(`Print title tag name`, async () => {
          await browser.driver.get('http://localhost:4200');
          await browser.waitForAngularEnabled(true);
          console.log(await browser.element(by.css('.header__title')).getTagName());
     }
}

• Output from running the test

Stack:
    ScriptTimeoutError: script timeout
      (Session info: chrome=90.0.4430.212)
      (Driver info: chromedriver=90.0.4430.24 (4c6d850f087da467d926e8eddb76550aed655991-refs/branch-heads/4430@{#429}),platform=Linux 5.8.0-53-generic x86_64)
        at Object.checkLegacyResponse (/home/ubuntu/Projects/mydesmond-e2e/e2e/node_modules/selenium-webdriver/lib/error.js:546:15)

[Stanislav Kharchenko]

Could you check if it works in case for "waitForAngularEnabled(false)" ?
If yes, then it probably issue with app where async tasks are not finished and should be wrapped outside angular zone.

[Haresh Godhani]

Hi @StanislavKharchenko Thank you for your response.

With waitForAngularEnabled(false) it works but I'm afraid that it might cause the problem with other pages or complex test cases where it needs to wait until the angular work is done while loading the page?

Also waitForAngularEnabled function's purpose was to enable it for angular and disable for non angular pages, right?

[Stanislav Kharchenko]

@haresh14 Absolutely! This feature works only for Angular applications and you need to have own hook for wait element to be present for non-angular applications, this is normal practice for e2e.
In your case, as I mentioned above, looks like you have some async tasks run in Angular app. It should be wrapped outside angular zone, so “waitForAngular” hook will work. Please read about this https://www.protractortest.org/#/timeouts

You need to fix it at app side, but not test case side.

[Haresh Godhani]

@StanislavKharchenko I also thought about it and checked my app. Then I also tired with some very simple app and even in simple app too, I faced the same issue. This is that simple app that I had tried with https://github.com/bezkoder/angular-10-crud-app