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.

--

--

--

Senior Test Automation Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 reason why Node.js is the best platform to build an eCommerce marketplace

Thinking in a JavaScript Way

JavaScript Code Snippet

Jamstacking a free CMS site with Svelte/Sapper, Netlify and FaunaDB

Corn field — by Olivier Vanbiervliet

Create a Custom useModal() React Hook

ReactJS or VueJS for machine learning deployment?

My impressions creating an IO Game

NeoInvade.com — Tank IO Game

The Spread Operator: I sure hope you know what you’re doing

Build a Simple Pokédex Using React and fetch to Call REST APIs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Areesha Altaf

Areesha Altaf

Senior Test Automation Engineer

More from Medium

Getting started with Microservices Architecture

How to use Cypress for end-to-end(e2e) testing

How to setup Cypress 10.x.x with Cucumber and Typescript

CodeBuild: Automated tests using Cypress