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