Nx e2e cypress runner: values from cypress.env.json entries not overwriting same entries in cypress.json env object

Question

I have an Nx powered angular project and am facing an issue where values supplied in a cypress.env.json file do not override corresponding entries in the env object of the cypress.json configuration file

This is the first time I have attempted this with an Nx powered project, in a non Nx angular project this behaviour works out of the box with Cypress.

Steps to Reproduce

In an e2e application's cypress.json file, add an env object property with an empty value assigned to a some variable name property:

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

Create a cypress.env.json file at the same location as cypress.json with a key matching the env variable name just added to cypress.json:

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

Now create a simple test suite to assert that the env variable is equal to the value in the 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');
  });
});

When running this suite via the nx e2e runner (nx run app-name:e2e) an assertion error will be thrown:

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

      -'abc'
      +'xyz'

I have verified the behaviour works as expected with a non Nx angular\cypress project of mine - its worth noting the cypress.env.json in my other project is at the root of the project along with the cypress.json file.

I tried locating the cypress.env.json file in my Nx project at the root, instead of inside apps/my-app-e2e/src next to the cypress.json, but this made no difference.

Am I misunderstanding how to achieve this via Nx?

Project dependencies are as follows:

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

I created a basic nx workspace, added your config and test and it worked ok.

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

• node v 15.1.0

• npm v 7.5.6

• nx e2e testng-e2e --watch

Answer 2

You can do it in 3 Different Ways:

Method 1. Configuring Cypress To Run On Different Environments Using baseUrl in cypress.json

Method 2: Setup Multiple Environments in Cypress With Separate Cypress Configuration Files for Each Environment

Method 3: Run Your Cypress Tests in Multiple Environments With Cypress Environment Variable and Custom Utility Class

From Project Folder Root > Navigate to cypress folder > open support folder.

Create a new Typescript file (alternatively you can create a Javascript file as well) with name utility.ts.

//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";
  }
}

Create a Spec File and Use the Environment URL We have created our own utility function, which will return the environment-specific URLs. Now, let’s create a Cypress spec file.

In the Spec file, you can call the getBaseUrl() function by importing the Utility class like below

//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
});
});

Run your Cypress test on the production environment using the below command:

npx cypress run --env ENV="production"

Run your Cypress test on the staging environment using the below command:

npx cypress run  --env ENV="staging"

Courtesy:https://softans.com/configure-multiple-environments-in-cypress/