Skip to content

yer.ac | Adventures of a developer, and other things.

  • About
  • Github
  • Dev.to

yer.ac | Adventures of a developer, and other things.

Blog to keep track of things I am upto

Supporting multiple configurations in Cypress

February 7, 2020 by yer.ac

By default, Cypress will support a single configuration based on the optional file cypress.json as described in their documentation here.

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')

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

Related

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pinterest (Opens in new window)

Post navigation

Previous Post:

⚡lightning-fast testing of web applications with Cypress

Next Post:

Adding VS Developer Command Prompt To Windows Terminal (VS 2019)

One comment

  1. eduardo says:
    February 19, 2021 at 6:09 pm

    Thanks a lot for shearing

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Dev.To Profile

Rich's DEV Profile

Tags

agile Azure AzureDevOps Azure Functions ContinuousImprovement Cosmos DB Cypress DevOps docker dotnet ES6 Javascript Mocha NLOG Nuget podcast podgrab PowerShell QNAP SCRUM SonarQube Testing TFS VisualStudio VSCODE VSTS wordpress

Follow me on Twitter

My Tweets
© 2023 yer.ac | Adventures of a developer, and other things. - Powered by Minimalisticky