DEV Community

Sam E. Lawrence
Sam E. Lawrence

Posted on • Edited on

9 1

Testing with Cypress Across Multiple Environments

Overview

You may need to configure Cypress across multiple test environments and find it useful to know how to modify the baseUrl value. In this essay, I'll go over the ways my team achieves this goal. This is by no means the only or most correct way, so if you can see something you think I should change, please let me know on Twitter. This article only covers implementation of e2e testing, not component testing.

We use Yarn as our package manager, so if you use NPM, when I describe what I type into my terminal, know that you can probably replace yarn with npx and get similar results.

We have two environments we test, qa and master, and because of some environmental differences, we want to only run what we consider smoke tests against master, while running more data-centric tests against qa. In your setup, master might be something more like a dev environment, under more change and with less assumed reliability. One important thing to know is that we consider qa to be our default environment.

The scripts

Everything kicks off from our package.json file, where we have defined several test scripts in the scripts object.

{
  "scripts": {
    "open:qa": "cypress open --e2e --browser chrome",
    "open:master": "cypress open --e2e --browser chrome --env master=1",
    "test:smoke": "cypress run --browser chrome --headless --env master=1 --spec 'cypress/e2e/**/*.smoke.cy.ts'",
    "test:regression": "cypress run --browser chrome --headless --spec 'cypress/e2e/**/*.ts'"
  },
}
Enter fullscreen mode Exit fullscreen mode

One important thing to note here are that both the open:master and test:smoke scripts have --env master=1 passed in, which we'll pick up on later. This essentially just allows our config to differentiate between this environment and the default qa environment. Note that this is a completely custom environmental variable, and you can create any environmental variables you want by passing them into your script with the --env flag. Another thing worth pointing out is that the test:smoke script only runs specs which have the name scheme *.smoke.cy.ts, whereas test:regression will run these files plus anything with the scheme *.spec.cy.ts, in otherwords, every spec file.

The config

In the cypress.config.ts file, we use conditional logic (if (config.env.master)) to choose which config to launch based on the --env master=1 flag (or we default to qa environment config if we don't see it). Note that this approach can scale to any number of uniquely named environments.

e2e: {
  setupNodeEvents(on, config) {
    if (config.env.master) {
      return {
        baseUrl: "<master env baseUrl>",
        env: {
          env: "master",
          auth_username: "<email>",
          auth_password: "<password>",
        },
      };
    } else
      return {
        baseUrl: "<qa env baseUrl>",
        env: {
          env: "qa",
          auth_username: "<email>",
          auth_password: "<password>",                  
        },
      };
  },
},
Enter fullscreen mode Exit fullscreen mode

Note that we are only checking for the existence of the master environmental variable. Its value doesn't have to be 1, it could be anything, we're merely checking that it exists. Also note that baseUrl must be returned outside the env object.

The runtime

In a Github Actions workflow file, or from the command line, we can run tests against whichever environment we choose by running things like:

yarn run open:qa
Enter fullscreen mode Exit fullscreen mode

or

yarn run test:smoke
Enter fullscreen mode Exit fullscreen mode

You'll recall that these commands will call scripts defined in the package.json file, which will then kick off this whole process I've described of inserting an environmental flag, then reading that flag to choose which environmental config to work with from the cypress.config.ts file.

Hopefully this makes someone's life a little easier. As I said at the outset, this isn't the only way to do this, it's just a way, and might be useful for you.

Acknowledgements

Much thanks to Gleb Bahmutov for all the work he does for the Cypress community and his blogging on this subject. He also has a great video on how to set the baseUrl property.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

Collapse
 
samnash profile image
sam-nash

Great stuff! Is it possible to pass this value '(config.env.master)' i.e the environment flag (dev or test or prod) from the pipeline yml file(I have no idea about github actions).

Collapse
 
samelawrence profile image
Sam E. Lawrence

I have not yet found a way to set this value other than in the launch/run script.

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay