4

I am working on migrating my AngularJS (1.6) app to Angular (4) and now have a hybrid application, bootstrapped with NgUpgrade.

However, this seems to have completely broken my Protractor tests.

Failed: Timed out waiting for asynchronous Angular tasks to finish after 11 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, .toggle-summary-button)

Hybrid app changes

The application seems to run fine, and both AngularJS and Angular components are working as expected. The changes I made in the bootstrapping process are:

1 Removed ng-app from html tag:

<html lang="en" *ng-app="myapp">

2 Added an AppModules (@NgModule) etc.

3 Used NgUpgrade to bootstrap the app:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['myapp'], {strictDi: true});
});

Protractor tests

Based on the error above, the problem seems to be related to whatever Protractor does when it is waiting for Angular. I have a beforeEach block which loads the login page, fills in the details and logs in. Weirdly it is still opening the page and entering text into the username field, but then it fails to go any further.

I can't understand why this is any different and no amount of changing things around seems to help, so any guidance would be most welcome!

I have tried, with no success:

  • adding "rootElement: 'body'" to my protractor config file
  • adding "ng12Hybrid: true" to my protractor config file - I get a message saying that it should no longer be needed as it auto detects.
  • increasing the allScriptsTimeout setting from 11000 to 60000 and it still times out.
  • turning off the waitForAngularEnabled setting. This solves the problem with the login fields, but then none of my http mocks work and the tests fail.
Community
  • 1
  • 1
Matt Wilson
  • 8,159
  • 8
  • 33
  • 55
  • Also discussing this issue at https://github.com/angular/protractor/issues/4290#issuecomment-301881050 – Matt Wilson May 17 '17 at 09:03
  • 2
    Not that this is a solution to the Protractor problem, but for the benefit of anyone reading this who has the option of switching to another tool, I highly recommend https://www.cypress.io/. I ended up replacing Protractor with Cypress because of the issues in this post and it's fantastic! – Matt Wilson Dec 01 '17 at 11:19

2 Answers2

6

What is funny is I asked the exact same question (+github) 15 months ago about angular 1 to angular 2:

Protractor + Hybrid Angular 1+2 Application = Fail

Without any solution I rolled back to angular 1. Today we decided to try again to move up from angular 1 to 4 like you, and landed on your question because we still have the exact same problem...

Well, not so funny actually... I can't understand why a so important feature is put apart like that. AngularJs was supposed to be actively maintained because of the breaking change to Angular 2+! It's a little disappointing (sorry for those expecting an real answer, I will post if updates)...

Edit: I went to React

Sebastien Horin
  • 10,803
  • 4
  • 52
  • 54
  • Hello, we also tried to upgrade from Angular1 to 5 recently, and experienced the exact same issue. I've searched everywhere on the Internet, and nobody seems to get this work. Have you any update on this subject ? – Zhenyi Zhang Jan 26 '18 at 09:44
  • @ZhenyiZhang My app is now hybrid Angular.js/React.js instead of Angular 2 – Sebastien Horin Jan 26 '18 at 10:38
  • thanks very much for your reply. I will struggle a little bit longer with NgUpgrade. It's so frustrating that it doesn't work well with protractor..... – Zhenyi Zhang Jan 26 '18 at 16:19
  • 2
    Have the same problem in 2019, upgrading from 1.7 to 8.2 and all tests are broken – Majesty Aug 07 '19 at 12:39
0

I came up with a temporary hack to solve this issue by overriding the waitForAngular function with the below logic.

onPrepare: function() {
            
            var script = "var callback = arguments[arguments.length - 1];" +
                "angular.element(document.querySelector(\"body\")).injector()"+
                ".get(\"$browser\").notifyWhenNoOutstandingRequests(callback)");

            browser.waitForAngular = function() {
                return browser.executeAsyncScript(script)
            };
}
Sudharsan Selvaraj
  • 4,792
  • 3
  • 14
  • 22