如何从端到端测试中读取环境文件？

Question

这是我的 Angular 应用程序的结构：

MyApplication
  apps
      - app1
          - src
              - app
              - assets
              - environments //*****USE THIS FILES ****

      - app1-e2e
          - src
              - fixtures
              - integration
              - plugins
              - supports

我正在使用 Cypress 进行 e2e 测试。例如，我想使用基础 URL，因此它取决于环境（本地、开发、...）：

it('should redirect to release', () => {
  cy.get('[data-testid="my-link"]').click();
  cy.url().should('include', 'http://localhost.homedepot.com:4200/');
});

如果是开发机就localhost.homedepot.com:4200。但是，如果是开发机器，它将是 myapplication-np.mycompany.com，依此类推。

我们在环境文件中已经有了所有这些信息。我应该将它们复制到 e2e 文件夹中，还是有办法从环境文件中读取它们。

Answer 1

我想到了一种在需要时快速切换环境的方法，希望对您有所帮助。

要使用它，请将这些行添加到您的 cypress/plugins/index.js

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // quick env switch
  if (config.env.target) {
      const { baseUrl, ...currentEnv } = config.env[config.env.target];
      config.baseUrl = baseUrl;
      config.env = { ...config.env, ...currentEnv }
  }

  return config;

}

现在您需要设置目标环境并像这样配置您的环境：

在你的cypress.json中：

  ...
  "env": {
    "target": "dev",
    "dev": {
      "baseUrl": "http://www.myappurl-dev.com",
      "apiUrl": "http://www.myapiurl-dev.com",
      "username": "admin_dev"
    },
    "test": {
      "baseUrl": "http://www.myappurl-test.com",
      "apiUrl": "http://www.myapiurl-test.com",
      "username": "admin_test"
    }
  },
  ...

您还可以在您的 cypress.env.json 中设置一个环境，它应该在您的 .gitignore 中，这样它就不会被推送到您的远程仓库。

cypress.env.json:

{
  "target": "local",
  "local": {
    "baseUrl": "http://localhost:4000",
    "apiUrl": "http://localhost:22742",
    "username": "admin_local"
}

最后，您需要做的就是在 cypress.json 或 cypress.env.json 中更改 target 以在您的环境之间快速切换。请记住，cypress.env.json 中设置的任何值都会覆盖 cypress.json 中设置的值。

然后在你的代码中，你会像这样使用它：

it('should redirect to release', () => {
  cy.get('[data-testid="my-link"]').click();
  cy.url().should('include', Cypress.config('baseUrl');
});

编辑#1
如果您的环境配置已经存在于某处：
从 cypress/plugins/index.js here 查看如何设置环境值。他们展示了如何获取您的 .env，但您也可以阅读 .config 文件。

编辑#2：
我能够使用 fs 和 xml-js:

从 cypress/plugins/index.js 读取我的 root/src/web.config

const convert = require('xml-js');
const fs = require('fs');

module.exports = (on, config) => {
    const xmlAngularConfig = fs.readFileSync('../path/to/your/config/file', 'utf8');
    const jsonAngularConfig = convert.xml2json(xmlAngularConfig, { compact: true, spaces: 4 });

    // Then you can add any value of jsonAngularConfig to cypress config
    config.baseUrl = jsonAngularConfig.url;

   // Don't forget to return config
   return config;
}

如何从端到端测试中读取环境文件？

How to read environment files from e2e tests?

angular

angular-e2e

cypress