如何在角度js应用程序中禁用量角器中的动画

Question

任何人都可以建议我如何在执行量角器测试时禁用角度js应用程序中的动画.我在我的量角器配置文件中添加了以下代码,但这对我没有帮助:

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

Answer 1

您可以查看angular的量角器配置:https: //github.com/angular/angular.js/blob/master/protractor-shared-conf.js

你应该在onPrepare块下添加它:

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

我个人在'conf.js'文件中的"onPrepare"函数中使用以下代码来禁用Angular/CSS动画:

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

请注意:我没有写上面的代码,我在寻找加速自己测试的方法时在网上找到了它.

Answer 3

禁用CSS动画/过渡

除了禁用ngAnimation(即element(by.css('body')).allowAnimations(false);)之外,您可能还需要禁用通过CSS应用的一些动画.

我发现这有时会导致一些这样的动画元素,可能看起来Protractor是"可点击的"(即EC.elementToBeClickable(btnUiBootstrapModalClose)),实际上没有响应.click(),等等.

在我的特殊情况下,我正在使用ui.bootstrap模式进行转换,我并不总是能够可靠地点击它的内部"关闭"按钮.

我发现禁用css动画有帮助.我在样式表中添加了一个类:

.notransition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

...在量角器中,我有类似的东西:

_self.disableCssAnimations = function() {
  return browser.executeScript("document.body.className += ' notransition';");
};

应用这个概念的方法可能比较顺畅,但我发现上述方法对我来说效果很好 - 除了稳定测试之外,它们运行速度更快,因为它们不等动画.

Answer 4

请参阅此示例：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();
  });