angular - 如何禁用 Protractor 中的动画？

Question

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

一些答案​​谈到了将一些代码添加到他们的 conf.js 文件的 onPrepare() 函数中，但我的项目中没有该文件。我有一个名为 protractor.config.js 的文件，默认情况下它位于 Angular quickstart 项目中。不管怎样，这个配置文件还有一个 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.

Answer 1

如果您想禁用 Angular 2 动画，请按照@NeilLunn 的评论寻找答案。如果您想禁用 CSS 动画，您可以使用客户 css Javascript 注入(inject)来覆盖它。下面的脚本可以作为示例。 将它放在 Protractor 配置文件的 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后注入(inject)。如果您将它放在 onPrepare 中，并且在注入(inject)脚本之前没有加载 url，则脚本将被注入(inject)到 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;' +
        '}',
        head = document.head || document.getElementsByTagName('head')[0],
        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')
  });
});

重要:

为它创建一个方法以便您可以重复使用它，因为每次页面重新加载/转到其他 url 时，都需要注入(inject)脚本。

这最终应该可以解决问题。祝你好运。