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

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

Example Environment Config Files:

Telling Cypress About the Config Files

  • 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

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

Dynamically Switching Configuration Files, CI/CD

  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

npm run cy:development
npm run cy:production

Cypress.json

  • 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

--

--

--

Software Developer in Test

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Doing Agile for Research

Key Principles for a Successful Salesforce Implementation Part III: Governance

What can open source do for media development?

Some Notes About Core Data

Matters Lab launches collaboration with Meson Network

Hot Tip Tuesday: Raindrop bookmark manager

Build fault tolerant applications with Cassandra API for Azure Cosmos DB

Service warranty Information as well as Procedures ConcerningBeds. https://t.co/Ku5texUE1o

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
Ahmed Alsaab

Ahmed Alsaab

Software Developer in Test

More from Medium

Automation Testing with Playwright and Java Script — Configuration

How to setup Cypress 10.x.x with Cucumber and Typescript

API testing with Playwright & odottaa

Most used basic Cypress Commands — Part One