How to disable animations in protractor for angular js application

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);

score 32 · Answer 1 · answered Nov 07 '14 at 14:04

32

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);

answered Nov 07 '14 at 14:04

bugdayci

948
7
15

@user3345216 would you like to accept this answer? works perfectly for me. – manu Feb 04 '15 at 08:30
1

This doesn't seem to work for me. Using angular 1.2.26 and protractor 2.0.0. I can watch the specs run in Chrome and Firefox, and see the animations are all still firing. – David Pisoni Apr 21 '15 at 19:02
@DavidPisoni Can you try it with Protractor 1.8. Something else might be the cause, since we faced some other 2.0 migration problems too. You can always report an issue to protractor project if thats the case: https://github.com/angular/protractor/issues – bugdayci Jun 04 '15 at 08:16
@DavidPisoni can you share your protractor configuration file? – bugdayci Jun 05 '15 at 15:31
note that `addMockModule` registers functions that are run after every call to `protractor.get()` (aka `browser.get()`) . If you are using `browser.driver.get()` - which I was and should not have been - then aminations are not disabled! So audit your code and make sure all browser URL manipulation is done via `browser.get` ! – zayquan Jul 08 '16 at 04:13
Does this still work for Protractor 4.0.8? I'm using this in TypeScript and it doesn't like the "angular" reference. – Machtyn Oct 14 '16 at 18:52
For any poor bastard that sees this, the better way to turn off animations is in your beforeEach AFTER you've done your browser.get() with a very simple line: `element(by.css('body')).allowAnimations(false);`. The module examples given weren't working for me. – Skinner927 Sep 21 '17 at 01:16

score 21 · Answer 2 · answered Sep 16 '15 at 14:11

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.

Awesome! This got rid of some weird intermittent errors. Strange that even when leveraging promises I was still getting timing problems that could only be prevented with long browser sleeps. I can tear those things out now! — Eric Soyke, Mar 01 '17 at 15:49
I get the error "ReferenceError: window is not defined" with this code. Any ideas why? — DanielM, Aug 04 '17 at 13:53

score 10 · Answer 3 · edited May 23 '17 at 12:10

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.

You can also add this in a css, and load it within the testing environment only. We have a couple of scripts when runinng only the testing environment. browser.executeScript's might be slow, and error prone. — bugdayci, Dec 28 '15 at 15:49

score 2 · Answer 4 · answered Nov 06 '14 at 19:48

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();
  });

How to disable animations in protractor for angular js application

4 Answers4

Disabling CSS Animations / Transitions

Linked