How to run Protractor e2e tests using different Angular environment variables

28
votes

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?

4
angularprotractorenvironment-variablese2e-testing
Have you found a solution for this? If so please share.. – Sameer K
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
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

4 Answers

17
votes

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
    }
5
votes

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
3
votes

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.

0
votes

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