Protractor - Where to use browser.waitForAngular()

Question

I have some tests written using protractor for angular.js app. I am using Page Objects design pattern and there i have some methods that navigate to other pages by clicking on links and buttons. and soon after that i am calling browser.waitForAngular().

Page Object

module.exports = function () {
    this.companyNameLink = element(by.id('viewCompany'));
    this.newMeetingButton = element(by.id('newMeetingButton'));

    this.createNewGeneralMeeting = function () {
        this.newMeetingButton.click();
        browser.waitForAngular();
    };

    this.goToCompanyPage = function () {
        this.companyNameLink.click();
        browser.waitForAngular();
    };
};

And in some spec file i use this page object like this..

var DashboardPage = require('../dashboardPageObject.js');
dashboardPage = new DashboardPage();

...

dashboardPage.goToCompanyPage();

But the problem is sometimes i get the angular could not be found on the window error and my tests fail. Most of the time the tests run. This issue is random. My question is that should i remove the browser.waitForAngular() from the page object method and call it after i make the method call like this...

Modified Page Object

...
this.goToCompanyPage = function () {
    this.companyNameLink.click();
};
...

Spec File

dashboardPage.goToCompanyPage();
browser.waitForAngular();

Is calling browser.waitForAngular() causing the issue? Where should i call waitForAngular is there any best practice on how to use this?

Answer 1

From protractor's documentation:

Instruct webdriver to wait until Angular has finished rendering and has no outstanding $http or $timeout calls before continuing. Note that Protractor automatically applies this command before every WebDriver action.

You shouldn't be calling this at all and I cannot think of a valid case where you should.

Answer 2

Instead of using waitForAngular, you should handle the promise returned by click.

Thus, first of all, your page object methods should return those promises:

this.goToCompanyPage = function () {
    return this.companyNameLink.click();
};

Then, your actual use of this method can look like this:

dashboardPage.goToCompanyPage().then(function() {
  // this will be executed when the click is done.
  // No need for any waitForAngular.
});

For some further examples, see my state/page-object version of the Angular PhoneCat Protractor test suite.

Answer 3

I'm using browser.WaitForAngular() before navigating to a specific page via browser.Url Otherwise, I get errors in the browser log whose I'm asserting for in test cleanup.