Nx e2e cypress runner：来自 cypress.env.json 条目的值不会覆盖 cypress.json env 对象中的相同条目

Question

我有一个 Nx 驱动的 Angular 项目，并且面临一个问题，即在 cypress.env.json 文件中提供的值不会覆盖 cypress.json 配置文件的 env 对象中的相应条目

这是我第一次尝试在 Nx 驱动的项目中进行此操作，在非 Nx 角度项目中，这种行为在赛普拉斯开箱即用。

复制步骤

在 e2e 应用程序的 cypress.json 文件中，添加一个 env 对象属性，并将一个空值分配给某个变量名称属性：

// cypress.json
"env": {
  "MY_VAR": "abc"
}

在与 cypress.json 相同的位置创建一个 cypress.env.json 文件，其键与刚刚添加到 cypress.json 的 env 变量名称匹配：

// cypress.env.json
{
  "MY_VAR": "xyz"
}

现在创建一个简单的测试套件来断言 env 变量等于 cypress.env.json 中的值

// create a test spec containing this
describe('When reading the MY_VAR env variable', () => {
  it('should match the value in our cypress.env.json file', () => {
    cy.log('MY_VAR = ' + Cypress.env('MY_VAR'))
    expect(Cypress.env('MY_VAR')).to.eq('xyz');
  });
});

通过 nx e2e 运行器 (nx run app-name:e2e) 运行此套件时，将引发断言错误：

AssertionError: expected 'abc' to equal 'xyz'
      + expected - actual

      -'abc'
      +'xyz'

我已经验证了我的非 Nx angular\cypress 项目的行为按预期工作 - 值得注意的是，我的另一个项目中的 cypress.env.json 与 cypress.json 文件一起位于项目的根目录中。

我尝试在我的 Nx 项目的根目录中找到 cypress.env.json 文件，而不是在 cypress.json 旁边的 apps/my-app-e2e/src 中，但这并没有什么区别。

我是否误解了如何通过 Nx 实现这一目标？

项目依赖如下：

Node : 12.16.3
  OS   : darwin x64
  npm  : 6.14.5

  nx : 12.9.0
  @nrwl/angular : 12.9.0
  @nrwl/cli : 12.9.0
  @nrwl/cypress : 12.9.0
  @nrwl/devkit : 12.9.0
  @nrwl/eslint-plugin-nx : 12.9.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.9.0
  @nrwl/linter : 12.9.0
  @nrwl/nest : 12.9.0
  @nrwl/next : Not Found
  @nrwl/node : 12.9.0
  @nrwl/nx-cloud : 12.3.13
  @nrwl/react : Not Found
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.9.0
  @nrwl/web : Not Found
  @nrwl/workspace : 12.9.0
  @nrwl/storybook : 12.9.0
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

Answer 1

我创建了一个基本的 nx 工作区，添加了您的配置和测试，它工作正常。

• npx create-nx-workspace --preset=angular

• 节点 v 15.1.0

• npm v 7.5.6

• nx e2e testng-e2e --watch

Answer 2

您可以通过 3 种不同的方式做到这一点：

方法 1. 使用 cypress.json 中的 baseUrl 配置 Cypress 在不同环境中运行

方法 2： 在 Cypress 中设置多个环境，为每个环境使用单独的 Cypress 配置文件

方法 3： 使用赛普拉斯环境变量和自定义实用程序类在多个环境中运行赛普拉斯测试

从Project文件夹根目录>导航到cypress文件夹>打开support文件夹。

创建一个名为 utility.ts 的新 Typescript 文件（或者您也可以创建一个 Javascript 文件）。

//utility.ts
export class Utility {
getBaseUrl() {
let envi = Cypress.env('ENV'); //Get the value of evnironment variable i.e ENV
if (envi == 'production') //Check the value
return "https://www.proudction-website.com"; //return desired url
else if (envi == 'staging')
return "https://staging-website.com";
else if (envi == 'qa')
return "http://qa-website.com";
  }
}

创建规范文件并使用环境 URL 我们创建了自己的实用函数，它将返回特定于环境的 URL。现在，让我们创建一个 Cypress 规范文件。

在 Spec 文件中，您可以通过导入 Utility 类来调用 getBaseUrl() 函数，如下所示

//my.spec.ts
​
//Import Utility from support folder
import { Utility } from "../../../support/utility"
​
//Call getBaseUrl() to get environment specific url value
const url = new Utility().getBaseUrl();
​
describe('Verify Environment Config' + url, () => {
it('Verify Environment', () => {
cy.visit(url); //use url variable
});
});

使用以下命令在生产环境中运行 Cypress 测试：

npx cypress run --env ENV="production"

使用以下命令在暂存环境中运行 Cypress 测试：

npx cypress run  --env ENV="staging"

礼貌：https://softans.com/configure-multiple-environments-in-cypress/