Protractor tests inconsistently passing / failing for AngularJS app

Question

My Protractor e2e tests are inconsistently passing and failing.

It seems this could be due to asynchronous javascript, as discussed here: Protractor : How to wait for

Answer 1

There is also an another technique to make your tests more stable: Explicit Waits and Expected Conditions (docs).

I've found using Expected Conditions especially useful when testing against non-angular pages or angular applications that have a lot of animations involved.

For example, you can wait for an element to be clickable before making a click:

var EC = protractor.ExpectedConditions;
var link = element(by.id("mylink"));

browser.wait(EC.elementToBeClickable(link), "10000", "The link is still not clickable");
link.click();

There are also other built-in Expected Conditions, such as:

• presenseOf()
• visibilityOf()
• alertIsPresent()
• textToBePresentInElementValue()
• etc

And, it is easy to write a custom Expected Condition, example use case:

• Testing link style changes

You can also combine Expected Conditions using and, or and not, e.g.:

var urlChanged = function() {
  return browser.getCurrentUrl().then(function(url) {
    return url != 'http://www.angularjs.org';
  });
};

// condition to wait for url to change, title to contain 'foo', and $('abc') element to contain text 'bar'
var condition = EC.and(urlChanged, EC.titleContains('foo'), EC.textToBePresentInElement($('abc'), 'bar'));
$('navButton').click();
browser.wait(condition, 5000); //wait for condition to be true.