How to run Protractor e2e tests using different Angular environment variables

Question

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?

No, unfortunately not. I end up with modifying the default environment which I use on CI for the time being, but that is not the solution I was looking for. — Serhii Shushliapin, Aug 29 '17 at 14:48
What I did is that I created `config` file under `e2e` folder, which accepts the `baseUrl` as params. I am passing this param if i need test in production env else local env will considered. But need to run the test via global protractor and not through ng e2e. Again not good solution, To me its work around. — Sameer K, Aug 29 '17 at 15:22

Mubramaj · Accepted Answer · 2018-06-13T16:11:50.513

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
    }

Thanks for writing this up. For those trying to figure it out, I just wrote up a more explicit version highlighting how this all works in the angular.json file https://medium.com/building-the-stack/e2e-testing-with-env-variables-with-protractor-and-angular-6-e3e593f7ad58 — Vijay, Jun 15 '18 at 07:57

score 5 · Answer 2 · answered Aug 31 '17 at 01:13

5

I was able to successfully use a different environment by adding it to the .angular-cli.json

  "environments": {
    "dev": "environments/environment.ts",
    "test": "environments/environment.test.ts",
    "prod": "environments/environment.prod.ts"
  }

then calling

ng e2e --environment test

answered Aug 31 '17 at 01:13

Jozzhart

1,312
11
9

9

The environments configurations like you mentioned already exist under app section, but i am unable to access the environment variables in spec OR in protractor config file. So could you please tell how did you accessed the environment variables?? – Sameer K Sep 04 '17 at 10:48

score 3 · Answer 3 · answered May 07 '18 at 20:05

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.

Thanks for the solution, you made my issue happy. – Efe May 16 '18 at 06:59 — Efe, May 16 '18 at 06:59

score 0 · Answer 4 · answered Feb 09 '21 at 23:41

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)
}

How to run Protractor e2e tests using different Angular environment variables

4 Answers4