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

Patroon

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

Jelle

@Patroon would you like to accept this answer? works perfectly for me. – Antre

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. – Aliciaalick

@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: github.com/angular/protractor/issues – Jelle

@DavidPisoni can you share your protractor configuration file? – Jelle

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 ! – Adherence

Does this still work for Protractor 4.0.8? I'm using this in TypeScript and it doesn't like the "angular" reference. – Cainozoic

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. – Hardily

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.

Congruity

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! – Cotswold

I get the error "ReferenceError: window is not defined" with this code. Any ideas why? – Scevor

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.

Wharve

Interesting. Will try it. – Jumper

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. – Jelle

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

Athiste