禁用CSS动画/转换

Question

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

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

Answer 1

您可以查看角度的量角器配置： 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

我个人在＆＃34; onPrepare＆＃34;中使用以下代码功能在我的＃conf; js＆＃39;文件以禁用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应用的一些动画。

我发现这有时候会影响一些这样的动画元素，而量角器看起来可以点击这些元素。（即EC.elementToBeClickable(btnUiBootstrapModalClose)），实际上不回复.click()等

在我的特殊情况下，我遇到了一个ui.bootstrap模式，它进出了转换，我并不总是能够让它的内部关闭＆＃39;按钮可靠地点击。

我发现disabling css animations有帮助。我在样式表中添加了一个类：

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

Answer 5

@DavidPisoni 这看起来似乎有效。还有一些你可能想要签出的东西

如果您正在使用angular-bootstrap，则有些地方他们不使用$ animate服务，而是通过裸javascript应用动画

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

5 个答案:

禁用CSS动画/转换