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?

Signe

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.

Bossuet

I have this use case as in, test the changes made on the page after refresh. Make Changes -> click save (wont cause any page refresh) -> refresh -> test the reloaded page. In this case, refresh is triggered before save function is complete causing unnecessary browser alerts on the page. I had to use, waitForAngular() before triggering refresh on the page. – Reductase

Well, if you do the refresh by calling browser.refresh, it should wait for the previous operation to finish automatically. I just looked at the code and verified that it does (if you have not turned off the synchronization function that is). Maybe you caught a bug - you can file an issue in protractor's github page if that's the case. – Bossuet

I am load data on a side async with angular. Using waitForAngular I can test the component. Otherwise protractor checks when no data is yet received – Dm

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.

Disini

This doesn't work for me. I tried button.click().then(() => {expect(browser.getCurrentUrl()).toEqual(newPageUrl);}); but I still get the old url. – Dominance

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.

Agraffe