Using different configuration files in Cypress
Published: 2023-08-06 09:25:39


Hi there, I am Ayodeji Adedeji, a software engineer who specialises in back-end development, test automation, and DevOps. This is my first article, and I will be articulating my knowledge via this platform.

Today, let us discuss how to test an application in different environments using different configuration files.

The assumption is you know your way around Cypress already, so I won't bore you with what Cypress is and what it can do.

Why test in multiple environments? Basically, It is to ascertain whether an application maintains the same behaviour in different environments. The issue with automating tests in different environments is the need for separate data in these environments. For example, the staging login details might differ from the production login details.

To demonstrate this, I created a simple API with a login endpoint and exposed it on two ports(5001 for the development environment and 5002 for the staging environment).

See the sample requests and responses to the endpoints below(please note the difference in the value of the message field of the response body).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tgjq15nfftmchycdjpz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1fye5n541q9s8er5wgr.png)

Now let's get to the exciting part, the first thing we'll need to do is to set up a project.

- Create a folder, open this folder on the terminal, and run the "npm init -y" command to start a project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1go4ltf0ydhipvfdgosr.png)

- Install Cypress by running the "npm install cypress" command.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5jsamjw8ifbdc4bnxgv4.png)

- Run the "npx cypress open" command to allow the addition of the needed files to the project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzxeercpdnjzqyyqu7uy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf9oaxx98qs11gj9uazx.png)

- The next step involves the creation of two JSON files for each environment(dev and staging in this case).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c26caa00w6zqhc5g0ub.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwhc5q2v20u83z8evo8p.png)

- Let us set up the different commands inside package.json to run the test, based on the desired environment.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0q6cafxizcy35sigo59a.png)
NOTE: The envName environment variable will be used to select the JSON config file i.e. if envName is passed as dev, the dev.json file is used. If envName is passed as staging, the staging.json file is used.

- The logic to select the JSON file is implemented in cypress.config.js.
Line 6–9 picks the value of the envName environment variable set in package.json, concatenates it with .json to generate the needed file name, loads the file, and destructures it into the Cypress inbuilt config object.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b0bbnfj5g90tw9jyk8w.png)

- Here is the simple test script that makes a request to the endpoints I mentioned above. The Cypress.env() is used to fetch the needed details from the loaded JSON file.
NOTE: The assertion is done on the message field within the response body.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmq4r7e2mgca2a151eqv.png)

- Now, let us run the test against each environment using the different commands set in the package.json file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr8ezc8wlivqxbvh9ot1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yal37s1rukw3bpzrbnc6.png)

Up next! We will set up a pipeline for this project for the purpose of continuous testing.