Recently I have been introduced to Cypress framework and I have to say that I am in love. For those who don’t know, with Cypress, you can write fast, easy, and reliable tests for anything that runs in a browser. From end-to-end tests to API, Cypress also offers you the option to debug your tests in CI as easily as running tests locally, along with built-in parallelization and load balancing. Besides that, all of your tests are going to have reports, videos and screenshots.
Ok, now that we already know what Cypress is, let’s talk about TESTS! I found a lot of articles about UI and E2E tests but I was missing an article that goes through the entire API tests, from the authorization to the multiple HTTP requests, so here we go:
First, we need to install Cypress — you can use Yarn or NPM:
npm install cypress — save-dev
Once you have Cypress installed in your project, open it:
npx cypress open
it will automatically create default folders, and your folder structure will look like this:
You can think of the support and plugins folder as a global configuration where all tests inside the integration folder will access. Cypress will load these files before running your tests. We will briefly talk about it throughout the article but you can read more in Cypress documentation.
The first thing we want to do is to write REUSABLE tests. If you are working in a place with multiple environments, we want to make sure that our tests run in all of them — in the perfect world. However, if you just work with one environment, you can jump this step.
All global configuration will be in the Cypress.json, since we will work with more than one environment, we want to have different Cypress configuration files for each of the environments:
- Create a config folder with files for each environment. This file is going to contain all the information needed for Cypress to run the tests in this environment, including baseUrl, which is the main URL Cypress will automatically navigate to once it starts running the test.
Inside the index.js file in the plugins folder, we will create the following function:
*Since plugins file is using ES5 by default, I kept the same pattern
- In this code, we are telling Cypress that instead of reading the default configuration file Cypress.json, it should read from a different file depending on the environment. Plugins provide a way to support and extend the behavior of Cypress.
*don't forget to install path and fs-extra in your package.json
- Now, in your package.json, create a script to run the tests in each of the environment:
That's it. Now that you have already set up the environments, let's write the tests!
Cypress already has Mocha and Chai assertion embedded and so we don't need to worry about setting up our BDD process. Inside the integration folder, is where our tests will be located. I have created the api.spec.js file.
We will create 3 requests: GET, DELETE and POST.
Even tho Cypress is not page-object oriented, we still don't want to let variables, URLs, and common functions in our test code. By default, Cypress will automatically include the support file cypress/support/index.js. This file runs before every single spec file. That it’s done purely as a convenience mechanism so you don’t have to import that file in every single one of your spec files.
Since I have to send a Berear Token into my API request in order to access it, I have included a headers object inside thesupport/index.js file,where I can access it from any spec:
And the api.spec.js file:
There is no secret between Cypress commands compared to other tools like Jest, Supertest and more. This is a simple example but Cypress also allows you to use Fixture files to load a fixed set of data located in a file. You can also use mock to create your API requests if you need to.
Now, you only need to run your test in the environment you choose but running the script in the package.json. If you are using VSCode, you can do it by clicking on it.
Any questions, feel free to reach me out.
Bruna Vaz
brunaaguiarvaz@gmail.com