protractor timed out only when ignoreSynchronization is set to false

Question

I couldn't figure out why protractor timed out when it reach to the code with ignoreSynchronization set to false;

this.countSubscribers = function () {
    this.subscriberCount().then(function (count) {
    totalSubscribers = count;
  });
};

the method works correctly and totalSubscribers variable is getting correct value when ignoreSynchronization = true;

Code below is a sample of my spec page:

describe("subscriber page test", function () {
    "use strict";
    var selectedCount = 10;
    var subscriberCount;
  
    describe("This test script selects no. of subscribers to be displayed on subscriber page", function () {

        /**
         * Step-1#Select number of items to be displayed
         * Step-2#Get the count of subscribers displayed
         * Step-3#check whether the number of subscribers displayed is equal to 10
         */
        it("should select the no. of items to displayed and get the count", function () {
            browser.ignoreSynchronization = false;
            subscriber_page.selectItems(selectedCount);
            subscriber_page.countSubscribers();
        });

        it("should check whether the selected no. of subscribers are displayed", function () {
            expect(subscriber_page.getSubscribers()).toBe(10);
        });
    });
});

and the code below is a sample of my page object:

var SubscriberPage = function () {
  "use strict";
  this.subscriberCount = function() { return element...}; 
  this.selectOption = function(count) {return element...};
  var totalSubscribers;
  /**
   * This method selects items in list box
   */
  this.selectItems = function (count) {
    this.selectOption(count).click(); //selects the items from list box
  };

  /**
   * This method sets the number of subscribers listed
   */
  this.countSubscribers = function () {
      this.subscriberCount().count().then(function (count) {
      totalSubscribers = count;
    });
  };

  /**
   * This method returns the subscriber count
   */
  this.getSubscribers = function () {
    return totalSubscribers;//returns the count of subscribers.
  };
};
module.exports = new SubscriberPage();

The code select items successfully, but it makes long pause afterward then produce following error message:

Failed: Timed out waiting for Protractor to synchronize with the page after 5 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md While waiting for element with locator - Locator: By(css selector, ...)

What I found out so far: If I comment out following line from spec page countSubscribers method rather works correctly:

subscriber_page.selectItems(selectedCount);

or if I temporarily flip the ignoreSynchronization variable to true before countSubscribers method is executed, it works fine.

Can anyone explain what the protractor is doing at this point and what the best solution is while browser.ignoreSynchronization is set to false?

Answer 1

Keep a reference of "this" before your function. And then call it whenever you want. Also if you do element.all(...) You'll be able to use the native .count() which will resolve the promise for you.

//Reference to this

var self = this;

//element.all with .count()

this.subscriberCount = function() { return element.all(...).Count()};

//This method returns the number of subscribers listed

this.countSubscribers = function () { return self.subscriberCount(); });