如何运行 Protractor e2e 测试不同环境变量 (Angular 6)

Question

在 e2e 测试中，我希望有类似于 Angular 应用程序中的环境变量。看起来 e2e 测试项目构建器 "builder": "@angular-devkit/build-angular:protractor" 不支持文件替换（与网络应用程序构建器不同）：

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

所以使用 Angular CLI ng e2e 命令我可以切换配置（或 angular.json 中的项目）并且在项目配置中我可以指定不同的 Protractor 配置文件 protractor.conf.js。我的问题是：如何在 e2e 中测试任何在配置文件或任何其他文件中不同的变量，类似于应用程序中的 environment.ts 文件？

Answer 1

我的回答有几个部分，所以我会尽量简短。

对于环境变量，我使用了一个名为 node-env-run 的包。你可以找到它here。它真的很容易设置，并允许您为本地开发人员动态更改环境变量。您只需在运行从中使用 key/value 对列表命令的目录中设置一个 .env 文件。然后你运行你的脚本是这样的：

nodenv --exec "ng e2e"

Nodenv 将获取该文件中的变量并为当前测试运行创建环境变量。它们都在会话结束时被丢弃。它非常适合本地开发人员。从那里我只是在我的构建工具中使用与我的 .env 文件相同的环境变量名称设置环境变量。然后我在量角器配置的 params 对象中引用它们。一个很好的例子是数据库凭据之类的东西，它可能会根据您运行ning 测试所针对的环境而有所不同。

params: {
    sql: {
        host: process.env.DB_HOST,
        dbname: process.env.DB_NAME,
        user: process.env.SQL_SERVER_USER,
        password: process.env.SQL_SERVER_PASSWORD
    }
}

对于你问题的第二部分，如何实现不同的配置文件，我只是使用Object.assign(defaultConf, environmentConf)来完成这个。 environmentConf 中的属性将覆盖 defaultConf 中的相同属性。

我通常会设置一个默认配置，其中包含所有配置中通用的所有属性。在环境配置中，我只放置了每个环境独有的属性。例如 baseUrl。这是我的意思的一个例子。

默认配置

module.exports = {
    allScriptsTimeout: 11000, // Timeout of each script
    specs: [
      '../specs/**/*.ts'
    ],
    capabilities: {
      browserName: 'chrome',
      acceptInsecureCerts : true,
      chromeOptions: {
        args: [
          '--start-maximized'
        ],
        prefs: {
          download: {
            prompt_for_download: false,
            default_directory: path.resolve(__dirname, '../downloads/')
          }
        }
      }
    },
    framework: 'jasmine', 
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000,
      print: function() {}
    },
    SELENIUM_PROMISE_MANAGER: false,
    onPrepare: function() {
        // ...
    },
    params: { // params object... },
    suites: { // suites listed here... }
}

本地开发配置

module.exports = {
    baseUrl: 'http://localhost:8082',
    directConnect: true
}

QA 环境配置

module.exports = {
    baseUrl: 'https://my-app:7443',
    seleniumAddress: 'http://hub:4444/wd/hub',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 60000,
        print: function() {}
    }
}

如您所见，我正在为本地开发人员使用 directConnect，但在将应用程序部署到给定环境后使用 selenium hub。我用量角器处理这个问题的方法是传入一个命令行标志 --params.env=localhost。然后在量角器配置中我得到这个参数的值并根据它选择配置的样子。鉴于上面的例子，它看起来像这样。

从命令行我会运行类似于 nodenv --exec "ng e2e -- --params.env=localhost" 或 nodenv --exec "protractor conf.js --params.env=release" 的东西。这是 conf.js 的样子：

const env = process.argv.filter(arg => {
  return arg.includes('--params.env');
})[0];

let isLocal = false;
let isRelease = false;

if (env) {
  isLocal = env.includes('localhost');  
  isRelease = env.includes('release');
}

const defaultConf = require('./default.conf');
const localConf = require('./local.conf');
const qaEnvConf = require('./qa.conf');
const releaseConf = require('./release.conf');

let protractorConf = {};

// run tests against localhost
if (isLocal) {
  protractorConf = Object.assign(defaultConf, localConf);
}

if (isRelease) {
  protractorConf = Object.assign(defaultConf, releaseConf);
}

if(!isLocal && !isRelease) {
    protractorConf = Object.assign(defaultConf, qaEnvConf);
}

exports.config = protractorConf;

我确定可能有更好的方法来完成此操作，但这样做可以让我使用不同的配置而无需安装另一个第 3 方依赖项。此外，如果您想使用发布配置，但运行针对暂存或生产环境的测试，这很简单。只需从命令行传入 baseUrl ，它就会覆盖配置中的任何内容。 nodenv --exec "ng e2e -- --baseUrl=https://my-url/ --params.env=release"

Answer 2

所以我最终使用 protractor.conf.js 作为环境变量。主要优点 - 无需使用任何第三方库。
1. 为每个环境创建一个 Protractor 配置文件。在 params 中指定您的变量：

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

第二个 Protractor 配置文件可以使用第一个作为默认值并且只包含覆盖（以避免配置中的重复）：

'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);

在 angular.json 中使用 configurations 用于 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"
          },
          <b>"configurations":</b> {
            <b>"dev"</b>: {
              "protractorConfig": "apps/myproject-e2e/<b>protractor-dev.conf.js</b>",
              "devServerTarget": "",
              "baseUrl": "https://mywebsite.com"
            },

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

ng e2e myproject-e2e -c dev

你也可以在命令行中覆盖一些参数：

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

4。最后在 e2e 测试本身中，您可以使用配置中的任何参数：

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

如何运行 Protractor e2e 测试不同环境变量 (Angular 6)

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

protractor

e2e-testing

angular

angular6

如何 运行 Protractor e2e 测试不同环境变量 (Angular 6)

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

protractor

e2e-testing

angular

angular6

如何运行 Protractor e2e 测试不同环境变量 (Angular 6)