---
title: "Configure cypress to run tests in multiple environments"
description:
  "Do you want to configure cypress to run the tests in multiple application
  environments? This article will help you to configure them step-by-step."
canonical_url: "https://www.bigbinary.com/blog/cypress-environment-config"
markdown_url: "https://www.bigbinary.com/blog/cypress-environment-config.md"
---

# Configure cypress to run tests in multiple environments

Do you want to configure cypress to run the tests in multiple application
environments? This article will help you to configure them step-by-step.

- Author: Datt Dongare
- Published: March 30, 2022
- Categories: Misc

When we write tests, we want to run them in the 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 the 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 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.

```javascript
// 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
  }
}
```

```javascript
// 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
  }
}
```

```javascript
// 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.

```javascript
// 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 the 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`.

```javascript
// 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 higher 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 a 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.

## Links

- [Human page](https://www.bigbinary.com/blog/cypress-environment-config)