Promise for getting the title of a web page never resolves with Protractor and Jasmine

Question

The following protractor/jasmine test code only prints out 1 and 2, and then hangs and times out.

It appears to be an issue with either the click() action on the button element, or the promise on the getTitle method on the browser object, or both.

Does anyone have a solution to this, or a better way of doing what I'm doing?

Code:

it('should allow successful login', function() {   
    browser.get('http://192.168.0.100/src/');
    browser.waitForAngular();

    var titlePromise = browser.getTitle();
    titlePromise.then(function(text){
      console.log("1**************", text);
    });

    var titlePromise = browser.getTitle();
    titlePromise.then(function(text){
      console.log("2**************", text);
    });

    element.all(by.model('credentials.username')).first().sendKeys('foo');
    element.all(by.model('credentials.password')).first().sendKeys('bar');
    var loginBtn = element.all(by.cssContainingText('.btn', 'Login')).first();
    loginBtn.click();
    browser.sleep(5000);

    var titlePromise = browser.getTitle();
    titlePromise.then(function(text){
      console.log("3**************", text);
    });    
  });
}); 

Error:

Error: Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md

Answer 1

I may not have enough information, but here are some things to try:

1. As obvious as this is, have you read through each case that will cause a timeout in the linked doc https://github.com/angular/protractor/blob/master/docs/faq.md ? One that has got me before is Protractor will never load if you have $timeout in use in your Angular app.

2. Are you sure you're selecting the loginBtn correctly? You may want to Testing Out Protractor Interactively: https://github.com/angular/protractor/blob/master/docs/debugging.md . From protractor directory /node_modules/protractor:

   $ node ./bin/elementexplorer.js http://192.168.0.100/src/

3. If you're logging in and going to another page, instead of sleeping to wait for the next page to load, wait until it's changed:

   browser.driver.wait(function() { return browser.driver.getCurrentUrl().then(function(url) { return /logged-in-url/.test(url); }); });

Answer 2

You have forgotten that all interaction with the document is done through Promises . Your code ought to look something like the untested block below.

Note also that browser.waitForAngular is not needed , "Protractor automatically applies this command before every WebDriver action."

Not sure why you call getTitle so often, but I left it in, in case it makes the refactor more clear.

it('should allow successful login', function() {   
    browser.get('http://192.168.0.100/src/')
    .then(function(){
        return browser.getTitle()
    })
    .then(function(text){
        console.log("1**************", text);
        return browser.getTitle();
    })
    .then(function(text) {
        console.log("2**************", text);
        return browser.getTitle()
    })
    .then(function (text) {
        console.log("3**************", text);
        element.all(by.model('credentials.username')).first().sendKeys('foo');
    })
    .then(function () {
        element.all(by.model('credentials.password')).first().sendKeys('bar');
    })
    .then(function () {
        element.all(by.cssContainingText('.btn', 'Login')).first().click();
    })
    .then(function () {
        browser.sleep(5000); // Better to use ExpectedConditions to wait something
    })
    .then(function () {
        var titlePromise = browser.getTitle();
        return browser.getTitle()
    })
    .then(function (text) {
        console.log("3**************", text);
    });
});