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

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

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

请参见以下示例：

---

您可以查看angular的量角器配置：

应将其添加到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);

禁用CSS动画/转换 除了禁用ngAnimation（即，

元素（by.css（'body'））.allowAnimations（false）；

），您可能还需要禁用通过css应用的某些动画

我发现这有时会导致一些这样的动画元素，在量角器看来可能是“可点击的”（即，

EC.elementToBeClickable（btnUiBootstrapModalClose）

），而不是实际响应

。click（）

，等等

在我的特殊情况下，我遇到了一个ui.bootstrap模式的问题，该模式转换为输入和输出，并且我不能始终可靠地单击其内部的“关闭”按钮

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

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

---

也许有更巧妙的方法可以应用这个概念，但我发现上面的方法对我来说非常有效-除了稳定测试之外，它们运行得更快，因为它们不需要等待动画。

我个人在我的'conf.js'文件中的“onPrepare”函数中使用以下代码来禁用角度/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);
}
...

---

请注意：我没有编写上述代码，我是在网上找到的，当时我正在寻找加快自己测试速度的方法。

@user3345216您愿意接受这个答案吗？对我来说很好。这对我来说似乎不太好。使用角度1.2.26和量角器2.0.0。我可以观看Chrome和Firefox中运行的规范，看到所有的动画仍在运行。@DavidPisoni你能用量角器1.8试试吗。原因可能是其他原因，因为我们还面临其他一些2.0迁移问题。如果出现这种情况，您可以随时向量角器项目报告问题：@DavidPisoni您可以共享您的量角器配置文件吗？请注意，

addMockModule

注册每次调用

dragrator.get（）

（又称

browser.get（）

）后运行的函数。如果您使用的是

browser.driver.get（）

——我过去使用过，现在也不应该使用了，那么命名功能不会被禁用！因此，请检查您的代码，并确保所有浏览器URL操作都是通过

浏览器完成的。获取
！有趣。您也可以将其添加到css中，并仅在测试环境中加载。当只运行测试环境时，我们有几个脚本。executeScript可能很慢，而且容易出错。太棒了！这消除了一些奇怪的间歇性错误。奇怪的是，即使在充分利用承诺的情况下，我仍然会遇到只有长时间的浏览器睡眠才能避免的时间问题。我现在可以把那些东西撕下来了！我用这段代码得到错误“ReferenceError:window未定义”。你知道为什么吗？
...
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);
}
...