How to debug timed out waiting for asynchronous Angular tasks? Failure to find elements on angular page occurring

by

In the following I list a set of potential causes and possibilities to fix/resolve them.

How does AngularJS and Angular(2) Work / What can I check in the Browser Dev Mode

I can’t explain it as well as Andrey Agibalov in his Blog here, so check it out (also for developers).

Basically, the objects required by Protractor you can check in your Chrome Dev.

for AngularJS
Check if the object window.angular is properly defined, i.e. lookup window.angular.version and also try window.angular.getTestability of your Root element

for Angular(2)
Check if the object window.getAllAngularRootElements returns at least one value.

Root Element (AngularJS)

Potentially your Angular App is somewhere wrapped within the Body as something like <div ng-app="my-app">.
In that case, you must adjust your rootElement: body inside config.ts. Check this answer for details.

Angular(2)

If you’re using Angular (aka Angular2), then there are ngZone’s introduced. In this case your config.js should additionally contain this:

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js'],
    useAllAngular2AppRoots: true,
    // rootElement: 'root-element'
};

check in your browser for window.getAllAngularRootElements as the additional line in conf.js is about this.

If you can, maybe use the advantage of multiple zones possible. Create a 2nd zone, configure rootElement: 'root-element'
to only focus on one zone and then move some asynchronous tasks into the other zone until you found, which task(s) lead to timeout. Keep those tasks (if possible) in the separate zone, so Protractor ignores those tasks.

And if $interval or other long lasting asynchronous tasks are used, there can be issues, because of the zones. Repeatedly or long lasting tasks should be started outside the zone and then be moved into the zone as else Protractor could run into timeouts. There is a workaround for developers to apply, in order to avoid these problems for Protractor.
read all about it here

browser.driver. – side remark

browser.driver.get() works as if ignoreSynchronization = true, since you directly assign the Browser Driver and you kind of bypass the synchronization logic of Protractor.
Read more about it in this answer here.

Hope I could give you some more input and you can solve your issue. Please let me know the results.

More Related Contents:

  1. Protractor Angular 2 Failed: unknown error: angular is not defined
  2. Protractor e2e test case for downloading pdf file
  3. Expect item in array
  4. typescript anonymous object with variable based label value
  5. How to pass parameters rendered from backend to angular2 bootstrap method
  6. CORS Error: “requests are only supported for protocol schemes: http…” etc
  7. Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’
  8. Hot and Cold observables: are there ‘hot’ and ‘cold’ operators?
  9. Using http rest apis with angular 2
  10. Angular 2: How to detect changes in an array? (@input property)
  11. Angular 2 optional route parameter
  12. Angular 2: import external js file into component
  13. What is #auto attribute here and why it is required
  14. Angular app has to clear cache after new deployment
  15. Module not found: Error: Can’t resolve ‘crypto’
  16. updating variable changes in components from a service with angular2
  17. How to handle window scroll event in Angular 4?
  18. Prevent IE11 caching GET call in Angular 2
  19. Nested arrays in Angular 2 reactive forms?
  20. Suites vs Specs Protractor
  21. angular 4+ assign @Input for ngComponentOutlet dynamically created component
  22. How to loop over object properties with ngFor in Angular
  23. Converting an image to base64 in angular 2
  24. Angular2 – catch/subscribe to (click) event in dynamically added HTML
  25. Get current url in Angular [duplicate]
  26. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  27. Spying on a constructor using Jasmine
  28. ng2-charts update labels and data
  29. How to disable Browser back button in Angular 2
  30. Filter Array in Array by date between 2 dates

Leave a Comment