Configure cypress to run tests in multiple environments

When we write tests, we want to run them in local environment first. There are few reasons for this. We need to add data-cy, verify and run the tests. Also, we need to make sure that tests are running fine on local/development environment before running them in test/staging environment. Another case might be the one where we need to set the CI pipeline to execute in different environments.

In such scenarios, the baseUrl will be different in both the environments. But cypress allows us to configure baseUrl only once in cypress.json . Then, how do we configure baseUrl specific for each of the environments? In this blog, we will see how to configure cypress step by step so that we can run cypress tests in multiple environments.

1. Add environment specific configuration

To configure cypress for different environments, we can follow the two simple steps.

1. Create config folder in cypress.
2. Create separate files for each of the environments.

// cypress/config/cypress.development.json

{
  "baseUrl": "https://localhost:9006",
  "env": {
    "environment": "development"
  },
  "execTimeout": 18000,
  "defaultCommandTimeout": 300000,
  "requestTimeout": 10000,
  "pageLoadTimeout": 30000,
  "responseTimeout": 10000,
  "viewportWidth": 1200,
  "viewportHeight": 1200,
  "videoUploadOnPasses": false,
  "retries": {
    "runMode": 1,
    "openMode": 2
  }
}

// cypress/config/cypress.test.json

{
  "baseUrl": "https://test.example.com",
  "env": {
    "environment": "test"
  },
  "execTimeout": 300000,
  "defaultCommandTimeout": 60000,
  "requestTimeout": 20000,
  "pageLoadTimeout": 60000,
  "responseTimeout": 20000,
  "viewportWidth": 1200,
  "viewportHeight": 1200,
  "videoUploadOnPasses": true,
  "retries": {
    "runMode": 2,
    "openMode": 1
  }
}

// cypress/config/cypress.production.json

{
  "baseUrl": "https://live.example.com",
  "env": {
    "environment": "production"
  },
  "execTimeout": 300000,
  "defaultCommandTimeout": 60000,
  "requestTimeout": 20000,
  "pageLoadTimeout": 60000,
  "responseTimeout": 20000,
  "viewportWidth": 1200,
  "viewportHeight": 1200,
  "videoUploadOnPasses": true,
  "retries": {
    "runMode": 2,
    "openMode": 1
  }
}

2. Initialize config files

After adding config folder, we need to tell cypress about those config files. We can do that by updating plugins/index.js with following code. This file gets executed after we start the cypress server.

// cypress/plugins/index.js

const fs = require("fs-extra");
const path = require("path");

const fetchConfigurationByFile = file => {
  const pathOfConfigurationFile = `config/cypress.${file}.json`;

  return (
    file && fs.readJson(path.join(__dirname, "../", pathOfConfigurationFile))
  );
};

module.exports = (on, config) => {
  const environment = config.env.configFile || "development";
  const configurationForEnvironment = fetchConfigurationByFile(environment);

  return configurationForEnvironment || config;
};

In the above code, Cypress loads the configuration file based on the environment. When we run Cypress we can pass environment variables. In this case, we need to pass configFile as an environment variable. If we don't pass configFile, by default Cypress will consider development as the current environment.

3. Setup scripts

Cypress can accept command line arguments. We can set environment by passing these arguments in the cypress run or cypress open command e.g. cypress open --env configFile=test. This command looks lengthy. Also, sometimes we need to pass more command line arguments along with configFile. We can create short and handy commands by configuring the package.json.

For example: yarn run cy:open:dev.

// cypress/package.json

"cy:open:dev": "cypress open --env configFile=development",
"cy:open:dev:chrome": "cypress open --browser chrome --env configFile=development",
"cy:run:dev": "cypress run --env configFile=development",
"cy:open:staging": "cypress open --env configFile=test",
"cy:run:staging": "cypress run --env configFile=test",

4. Precedence of configuration

By default, we have cypress.json in cypress where some config can be added. The precedence of configuration is high for the files in the config folder than the cypress.json. So if we have some key execTimeout defined in both cypress.json and cypress.test.json. The value of execTimeout in the cypress.test.json will be considered.

Generally, the rule of thumb is that common configuration for all the environments can be kept in the cypress.json. The environment specific config can be kept in config/ folder.

Conclusion

We saw that how we can configure the cypress in multiple environments. In this way we can run Cypress for each environment without much hassle. This definitely helps us in running Cypress in both local as well as in the production environment.