Protractor browser.get() doesnt wait for angular5 app

Question

In protractors sourcecode at: https://github.com/angular/protractor/blob/master/lib/browser.ts

You will find that broswer.get() waits for angular1 to finish bootstrapping before solving. But there is no implementation for angular 2+:

        .then((angularVersion) => {
      // Load Angular Mocks
      if (angularVersion === 1) {
        // At this point, Angular will pause for us until angular.resumeBootstrap is called.
        let moduleNames: string[] = [];
        let modulePromise: wdpromise.Promise<void> = wdpromise.when(null);
        for (const {name, script, args} of this.mockModules_) {
          moduleNames.push(name);
          let executeScriptArgs = [script, msg('add mock module ' + name), ...args];
          modulePromise = modulePromise.then(
              () => this.executeScriptWithDescription.apply(this, executeScriptArgs)
                        .then(null, (err: Error) => {
                          throw new Error(
                              'Error while running module script ' + name + ': ' + err.message);
                        }));
        }

        return modulePromise.then(
            () => this.executeScriptWithDescription(
                'window.__TESTABILITY__NG1_APP_ROOT_INJECTOR__ = ' +
                    'angular.resumeBootstrap(arguments[0]);',
                msg('resume bootstrap'), moduleNames));
      } else {
        // TODO: support mock modules in Angular2. For now, error if someone
        // has tried to use one.
        if (this.mockModules_.length > 1) {
          throw 'Trying to load mock modules on an Angular v2+ app is not yet supported.';
        }
      }

The question im asking is: how does protractor know the page (angular5) has finished loading before resolving the promise? How else can i make sure the page finished loading to have some sort of concistency in my e2e-tests.

(I am using await/async and disabled the control-flow as discribed here: https://github.com/angular/protractor/blob/master/docs/control-flow.md , but because the promise resolves without check for bootstraping, i can wait all that i want, it will always be a timing issue)

Answer 1

Check out protractors Expected Conditions

You can use these with browser.wait() after your browser.get() to force protractor to wait until your defined conditions are met.

For example:

var EC = protractor.ExpectedConditions;
var timeout = 15000;
browser.get(yourUrl);
browser.wait(EC.presenceOf(yourElement),timeout)

This will go to your url, and then wait until the specified element is present before continuing, or it will timeout after 15000ms (15sec)