How to run Protractor e2e tests using different Angular environment variables

user_4207332 0
Viewed 10725

I use Angular environment variables to configure API endpoints:

.\src\environments:
    environment.ts
    environment.test.ts
    environment.prod.ts

The environtment files contain settings like the following which are different for local dev and CI servers:

export const environment = {
  ...
  apiUrl: "https://api.sample.com"
};

That works fine when I need to build or start the application. I can simply specify the environment parameter:

ng serve --environment=test

... but it appeared that it's impossible to set a specific environment when running e2e Protractor tests. The following command simply ignores the environment (which seems to be expected according to this comment). The default environment is always used:

ng e2e --environment=test    // same as `ng e2e`

Are there any other ways to run the tests using a specific environment?

protractor e2e-testing angular environment-variables
4 Answers

With the new Angular 6 angular.json config file: I was able to use my file environment.test.ts on my e2e tests. I had to create a new architect on my project, I called it serve-e2e.

    "serve-e2e": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "q-desktop-v2:build:test"
      }
    }

My build:test config uses the "fileReplacements" configurations : 

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

Then in my project-e2e I use my customized "serve-e2e" option for the devServerTarget:

      "options": {
        "protractorConfig": "./protractor.conf.js",
        "devServerTarget": "q-desktop-v2:serve-e2e"
      }

This makes it easy to add or ignore specific code if the app is running on test environment : 

    if (!environment.test) {
     // do something
    }
user_71905180

Angular 6 removed support for the --environment option. For build or serve you can just switch to ng build --configuration test or ng serve --configuration test. However, at least in my project, the Angular upgrade actually created a whole other project configuration named <myproject>-e2e in my angular.json file.

Inside, it might look something like this.

"myproject-e2e": {
  "root": "",
  "sourceRoot": "",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "./protractor.conf.js",
        "devServerTarget": "jglite:serve"
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "e2e/tsconfig.e2e.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
}

The "devServerTarget": "jglite:serve" line is pointing the configuration at my default serve configuration.

In my case, I want to always run my e2e tests with my dev configuration, so I just changed this line to "devServerTarget": "jglite:serve:dev", and then I could run the environment I needed by just calling ng e2e.

user_3188930

You can parameterize your configs based on a environment variable

Protractor is a node process. Any node process can be started with custom node variables. Not sure how it's done in windows (please comment if you know how) but for mac and any linux/unix OS you can

Start protractor with environment variable like this

MY_VAR=Dev protractor tmp/config.js

And then it will be available anywhere within your process and even in your config

if (process.env.MY_VAR.toLowerCase() === 'dev') {
  envFile = require(./dev.json)
}
user_91501460
Related