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.

Leave a Comment

tech