Handling API with Cypress
Ever since automation was introduced, many benefits have been provided to the Quality Assurance department of every organisation that embraced it. Software testing has come a long way due to the various advantages of automation, such as time saving, early bug catching, etc. With time, various test frameworks have been introduced for different platforms. One such is Cypress, which is used for automation of web applications test cases.
Cypress helps QA engineers write test cases faster and in a more reliable way, and it’s also very easy and quick to set up. With its user-friendly framework, Cypress has made automation easier in many ways and requires little configuration before you start writing your tests. There is almost always a plugin for nearly any task that traditional frameworks would require users to write themselves.
Primarily, Cypress focuses on automation of Web applications, but also provides support for handling API commands where needed. Since we can not automate mobile applications directly with Cypress, this can come in handy when we need to substitute a mobile command with a backend API instead.
This document will provide a brief overview on how to handle your project’s API with Cypress. As prerequisites, you must be familiar with the structure of the Cypress framework and how to set it up.
Getting Started
It is very simple to get started with introducing API to your Cypress tests.
For an HTTP request, the function cy.request() is used. This can be called under the it() function of the spec file or in commands.js in order to have more reusability.
The parameters required for this function are method and url, which are mandatory; and headers and body, which are additional.
Syntax:
cy.request(method,url)
For example, we will be using free testing API from https://reqres.in/
The below example shows how a simple get API can be called in your Cypress test.
Executing the above test will show success as follows:
Viewing the response
However, the above example simply shows that the API has been executed. We can not view the result. In order to see this, we use the should() function as demonstrated below:
Here, we are simply showing the response body and converting the returning object into string using Stringify.
Adding assertions
In many cases, you need to manipulate the result or assert any value or status code. To do so, we use the expect() function.
The most basic assertion for API is status code. This can be done in the following way.
Syntax:
expect(response.status).to.eq(200)
Here, we have asserted that the status code should equal 200.
Besides the status code, you can assert any data found in your response, for example the API in testing is returning a list of users, we can verify this data in a number of ways according to the need of the test.
For example, you can assert the response to exist, the value of a field in the response, etc.
Additionally, you can also store values from the response in an environment variable to use in other tests. To do so, following steps would be added:
The result would be displayed as follows when you execute the above code.
Improving reusability
Congratulations on learning how to work with API in Cypress!
Now let’s say you need to call this API several times in several tests. Copying and pasting the same lines of code is not considered to be a good practice. Instead, it would be wiser to store it in a file where you can modify it easily and call as needed.
One such way of doing so is to use the commands.js file.
Simply copy the request and paste it in the commands.js file and wrap it with the following:
Syntax:
Cypress.Commands.add(‘APITest’, () => { })
Now these steps can be called in any test in the following manner, no need to write the same code all over again.
Chaining API requests
Suppose that you need to call APIs in a step by step manner and need one to finish executing before moving on to the next. This can be achieved using the then() function. It allows you to use the yielded subject in a callback function.
To introduce it within our test, we will make the following changes, and also add our second API with some assertions.
Let’s say the test requires you to update the first user. To do so, you will first fetch the id of the first user, and use it with the URL of the second API in order to update the said user. Here, we have also added body.
Executing this will yield the following result.
Further improvements
Following this article you will have learned how to handle API, modify them in order to use them in multiple tests, and chain the requests in order to make additional actions.
You can also store the base URL in “baseURL” under your cypress.json file.
There are many more ways in which you can improve your work in order to make it more dynamic. Let’s say, you need to send different values each time in a particular request or you have bulk data that you need to call from fixtures. You can not create the same request multiple times for different data; instead, you should modify one request in order to handle multiple values.
For example, you need to update the job field. To handle this, you can use the following changes.
Additionally, you will need to add the job as a parameter in your spec file as well.
Then execute your test.
Should Cypress be used for API Testing?
Cypress provides a number of benefits and additionally also supports the usage of API where necessary. Fundamentally, it makes more sense to use it for UI automation testing, but it can be useful to perform API calls where necessary during UI tests to make them faster.
More content at PlainEnglish.io.
Sign up for our free weekly newsletter. Follow us on Twitter, LinkedIn, YouTube, and Discord.
