RPA - 角度应用程序仅在测试环境中禁用动画

Question

我正在使用 RPA 来自动化角度应用程序，该应用程序加载了动画。就像手风琴打开/关闭一样，这些动画对我的测试用例造成了严重的延迟。

有没有办法根据环境禁用动画。在生产中，我希望动画能够正常工作，但对于

e2e

环境，禁用动画将使我的 RPA 测试执行得更快。

角度中是否有任何配置可以做到这一点？

Answer 1

首先你需要安装

environments

，尝试官方的角度指南：

配置特定于环境的默认值

然后在 angular.json 中添加配置，该配置将转换环境文件以进行测试。

 "configurations": {
    "test": {
      "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.testing.ts"
          }
        ],
        …

---

此后，对于您的测试场景，您应该创建一个

environment.testing.ts

，其中将包含一个名为

noAnimations

的标志，该标志将为 true。

环境.测试.ts

export const environment = {
  production: true,
  noAnimations: true,
};

---

现在我们可以使用这个标志并简单地在两个函数之间切换。

provideAnimations（启用动画）

返回一组依赖注入提供程序以在应用程序中启用动画。请参阅动画指南以了解有关 Angular 动画的更多信息。

provideNoopAnimations（无错误地禁用动画）

返回一组依赖注入提供程序以在应用程序中启用动画。请参阅动画指南以了解有关 Angular 动画的更多信息。

---

如果您想启用独立组件，它将类似于：

import {
  provideAnimations,
  provideNoopAnimations,
} from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
...


...
bootstrapApplication(AppComponent, {
  providers: [environment.noAnimations ?  provideNoopAnimations() : provideAnimations()],
});

如果您想启用模块化，它将类似于：

import {
  provideAnimations,
  provideNoopAnimations,
} from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
...

...
@NgModule({
  imports: [
  ...
  providers: [environment.noAnimations ?  provideNoopAnimations() : provideAnimations()],
  bootstrap: [AppComponent],
})
export class AppModule {}

Stackblitz 演示