selenium - Detecting that Angular 2 is done running

Question

We use Selenium WebDriver to automate our UI based tests. One of our challenges is to detect when a page is truly done loading, and Angular 1 was a challenge in that regard as well. We ended up executing this piece of code specifically to detect if Angular 1 is done:

if(typeof window.angular !== "undefined")
{
  var injector = window.angular.element("*[ng-app]").eq(0).injector();

  if(injector)
  {
    var $rootScope = injector.get("$rootScope");
    var $http = injector.get("$http");

    if($rootScope.$$phase === "$apply" || $rootScope.$$phase === "$digest" || $http.pendingRequests.length !== 0)
    {
      return false;
    }
  }
}

The app that we are testing recently switched over to use Angular 2. The code snippet above does not wait for Angular 2 to finish. Any suggestions?

Answer 1

In case of Angular 2, you should wait for stableness of "testabilities" of all Angular 2 apps:

functions.waitForAllAngular2 = function(callback) {
  try {
    var testabilities = window.getAllAngularTestabilities();
    var count = testabilities.length;
    var decrement = function() {
      count--;
      if (count === 0) {
        callback();
      }
    };
    testabilities.forEach(function(testability) {
      testability.whenStable(decrement);
    });
  } catch (err) {
    callback(err.message);
  }
};

Taken from Protractor source code. Protractor is a wrapper around WebDriverJS javascript selenium bindings; designed to test AngularJS applications (not only, but best suited for).