The default Angular project template executes end-to-end tests using the development environment. If you’re like me and switch to a Mac from Windows quite frequently, you may want to have the ability to execute your e2e tests in a different configuration. We will enable executing Angular e2e tests in different environments by modifying the angular.json:

First of all, you need to ensure the project has been setup with multiple environments in the first place. I happen to use the following environments, each with its own environment.ts file under src/environments folder.

  • dev environment (environment.ts)
  • dev environment for MacOs (environment.mac.ts)
  • production environment (environment.prod.ts)

The default Angular project template comes with environment.ts and environment.prod.ts already configured. I have added the mac environment to configurations for project configuration in angular.json file. In my case, the mac configuration is for purely storing a different API URL (127.0.0.1 instead of localhost).

Modify angular.json file to add additional e2e environment configuration like below. Make sure to add these inside the e2e setup:

"project-xyz-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project-timify:serve:production"
            },
            "mac": {
              "devServerTarget": "project-timify:serve:mac"
            }
          }
        }
      ....
}Code language: JSON / JSON with Comments (json)

This allows you to specify the environment you wish to execute the end to end tests with the --configuration flag:

ng e2e // Execute using dev environment
ng e2e --configuration=mac // Execute using mac environment
ng e2e --configuration=production // Execute using production environmentCode language: Bash (bash)

That’s how you execute Angular end-to-end tests in different environments with the CLI.

Umut Esen

Software Engineer specialising in full-stack web application development.

Leave a Reply