Running Cypress against multiple environments

If you are using Cypress, chances are you have your application deployed to multiple different environments. Those might be development, testing, and production. Sometimes, there might be many more environments. But you want to test and ensure they all work correctly. This post is my way of structuring tests to be able to run them against different environments painlessly.

Running tests

I am starting with this top to bottom. How do we want to run it? The easiest way is to pass environment selection trough CLI. There is the env flag that you can use to pass data and that data is accessible in tests. This flag is something I am using for environment selection.

Example:

cypress run --env environment=development

The environment is the key we are using, and development is value. But we can pass any number of values as strings.

If you are running tests as npm command, it is similar but slightly different. Before passing CLI arguments, you need to add two more dashes.

Example:

npm run cypress:run --env environment=development

Values for environments

Data required for tests are in the fixtures folder by convention. And this is where I keep URL values for different environments. For this example, let’s name this file domains.json, and it could have the following content:

{
 development: "https://dev.url", 
 production: "https://prod.url"
}

In our tests, we begin by opening the URL of the application we want to test. This URL is chosen based on passed environment value and value for that environment from domains.json.

Loading values

Now that we pass values through CLI, and domain values are in the fixtures file, we need to load them into the test. For that, we are using cy.fixture command that returns a promise. In this case, we are choosing the URL to open, which is why we are doing it in the beforeEach function.

beforeEach(() => {
 cy.fixtures(‘domains.json’).then(domains =>{
  /\* ... \*/ 
 })
})

I the example above, I am using promise, but await command is also perfectly fine. Now that domain values are loaded, we need to read the CLI flag to choose which environment we are running. Here, where we are using the Cypress.env function. By executing it, we get an object with all flags passed to it.

beforeEach(() => {
 cy.fixtures(‘domains.json’).then(domains =>{
  const env = Cypress.env().environment;
  cy.visit(domains[env]);
 })
})

Wrap up

Having your application running in different environments is a common and good practice. It is something that Cypress supports. But at this moment, documentation and examples are still not there yet. This post did provide that, setting up in three easy steps. And you can take it further in the same way. Choosing different mocks depending on configuration passed, running just some tests or any other setup.

For more, you can follow me on Twitter, LinkedIn, or GitHub.