Skip to content
This repository has been archived by the owner on Jul 29, 2024. It is now read-only.

Timeout with angular 4/2 app with protractor 5.x #4234

Open
jlin412 opened this issue Apr 18, 2017 · 13 comments
Open

Timeout with angular 4/2 app with protractor 5.x #4234

jlin412 opened this issue Apr 18, 2017 · 13 comments
Assignees

Comments

@jlin412
Copy link

jlin412 commented Apr 18, 2017

Protractor 5 timeout with angular 4/1 hybrid app'
It seems to timeout with waitForAngular method. I turned off waitForAngular and protractor 5 will go to next command.
I try a few things and none to work:

  1. Downgrade to angular
  2. add or remove useAllAngular2AppRoots: true in the config.
  3. Try prortactor 4.x

Bug report

  • Node Version: 6.10.4
  • Protractor Version: 5.1.1
  • Angular Version: 4.0.2
  • Browser(s): chrome
  • Operating System and Version Mac Sierra
@NickTomlin
Copy link
Contributor

Could you please provide a small reproducible example repo or snippet? That will make it easier to diagnose this. Thanks!

@heathkit
Copy link
Contributor

Please see the docs about dealing with timeouts in Angular 2+ here: https://github.com/angular/protractor/blob/master/docs/timeouts.md#angular

@disophisis
Copy link

disophisis commented Apr 24, 2017

@NickTomlin We've been seeing this issue as well with a hybrid angular 4 app. A good simple base case for this would be codecraftpro/angularjs-migration-workshop repo.

The step-7 branch is where you can see the issue. I just put together a simple protractor 5.1.1 test that navigates to the site and tries to gets the page title and it times out.

@jlin412
Copy link
Author

jlin412 commented Apr 24, 2017

Our developer dug in a little more and found isStable check in waitForAngular never come to rest when our angular 1 app has never ending $interval monitor service. It is weird because angular is not supposed to track $interval. The theory was angular 1 app is tracked as one zone and there may be a bug in zone.js.

@heathkit
Copy link
Contributor

This is kind of related to angular/angular#6385.

In an upgraded app, AngularJS code is also running in the Angular zone. I think this is actually a bug in Angular's Testability, since it seems to wait for intervals but probably shouldn't. You can work around this by making your AngularJS code aware of the Angular zone and running outside it. So, for example:

if (Zone && Zone.current.name === 'angular') {
  let angularZone = Zone.current;
  Zone.parent.run(() => {
    $interval(() => {
       // Stuff here is run outside the Angular zone and will not be change detected
       angularZone.run(() => {
         // Inside the zone and will be change detected.
       });
    }, 500);
  });
}

You can also do this in a less hackish way by downgrading NgZone and injecting it into your AngularJS controller.

@jlin412
Copy link
Author

jlin412 commented Apr 25, 2017

@heathkit thanks for reply. Our dev decide to create a separate zone and keep monitoring service with interval in there. That seems to work.

@thelgevold
Copy link

This is the underlying issue: angular/angular#16349

@Red-3
Copy link

Red-3 commented Jun 21, 2017

@jlin412 Please could you provide an example of your solution. Would be interested to know if it might work with our Hybrid app?
Was it an isolated change, or did you have to change code throughout the app?

@gviligvili
Copy link

is there any updates? or other ways to solve it elegantly ? getting outside - inside the zone is not something I'd rather do.

@AshokKumarMelarkot
Copy link

Hi We are facing the same issue..

My configuration
Node Version: 6.10.4
Protractor Version: 5.2.0
Angular Version: 4.0.2
Browser(s): chrome

Tried the following things ..
Downgraded to Protractor 4.X.X
Chrome driver chromedriver_2.33.zip

Expecting fix for the same.

@AshokKumarMelarkot
Copy link

This issue has been fixed with a small change in Application.

Replaced javascript setTimeOut with angular default timeout for the screen load.

@mhinkka
Copy link

mhinkka commented Sep 20, 2018

I have a hybrid Angular application (6.1.4 and 1.6.9) that needs to use Angular Material in AngularJS components. Angular Material (1.1.7) seems to render animations all the time periodically inside angular zone causing protractor E2E tests to time out. Does anyone have any idea how to force all third party components to poll outside Angular zone so that protractor E2E tests can be run for the application without timing out?

@manuman94
Copy link

@mhinkka I'm getting the same timeouts using Angular Material when I use "autosize" attribute for mat-sidebar-container. That cause a reflow and breaks Protractor waits.

How did you solve that situation? I'm checking the "autosize" method and is calling this method from outside Angular zone.

Thank you, greetings.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants