angular – 如何在量角器中禁用动画？

发布时间：2020-12-17 17:51:42 所属栏目：安全来源：网络整理

导读：我在谷歌上找到了一些答案,但它们似乎并不适用于我的项目. 一些答案谈到将一些代码添加到他们的conf.js文件的onPrepare()函数中,但我的项目中没有该文件.我有一个名为protractor.config.js的文件,它默认位于角度快速入门项目中.无论如何,这个配置文件也有一

我在谷歌上找到了一些答案,但它们似乎并不适用于我的项目.

一些答案谈到将一些代码添加到他们的conf.js文件的onPrepare()函数中,但我的项目中没有该文件.我有一个名为protractor.config.js的文件,它默认位于角度快速入门项目中.无论如何,这个配置文件也有一个onPrepare()函数,所以我试着在这个问题中添加答案#2中的代码：How to disable animations in protractor for angular js application,但后来我的测试失败了：

message: Failed: Trying to load mock modules on an Angular2 app is not yet supported.

解决方法

如果要禁用Angular 2动画,请按@NeilLunn评论的答案.如果要禁用CSS动画,可以使用客户css Javascript注入覆盖它.下面的脚本可以作为一个例子.
将它放在量角器配置文件中的onPrepare中

return browser.driver.executeScript(disableCSSAnimation);

function disableCSSAnimation() {
  var css = '* {' +
    '-webkit-transition-duration: 0s !important;' +
    'transition-duration: 0s !important;' +
    '-webkit-animation-duration: 0s !important;' +
    'animation-duration: 0s !important;' +
    '}',head = document.head || document.getElementsByTagName('head')[0],style = document.createElement('style');

  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  head.appendChild(style);
}

它将做的是它将添加一个自定义CSS来覆盖一些动画.例如,这将在您悬停时阻止颜色动画.

希望能帮助到你

更新：

加载url后需要注入脚本.如果将它放在onPrepare中并且在注入脚本之前没有加载url,脚本将被注入data-url.像这样使用它可以解决问题

describe('Demo test',() => {
  beforeEach(() => {
    browser.get('http://www.protractortest.org/#/');
    browser.driver.executeScript(disableCSSAnimation);

    function disableCSSAnimation() {
      var css = '* {' +
        '-webkit-transition-duration: 0s !important;' +
        'transition-duration: 0s !important;' +
        '-webkit-animation-duration: 0s !important;' +
        'animation-duration: 0s !important;' +
        '}',style = document.createElement('style');

      style.type = 'text/css';
      style.appendChild(document.createTextNode(css));
      head.appendChild(style);
    }
  });

  it('Should go to Protractor test page',() => {
    expect(browser.getTitle()).toEqual('Protractor - end-to-end testing for AngularJS')
  });
});

enter image description here

重要：

制作一个方法,以便您可以重复使用它,因为每次页面重新加载/转到另一个URL时,都需要注入脚本.

这应该是最终的伎俩.祝它好运.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!