How to Set Environment Variables in Cypress

How to Set Environment Variables in Cypress

Ferenc Almasi β€’ 2021 December 15 β€’ Read time 2 min read
  • twitter
  • facebook

You can set environment variables in Cypress by using your cypress.json configuration file, your CLI, plugins, or test configuration.


Using the Configuration File

The most common approach is to use your cypress.json configuration file to add environment variables, which you can do so using the env property:

Copied to clipboard!
{
  "env": {
    "api": "https://placeholder.com/"
  }
}
cypress.json

Using the CLI

You can also pass environment variables to Cypress using the CLI by passing the --env flag:

cypress run --env api=https://placeholder.com/

This can be especially useful if you need to define multiple commands for Cypress that uses slightly different configurations. For example, you may want to have different commands for a staging or prod env:

Copied to clipboard!
"scripts": {
    "cypress:staging": "cypress run --env api=staging",
    "cypress:prod": "cypress run --env api=prod",
},
package.json
Looking to improve your skills? Check out our interactive course to master Cypress from start to finish.
Master Cypressinfo Remove ads

Using Plugins

Plugins can also be used to programmatically change add, remove, or modify your environment variables in your config:

Copied to clipboard! Playground
module.exports = (on, config) => {
    console.log('Your Cypress config is', config);

    config.env.NODE_ENV = 'development';

    return config;
};
plugins/index.js

In case you want to define environment variables based on some conditions, then you can easily implement that here.


Using Test Configuration

Lastly, you can also define environment variables right inside your test files on a case by case basis, by passing an env object to your describe or it blocks:

Copied to clipboard! Playground
const config = {
    env: {
        api: 'https://placeholder.com/'
    }
};

describe('env variables', config, () => { ... });
it('Should set the right env variables', config, () => { ... });

Apart from the above-mentioned solution, Cypress also lets you create cypress.env.json files or export OS-level environment variables with variable names starting with CYPRESS_* or cypress_*.


Using Environment Variables in Tests

So how do you actually use these environment variables in your test cases? You can access them by using Cypress.env:

Copied to clipboard!
Cypress.env();      // Returns the entire env object
Cypress.env('api'); // Returns the api variable

Want to learn Cypress from end to end? Check out my Cypress course on Educative where I cover everything:

Learn Cypress with Educative
How to Set Environment Variables in Cypress
If you would like to see more webtips, follow @flowforfrank

  • twitter
  • facebook
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.