Cypress plugin to handle multi environment

Easily manage and streamline your Cypress test scripts across multiple environments with the cypress-env npm library. This lightweight utility simplifies the process of handling different environments (such as test, staging, and production) by providing a environment-specific settings in your Cypress tests.

Install

$ npm install cypress-env --save-dev

or as a global module

$ npm install -g cypress-env

Configuration

Code in cypress.config.js:

In your cypress.config.js file:

module.exports = defineConfig({
 e2e: {
  setupNodeEvents(on, config) {
   require('cypress-env')(on, config, __dirname)
  },
 },
})

Create the env.config folder:

Then configure a folder named `env.config' with your environments.json files:

├── cypress
│   ├── e2e
│   ├── fixtures
│   └── support
├── cypress.config.js
├── env.config
│   ├── test.json
│   ├── stage.json
│   └── prod.json
├── node_modules
├── README.md
├── package-lock.json
├── package.json
└── .gitignore

Add your environment.json files:

JSON files must respect this syntax:

//environment.json
{
  "baseUrl": "https://www.google.com",
  "specPattern": "cypress/e2e/**/**.js",
  "excludeSpecPattern": "cypress/e2e/**/toExclude.js",
  "supportFile": "cypress/support/customName.js",
  "env": {
    "var1": "value1",
    "var2": "value2",
    "var3": "value3",
    "envName": "environment"
  }
}

Parameter	Mandatory	Overwrites value in cypress.config.js	Notes
baseUrl	FALSE	TRUE	Overwrites value in cypress.config.js
specPattern	FALSE	TRUE	Overwrites value in cypress.config.js
excludeSpecPattern	FALSE	TRUE	Overwrites value in cypress.config.js
supportFile	FALSE	TRUE	Needs the parameters "supportFile" in the main e2e or component object set to false
env	FALSE	FALSE	OBJ added to values in cypress.config.js

Open or run cypress with the correct environment variables:

Open cypress and inject the envName variables:

npx cypress open -e envName=test

or run cypress and inject the envName variables:

npx cypress run -e envName=test

Results example

Correct configuration

====================================================================================================

Starting plugin: cypress-env

Extracting local configurations from: "path/to/environment.json"

 - baseUrl: "https://www.google.com"
 - specPattern: "cypress/e2e/**/**.js"
 - excludeSpecPattern: "cypress/e2e/**/toExclude.js",
 - supportFile: "cypress/support/customName.js",
 - env: "{
    "var1": "value1",
    "var2": "value2",
    "var3": "value3",
    "envName": "test"
}"

√ Configurations loaded correctly for the environment: < TEST >

====================================================================================================

No configuration specified

====================================================================================================

Starting plugin: cypress-env

√ No environment configuration specified, using basic configuration!

====================================================================================================

Wrong configuration (missing __dirname)

====================================================================================================

Starting plugin: cypress-env

ConfigurationError!
You must specify the "__dirname" element in the config, change the require to:
require("cypress-env")(on, config, __dirname)

====================================================================================================

Little tip for you

In your package.json file create a script like this:

//package.json
{
  "scripts": {
    "cy:test": "npx cypress open -e envName=test",
    "cy:stage": "npx cypress open -e envName=stage",
    "cy:prod": "npx cypress open -e envName=prod"
  }
}

So you'll only have to type this command to open cypress in the correct environment:

npm run cy:test

Compatibility with cypress-aws-secrets-manager

"cypress-aws-secrets-manager" is a plugin that allows a secret stored in the AWS secret manager to be loaded into cypress as an environment variable. To make life easier I added a new key inside ENV: AWS_SECRET_MANAGER_CONFIG.

Parameter	Mandatory	Overwrites value in cypress.config.js	Notes
AWS_SECRET_MANAGER_CONFIG	FALSE	TRUE	OBJ used by cypress-aws-secrets-manager

The secret manager plugin will automatically handle this obj to recover the secret archived on AWS secret manager.

//environment.json
{
  "baseUrl": "https://www.google.com",
  "specPattern": "cypress/e2e/**/**.js",
  "excludeSpecPattern": "cypress/e2e/**/toExclude.js",
  "supportFile": "cypress/support/customName.js",
  "env": {
    "var1": "value1",
    "var2": "value2",
    "var3": "value3",
    "envName": "test",
    "AWS_SECRET_MANAGER_CONFIG": {
      "secretName": "...",
      "profile": "...",
      "region": "..."
    }
  }
}

THE JOB IS DONE!

Happy testing to everyone!

ALEC-JS

🙌 Donate to support my work & further development! 🙌