How to setup environments for Cypress.io

Question

I am taking a swing at setting up a test suite for my company's web app. We use four environments at the time (Production, Regression, Staging, Development). I have environment variables setup in my cypress.json file but I would like to be able to switch my environment for example from regression to development and force cypress to change the baseURL to my new environment as well as point to a different cypress.json file that has development variables. The documentation around environments on cypress.io is a little confusing to me and I'm not sure where to start.

Answer 1

I have cypress running in different environments using package.json's scripts. You can pass in env vars before the cypress command. It would look something like:

"scripts": {
  "cypress:open:dev": "CYPRESS_BASE_URL=http://localhost:3000 cypress open",
  "cypress:open:prod": "CYPRESS_BASE_URL=http://mycompanydomain.com cypress open",
  "cypress:run:dev": "CYPRESS_BASE_URL=http://localhost:3000 cypress run",
  "cypress:run:prod": "CYPRESS_BASE_URL=http://mycompanydomain.com cypress run",
}

If you want to make 4 separate cypress.json files instead, you could have them all named according to environment and when you run an npm script that corresponds with that environment just copy it to be the main cypress.json when you run the tests.

Files: 
./cypress.dev.json
./cypress.prod.json
./cypress.staging.json
./cypress.regression.json

npm scripts:
"scripts": {
    "cypress:run:dev": "cp ./cypress.dev.json ./cypress.json; cypress run;"
} 

Update:

I wrote this while cypress was still in beta. Using the config flag seems like a cleaner option:

https://docs.cypress.io/guides/guides/command-line.html#cypress-run

    npm scripts:
    "scripts": {
        "cypress:run:dev": "cypress run -c cypress.dev.json;"
    } 

Answer 2

You can pass the config file to be used with --config-file param as:

Syntax:-

cypress open --config-file <config-file-name>

If you have different environment files then it should be as:

  "scripts": {
    "cypress:open:prod": "cypress open --config-file production-config.json",
    "cypress:open:stag": "cypress open --config-file staging-config.json",
  },

If you see above commands we are telling the cypress to use production-config.json file for prod environment and similarly staging-config.json for stag environment.

Answer 3

In latest version of Cypress (10 and above ), you can do it by 2 ways:

1). Creating different config files for each environment Eg: dev.config.js, stage.config.js and then create a script in package.json with flag "--config -file <file_name>"..Example: "npx cypress run --config -file dev.config.js"

2). Creating cypress.env.json and adding urls or keys for each environment.

Here is the detailed video - https://www.youtube.com/watch?v=ZW43ZM1yMuM