How to disable animations in protractor for angular js application - angularjs

Question

Can anyone suggest me how to disable animations in angular js application while executing protractor tests. I have added below code in my protractor config file but that does not help me:
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(function($animate) {
$animate.enabled(false);
});
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);

Answer 1

You can check out the angular's protractor configuration:
https://github.com/angular/angular.js/blob/master/protractor-shared-conf.js
You should add it under onPrepare block:
onPrepare: function() {
/* global angular: false, browser: false, jasmine: false */
// Disable animations so e2e tests run more quickly
var disableNgAnimate = function() {
angular.module('disableNgAnimate', []).run(['$animate', function($animate) {
$animate.enabled(false);
}]);
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);

Answer 2

I personally use the following code in the "onPrepare" function in my 'conf.js' file to disable both Angular/CSS animations:
...
onPrepare: function() {
var disableNgAnimate = function() {
angular
.module('disableNgAnimate', [])
.run(['$animate', function($animate) {
$animate.enabled(false);
}]);
};
var disableCssAnimate = function() {
angular
.module('disableCssAnimate', [])
.run(function() {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '* {' +
'-webkit-transition: none !important;' +
'-moz-transition: none !important' +
'-o-transition: none !important' +
'-ms-transition: none !important' +
'transition: none !important' +
'}';
document.getElementsByTagName('head')[0].appendChild(style);
});
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
browser.addMockModule('disableCssAnimate', disableCssAnimate);
}
...
Please note: I did not write the above code, I found it online while looking for ways to speed up my own tests.

Answer 3

Disabling CSS Animations / Transitions
In addition to disabling ngAnimation (ie, element(by.css('body')).allowAnimations(false);), you may need to disable some animation that has been applied through CSS.
I have found this sometimes contributes to some such animated elements, that may appear to Protractor to be 'clickable' (ie, EC.elementToBeClickable(btnUiBootstrapModalClose)), to not actually respond to .click(), etc.
In my particular case, I was suffering with a ui.bootstrap modal that transitioned in and out, and I wasn't always able to get its internal 'close' button reliably clicked.
I found that disabling css animations helped. I added a class to a stylesheet:
.notransition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
... and in protractor, I've got something like:
_self.disableCssAnimations = function() {
return browser.executeScript("document.body.className += ' notransition';");
};
There may be slicker ways of applying this concept, but I found that the above worked very well for me - in addition to stabilising the tests, they run quicker as they're not waiting for animations.

Answer 4

See this for an example: https://github.com/angular/protractor/blob/master/spec/basic/elements_spec.js#L123
it('should export an allowAnimations helper', function() {
browser.get('index.html#/animation');
var animationTop = element(by.id('animationTop'));
var toggledNode = element(by.id('toggledNode')); // animated toggle
// disable animation
animationTop.allowAnimations(false);
// it should toggle without animation now
element(by.id('checkbox')).click();
});