How to disable animations in protractor for angula

问题:

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

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

回答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.

回答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.

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

回答5:

@DavidPisoni It seems valid at first sight. Still there are a couple of things that you might want to checkout

• in Protractor 2.0 you should return a promise if you are doing something with browser like in the e2e-common stuff

• If you are using angular-bootstrap there are places where they do not use $animate service, and instead applying the animations through bare javascript