Protractor browser.wait causes angular timeout

Question

I have this code

    browser.sleep(5000).then(function() {console.log('rotel:' + browser.rootEl)});
    browser.ignoreSynchronization = true;
    browser.rootEl = 'div#overview';
    browser.driver.switchTo().defaultContent().then(function() {console.log('Switch default')});
    browser.sleep(500);
    browser.wait(function() { return browser.isElementPresent(by.css('[class="box-header"]'))}, 10000);
    element(by.model("ssn")).sendKeys(pat + "\n").then(function() {console.log('sendkeys')});
    browser.rootEl = 'body';

If I remove the line with browser wait the testing continues otherwise i get

'Error while waiting for Protractor to sync with the page: "root element (body) has no injector. this may mean it is not inside ng-app."'

How can the wait, which don't use any angular things, not work when the "by.model" line does?

Plus I'm almost certain it worked this morning before going out for some errands.

Answer 1

If the page you are testing is angular, then you should set ignoreSynchronization to false in your code - browser.ignoreSynchronization = false; .

Also make sure you have ng-app attribute on your html body tag without which protractor doesn't recognise if its an angular or non-angular page. If at all your ng-app tag is on a descendant element of body tag, then use the property rootElement in your conf.js file to indicate protractor to check angular from that tag onwards. Here's how -

rootElement: 'body/div', //if ng-app tag is on a div element under body

Also the promise that isElementPresent() returns is not resolved in your browser.wait() function. The wait() function always waits for a boolean value to be returned until the timeout value expires and if it doesn't return anything then an error is thrown. Also isElementPresent() returns a boolean value based on the element's presence. Here's how to use it -

browser.wait(function() { 
    return browser.isElementPresent(by.css('[class="box-header"]')).then(function(present){
        return present;
    });
}, 10000);

There's another easy way if you just want to check if the element is present on the DOM by using ExpectedConditions object that protractor has. Here are few examples of its usage -

var EC = protractor.ExpectedConditions;
var element = element(by.css('[class="box-header"]'));

browser.wait(EC.visibilityOf(element), 10000); //Checks if element is present and enabled on DOM
browser.wait(EC.presenceOf(element), 10000); //Checks if element is present on DOM
browser.wait(EC.elementToBeClickable(element), 10000); //Use it if you want to wait for element to be clickable Checks if element is present and enabled on DOM

Hope it helps.