How to make parts of Protractor wait or become syn

Question

I have code like this in a protractor test, it goes to a home page determines we need to login and then calls this function. Note I'm running this in a NODE.js environment:

function Login() {
    browser.findElement(by.id('ID')).then(function (ele) {
        ele.sendKeys('SomeUserName');
        browser.findElement(by.id('password')).then(function (ele) {
            ele.sendKeys('SomePassword');
            browser.findElement(by.partialButtonText('Sign in')).then(function (ele) {
                ele.click();
                browser.getCurrentUrl().then(function (url) {
                    expect(url).toBe("http://NextURLAfterClick");
                    debugger;
                });
            });
        });
    });
}

But I can't get the click to fire prior to validating the browser.getCurrentUrl(), so what's happening is I'm getting the url of the login page, I want to get the url after the click to login.

I suspect it's my misunderstanding of how the Asynchronous nature of this works.

Answer 1

How to make parts of Protractor wait or become synchronous?

You can wait for the url to change with the help of browser.wait():

var urlChanged = function(url) {
  return function () {
    return browser.getCurrentUrl().then(function(actualUrl) {
      return url === actualUrl;
    });
  };
};

element(by.id('ID')).sendKeys('SomeUserName');
element(by.id('password')).sendKeys('SomePassword');
element(by.partialButtonText('Sign in')).click();

browser.wait(urlChanged("http://NextURLAfterClick")), 5000);

where urlChanged, in selenium terms, is a "Custom Expected Condition".