Angular2 - Executing e2e tests in different environments

Question

I am new to Protractor. I have developed few tests cases to accomplish the end to end testing. These test cases works fine in all 3 different environments that we have : dev, testing and production.

But I need to change Angular application URL in test cases with respect the environment in which testing needs to be done (as the URL differs from environment to environment).

I am using Angular CLI command ng e2e to run the test. Now my questions are

1) Is it possible to pass params ng e2e, so that based on params, URL can be set dynamically inside test cases ?

2) Is it necessary to install protractor globally, Since Angular CLI creates the angular application with protractor under node_modules?

In my project set up, Protractor version is 5.1.2 and Angular CLI version is 1.2.0.

Below is Protract configuration

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
     './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
        project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
};

I tried couple of things like adding params:[env:dev] and passed the parameter in command line as ng e2e params.env=test, But I always get the default values and not the values passed from command line.

I also tried @cnishina answer, but console.log of process.env does not have needed details.

Summersummerhouse

Answer 1

Switching between environments using environment variables

My recommendation is to try to use environment variables and switch between environments in the Protractor configuration file. You could export TEST_ENV=dev and then have conditionals for the browser.baseUrl

Protractor config file

var baseUrl = '';
if (process.env.TEST_ENV === 'dev') {
  baseUrl = 'http://devurl';
} else if (process.env.TEST_ENV === 'stage') {
  baseUrl = 'http://stageurl';
} else {
  baseUrl = 'http://produrl';
}

exports.config = {
  baseUrl: baseUrl
}

For a better concrete example of a configuration file using process.env, see the Testing Angular Applications, chapter 11 GitHub repo.

You could also change baseUrl parameter inline; however, if you are changing multiple variables based on the testing environment, I would suggest using environment variables:

ng e2e {protractor config file} --baseUrl='http://devurl'

Protractor global install?

Protractor does not need to be installed globally. The recommendation is to use the version installed locally from your node_modules directory. This will provide other developers repeatable steps using the same Protractor dependencies to run the e2e tests. Alternatively, if you are using the globally installed version, you will now have to instruct other developers to use a specific Protractor version.

Denning

Got little confused, when you say export TEST_ENV=dev. Which file will have this export statement?? – Summersummerhouse

and also how different environment value (dev, stage) can be set to TEST_ENV? – Summersummerhouse

I tried command ng e2e TEST_ENV=dev and ng e2e protractor.conf.js TEST_ENV=testing. are these right commands ? I do not see key TEST_ENV when i console.log process.env. I am using protractor version 5.1.2 and angular CLI version 1.2.0. Please help... – Summersummerhouse

in bash: export TEST_ENV=dev, then you can run ng e2e protractor.conf.js. Alternatively you could override with flags for a field in the Protractor configuration file like the baseUrl. So that's why the alternative option is to run ng e2e protractor.conf.js --baseUrl='http://devurl'. There is no way to set ng e2e protractor.conf.js TEST_ENV=testing – Denning

@cnishina The link you provided is not working anymore. – Roehm

Yup. It looks like it is not working. Updated with working link. – Denning

Answer 2

I believe that you can create an environment.test.ts that contains the baseUrl that you want for the test environement and then you can run the test from the command-line like so:

ng e2e --environment test

Babul

Afaik that only works in the application itself but not in e2e-specs. – Roehm

Answer 3

     "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js"
          },
          "configurations": {
            "production": {
              "devServerTarget": "project:serve:production"
            },
            "mac": {
              "devServerTarget": "project:serve:mac"
            }
          }
        }

Then you can switch between environments using the --configuration flag:

ng e2e --configuration=production
ng e2e --configuration=mac

Limiting