RPA - angular application disable animations only for testing environment

I am using RPA to automate an angular application, the application is loaded with animations. Like accordion opening/closing, these animations are causing significant delay for my testcases.

Is there a way to disable animations based on the environment. In production I want animations to work, but for e2e environment, disabling animations, will make my RPA tests execute faster.

Is there any configuration in angular that can do this?

First you need to install environments, try the official angular guide:

Configure environment-specific defaults

Then add the configuration in angular.json that will transform the environment file for testing.

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

---

After this, for your testing scenario, you should create a environment.testing.ts, which will contain a flag called noAnimations which will be true.

environment.testing.ts

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

---

Now we can use this flag and simply toggle between two functions.

provideAnimations (Enables animations)

Returns the set of dependency-injection providers to enable animations in an application. See animations guide to learn more about animations in Angular.

provideNoopAnimations (Disables animations without errors)

Returns the set of dependency-injection providers to enable animations in an application. See animations guide to learn more about animations in Angular.

---

If you want to enable for standalone components it will look something like:

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


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

If you want to enable for modular it will look something like:

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 Demo