Supporting multiple configurations in Cypress
Tags: testing, cypress, javascript, tutorial
Published: 2020-02-07 18:54:34

---
title: Supporting multiple configurations in Cypress
published: true
date: 2020-02-07 16:13:12 UTC
tags: Testing,Cypress,Javascript,tutorial
canonical_url: http://yer.ac/blog/2020/02/07/supporting-multiple-configurations-in-cypress/
---

By default, Cypress will support a single configuration based on the optional file `cypress.json` as described in their documentation [here](https://docs.cypress.io/guides/references/configuration.html).

Whilst this works fine for most, it would be great if we could have access to a `cypress.dev.json` for local development, or even better, a whole host of configuration files for use against a multi-tenant environment – for example `cypress.clientA.json`, `cypress.clientB.json` etc.

Whilst Cypress accepts a different config file during startup with the `--config-file` flag, it would be better if we could just pass the environment name through instead of the full file name and/or location, right?

### Uses for environmental variables

I personally use these environmental files to store things like:

- Base URL: Each client has its own SIT/UAT environments with different URLs
- Default username and password for test environments.

### Creating the different config files

We can create a root level folder named “Config”. Under here we can create as many files as we need to cover, for example I have `config.ClientA.json` which contains:

```
{
  "baseUrl": "http://clientA.internalserver.co.uk/",
  "env": {
    "someVariable": "Foo"
  }
}

```

And `config.ClientB.json` which contains:

```
{
  "baseUrl": "http://clientB.internalserver.co.uk/",
  "env": {
    "someVariable": "Bar"
  }
}
```

## Editing the plugin file

First we need to import “path” and “fs-extra” packages by adding the following at the top of the `index.js` file within the `/Plugins` folder (if it doesn’t already exist!). These will allow the file to be located and subsequently read.

```
const path = require("path");
const fs = require("fs-extra");
```

Next we need the method which will take in a client name/environmental variable, locate the appropriate config file (being /config/config. **name**.json), and then reading that file back to the calling method.

```
function getConfigurationFileByEnvName(env) {
  const fileLocation = path.resolve("cypress/config", `config.${env}.json`);
  return fs.readJson(fileLocation);
}
```

and finally we need the index.js file to export this file. This will also have a fallback in place if one is not defined.

```
module.exports = (on, config) => {  
  const envFile = config.env.configFile || "local";
  return getConfigurationFileByEnvName(envFile);
};
```

The eagle eyed may realise that I am using `config.env.configFile` here which will mean passing an environmental flag in the command line rather than making direct use of the `--config` flag. This is personal preference, as I aim to expand on the `env` flags later so this will look cleaner.

### Consuming the configuration

Now, when running the usual open command, we can make use of the `--env` flag to pass it the environmental variable. We do so with:

`./node_modules/.bin/cypress open --env configFile=clientA`

It should now launch the test runner with your different files environmental variables available via `Cypress.env('key')`

The post [Supporting multiple configurations in Cypress](http://yer.ac/blog/2020/02/07/supporting-multiple-configurations-in-cypress/) appeared first on [yer.ac | Adventures of a developer, and other things.](http://yer.ac/blog).