Running into Error while waiting for Protractor to sync with the page with basic protractor test

Question

describe('my homepage', function() {     var ptor = protractor.getInstance();     beforeEach(function(){         // ptor.ignoreSynchronization = true;         ptor.get('http://localhost/myApp/home.html');         // ptor.sleep(5000);     })     describe('login', function(){          var email = element.all(protractor.By.id('email'))             , pass = ptor.findElement(protractor.By.id('password'))             , loginBtn = ptor.findElement(protractor.By.css('#login button'))             ;          it('should input and login', function(){             // email.then(function(obj){             //  console.log('email', obj)             // })             email.sendKeys('[email protected]');             pass.sendKeys('shakalakabam');             loginBtn.click();          })     })  }); 

the above code returns

 Error: Error while waiting for Protractor to sync with the page: {} 

and I have no idea why this is, ptor load the page correctly, it seem to be the selection of the elements that fails.

TO SSHMSH:

Thanks, your almost right, and gave me the right philosophy, so the key is to ptor.sleep(3000) to have each page wait til ptor is in sync with the project.

Answer 1

I got the same error message (Angular 1.2.13). My tests were kicked off too early and Protractor didn't seem to wait for Angular to load.

It appeared that I had misconfigured the protractor config file. When the ng-app directive is not defined on the BODY-element, but on a descendant, you have to adjust the rootElement property in your protractor config file to the selector that defines your angular root element, for example:

// protractor-conf.js rootElement: '.my-app', 

when your HTML is:

<div ng-app="myApp" class="my-app"> 

Answer 2

I'm using ChromeDriver and the above error usually occurs for the first test. I've managed to get around it like this:

ptor.ignoreSynchronization = true; ptor.get(targetUrl); ptor.wait(     function() {             return ptor.driver.getCurrentUrl().then(                 function(url) {                     return targetUrl == url;                 });     }, 2000, 'It\'s taking too long to load ' + targetUrl + '!' ); 

Essentially you are waiting for the current URL of the browser to become what you've asked for and allow 2s for this to happen. You probably want to switch the ignoreSynchronization = false afterwards, possibly wrapping it in a ptor.wait(...). Just wondering, would uncommenting the ptor.sleep(5000); not help?

EDIT: After some experience with Promise/Deferred I've realised the correct way of doing this would be:

loginBtn.click().then(function () {     ptor.getCurrentUrl(targetUrl).then(function (newURL){         expect(newURL).toBe(whatItShouldBe);     }); }); 

Please note that if you are changing the URL (that is, moving away from the current AngularJS activated page to another, implying the AngularJS library needs to reload and init) than, at least in my experience, there's no way of avoiding the ptor.sleep(...) call. The above will only work if you are staying on the same Angular page, but changing the part of URL after the hashtag.