Question

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

有些答案讨论了在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.

Answer 1

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

＆＃13;

onPrepare

＆＃13;

它会做什么，它会添加一个自定义CSS来覆盖一些动画。例如，当您悬停时，这将阻止颜色动画。

希望有所帮助

<强>更新

加载网址后需要注入脚本。如果您将其放在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); }中，并且在注入脚本之前没有加载该网址，则会在onPrepare - 网址上注入脚本。像这样使用它可以解决问题

＆＃13;

data

＆＃13;

重要：

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

这应该可以做到最后。祝你好运。

Answer 2

我设法使用查询参数完成此操作。

在Neils回答的基础上，我能够更新我的SharedModule，以便在BrowserAnimationModule和NoopAnimationModule之间切换。

我创建了一个附加查询参数的方法，稍后我会查找该参数。我在测试中使用此方法进行所有导航，因此我可以确定参数始终存在。

<强> E2eCommon

public static navigateTo(path: string) {
  browser.get('/' + path + '?qa=true');
  browser.waitForAngular();
}

然后在我宣布动画模块的模块中，我检查查询参数，并根据它是否存在我加载BrowserAnimationModule或NoopAnimationModule

<强> shared.module.ts

@NgModule({
  declarations: [
    ...
  ],
  exports: [
    AnimationModule(),
    ...
  ],
  imports: [
    AnimationModule(),
    ...
  ]
})
export class SharedModule { }

export function AnimationModule(): any {
  return window.location.search.indexOf('qa=true') > -1 ? NoopAnimationsModule : BrowserAnimationsModule;
}

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

2 个答案: