Configuring Cypress To Run On Different Environments

  • We might not want to go through all of the previous builds and steps in the release pipeline/process again for a hotfix
  • The Development environment could already contain new features/work that may conflict with the hotfix and consequently prove harder to test

Setting up the Configuration Files

You might be using the cypress.json or a cypress.env.json file where your baseURL and environment variables are. What you want to do instead is setup a new directory within the Cypress directory which contains a JSON file for each environment and holds the environment variables and baseURL for that specific environment.

- ProjectFolder
-- cypress
--- configFiles
---- development.json
---- stage.json
---- production.json
-- fixtures
-- integration
--- specs
-- plugins
-- support
- package.json
- node.modules
- cypress.json

Example Environment Config Files:

development.json

Telling Cypress About the Config Files

Once you’ve setup the environment config’s, you need to tell Cypress about these files. The place to do this is in the index.js file within the plugins folder that is generated when you create a Cypress project. The index.js file is one of the first things that executes when you run or open Cypress.

  • getConfigurationbyFile, a function to retrieve files from the path that is specified
  • Using the Cypress Configuration API, the fileConfig environment variable is looked for and set to the file constant at line 20
  • If this environment variable fileConfig does not exist or is not specified, it will use the value of development instead using the OR (||) operator
  • The getConfigurationbyFile function is called and we specify the file as a parameter for this function

Setting up the Node Scripts

Within the package.json file, under the “scripts” node, we can create a number of scripts which contain different configFile values. Each script has a different value for the configFile environment variable, corresponding to the environment names.

--env [environmentVariableName]= value
npm run cy:stage
npm run cy:production

Dynamically Switching Configuration Files, CI/CD

This is namely for when you need to run tests on the pipeline across different environments. Unfortunately, this is not something that I can publicly demonstrate, especially as it may not particularly apply to the CI/CD service that you use. However, the objective is to:

  1. Have environment variable values for each environment persisted in the pipeline/CI files which have the exact same value as the name of the config file stored in the Cypress project.
  2. Fetch and pass these values down to a Cypress environment variable called fileConfig. To do this, you need add a prefix of CYPRESS_ to the environment variable. Cypress will automatically look for environment variables that have a prefix of CYPRESS_, more on Cypress environment variables here.
  3. Ultimately, what you want, is to set the fileConfig environment variable to the required value. So if your test suite is about to run on Development, you need to set CYPRESS_fileConfig = “development”. Once again, the getConfigurationbyFile function will read the value of this variable and use it to determine which environment configuration file to use. Once your build is deployed to Stage, you want to do the same but have the value of fileConfig be stage, which will run the Cypress configuration specified in the stage.json file.
  4. Alternatively, you can setup another Node script which is solely used in the pipeline and execute that script with an argument when you run Cypress in the pipeline

Results

Screenshots from my local machine running the demo project.

npm run cy:development
npm run cy:production

Cypress.json

Your cypress.json file should now only contain:

  • Environment variables that are shared/used across all environments
  • Command timeouts
  • Viewports width/height
  • Other Cypress options you want to use in every environment

Conclusion

Whether you need to configure your tests to run on each environment depends on your confidence in these tests and how much value they add by running on all environments. It might slow down your time to market, feedback loop and so on. It might also be completely overkill. This is up to yourself and the team you work with to decide, but the ability to very easily have Cypress run against Stage or Production on your machine locally without needing to adjust the set configs or baseURL’s is definitely great.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store