How To Configure Cypress To Run Against Multiple Environments

In this tutorial, you will learn how to set-up your project so you can run your project's Cypress tests against different environments.  Cypress is a JavaScript end-to-end testing framework that I highly recommend you consider adopting for your JS projects (read this for some more information).

When writing tests, it's all very good running them against your local build, however, this does not stop your website falling over, or, your staging environment from breaking.  When writing end-to-end tests you will likely want to run them against multiple different environments, maybe triggered after a successful deployment to an environment, or nightly in the early days just to make sure your environments are still working as expected.  There are several different ways you can configure your project; in today's tutorial, I will share my preferred approach.  Sound good? 

All the Config?

As Cypress is installed via NPM, after a successful installation, if you look within the project you should see a file called Cypress.json. Cypress.json is the file to update for all global settings. What it really wants to do is create a config file for each environment.

First, in your solution create a folder called 'config' or something similar. Copy your cypress.json file and create a new file for each environment you want to configure. So cypress.prod.json, cypress.stg.json etc.... Your config file might look similar to this:

{
  "baseUrl": "https://www.website.com/",
}

When you run Cypress you will need a way to set the environment. If you are running a normal Javascript project with web pack, etc.. then you can use an env variable and configure it in your web pack config file. If you are only running Cypress in your project, I suggest that within your plugins/index.html you update your module exports with some code similar to this:

 

const fs = require('fs-extra')
const path = require('path')

module.exports = (on, config) => {
  const enviroment = config.env.configFile;
  const configForEnviroment = getConfigurationByFile(enviroment);

  return (configForEnviroment)
      ? configForEnviroment
      : config;
}

function getConfigurationByFile (file) {
  const pathToConfigFile = `config/${file}.json`;
  return fs.readJson(path.join(__dirname, '../../', pathToConfigFile))
}

Now you have some specific config files and a way to load the correct file before your tests run, the last part is to create some scrips within your package.json file for each environment you want to test, like so:

    "scripts": {
        "cypress:open": "npx cypress open",
        "cypress:run": "cypress run",
        "cypress:run:spec": "yarn cypress:run --browser chrome --config video=true",
        "cypress:run:prod": "yarn cypress:open --env configFile=prod",
        "cypress:run:stg": "yarn cypress:open --env configFile=stg",
    },

With these three bits of the puzzle solved, you can now run your integration tests against as many environments are you like, enjoy!

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top