How to run Protractor e2e tests with different environment variables (Angular 6)

Question

In e2e test I want to have environment variable similar to the one as in Angular app. Looks like e2e test project builder "builder": "@angular-devkit/build-angular:protractor" does not support file replacements (unlike builder for web app):

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

So using Angular CLI ng e2e command I can switch configurations (or projects in angular.json) and in project configuration I can specify different Protractor configuration files protractor.conf.js. My question is: how can I get in e2e test any variable which will be different in configuration files or any other file, similar to the environment.ts file(s) in the app?

Answer 1

因此，我最后使用protractor.conf.js了环境变量。主要优点-无需使用任何第三方lib。
1.为每个环境创建一个量角器配置文件。在params指定变量中：

'protractor.conf.js'
...
  params: {
    postDeploy: false,
    credentials: {
      username: 'Test',
      password: 'Password'
    },
...

第二个量角器配置文件可以将第一个量角器配置文件用作默认文件，并且仅包含替代（以避免重复配置）：

'protractor-dev.conf.js'

const defaultConfig = require('./protractor.conf');
let devConfig = {
  params: {
    postDeploy: true,
    credentials: {
      username: 'DevTest',
      password: 'DevPassword'
    }
  }
};
exports.config = Object.assign(defaultConfig.config, devConfig);

2. 使用configurations中angular.json的E2E项目：

...
    "myproject-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "apps/myproject-e2e/protractor.conf.js",
            "devServerTarget": "myproject:serve"
          },
          "configurations": {
            "dev": {
              "protractorConfig": "apps/myproject-e2e/protractor-dev.conf.js",
              "devServerTarget": "",
              "baseUrl": "https://mywebsite.com"
            },

3. 使用-c或--configuration参数在命令行中切换配置

ng e2e myproject-e2e -c dev

您还可以在命令行中覆盖一些参数：

ng e2e myproject-e2e -c dev --baseUrl=https://mywebsite1.com

4.最后，在e2e测试中，您可以使用config中的任何参数：

browser.params.postDeploy
browser.params.credentials.username