javascriptangularjstwitter-bootstrapprotractorangularjs-select2

Angular Protractor tests fail with Select2 inside Modal

I’m trying to run my angular e2e tests with protractor. I’ve got some situations where a select exists inside a modal. Depending on the machine running the tests, this sometimes fails as protractor can’t find the select with:

NoSuchElementError: No element found using locator: By.cssSelector("div#s2id_items”)

On a slower machine this works every time, while on faster machines it often fails. My guess is that the modal is still being animated when protractor tries to access the selector, hence, resulting in failure.

I’ve tried to disable animations without success with the code bellow inside the onPrepare directive in my protractor config: 

var disableNgAnimate = function() {
  angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
    $animate.enabled(false);
  }]);
};
browser.addMockModule('disableNgAnimate',disableNgAnimate);

I’m using angular 1.4.3 with bootstrap 3.3.5 and protractor 2.1.0.

Thanks

Edit:

1 - I'm not using explicit waits and I wouldn't like to, as these would either considerably slow down tests or still be prone to failure in some scenarios.

Solution

  • You could try using Expected Conditions for wait, such as:

    var EC = protractor.ExpectedConditions;
var myElement= element(by.css('div#s2id_items'));

browser.wait(EC.presenceOf(myElement), 5000);
//rest of your code

    This wait will not slow down your tests, as it will only wait long enough for the element to be shown, and fail after 5 sec if it isn't.

    EDIT: For clickable, animated objects you can either try built-in "elementToBeClickable" condition (just replace presenceOf in the above example), or write your own, that would do whatever you like (function returning true of false). E2E tests should "think" as a user would, and a user would wait for the animation to end, so maybe it would be best if you used explicit wait for the animation after all.