Cypress basics: API testing

January 17th, 2022
| v10.0.0
5 min read
Cypress basics: API testing

If you have ever tested API via Postman or some other tool, this one will be a piece of cake for you. Cypress is a great testing tool that can be also very helpful when testing API. In today’s post, I’ll go over some basics on how to write an API test in Cypress.

This article is a part of series on Cypress basics. You can check out some other articles on my blog where I provide step by step explanations of some Cypress basics + some extra tips on how you can take things one step further. So far, I wrote about:

.request() command

This command will be the center of it all. To send a simple request with a GET method, you can call it like this:

Copy to clipboard
undefined

Notice you don’t really need to add the method. Cypress optimizes their commands for maximum readability, so if you write a request like this, it will automatically be one with a method of GET.

If you pass two arguments into .request() command, the first argument will be considered a method, and the second one will be a url.

Copy to clipboard
undefined

Also, I haven’t specified a full url. That is because the /api/boards will be automatically appended to anything that is defined as baseUrl in cypress.json

.request() command can take maximum of 3 arguments. The third one will be a request body.

Copy to clipboard
undefined

This simple syntax is super useful, when you want to send a bunch of requests to your database to quickly setup your data for your UI test. My friend Furbo has written a great blogpost about this.

Passing multiple attributes to .request() command

If you want to pass some more options or just provide your .request command a little more context, you can pass a single object. The same request from previous example can be written like this:

Copy to clipboard
undefined

This also gives you the ability to pass more options, for example headers or query parameters:

Copy to clipboard
undefined

Getting data from request

After a request receives a response from server, you can access the information using .then() command. This will return all kinds of attributes like response body, status code, duration etc.

Copy to clipboard
undefined

The alias board used as a parameter in our .then() function can actually be skipped, if you use destructuring.

Copy to clipboard
undefined

This way you don’t have to create a named alias everytime you want to get some data from the request. If you want to learn more about destructuring, you can read of my older posts on this topic.

If you want to use data from the response elsewhere in the test, you can check out this post on working with API data, or this one, on using variables in Cypress.

Testing response data

Now that we have gotten data from our server, we can proceed with testing them. Cypress has bundled chai library, which you can use inside your .then() command.

Copy to clipboard
undefined

Response body is usually stored in JSON format, which means that if you want to find particular item in the response and test it, you need to find a proper path. I dive more deeply into this topic in one of my older blogs, but a simple example would look something like this:

Copy to clipboard
undefined

You can test various attributes of the API response as the bundled chai library is pretty versatile. For example, you can check whether returned content has the proper type, contains certain items or you can write your own function to check a value.

Copy to clipboard
undefined

Using cypress-plugin-api plugin

Cypress will open browser each time you run a test, which is something to have in mind once you decide to use Cypress for API testing. Also, you need to open browser console to look into the details of Cypress response.

But with cypress-plugin-api plugin, the request, as well as response get rendered into browser window, so you can easily observe your API even in GUI mode. This plugin will add .api() command to your Cypress library, and the syntax is very similar to .request() command.

Copy to clipboard
undefined

This test will then produce this nice render in your test:

cy.api command in action

Hope you liked this. You can help me spread the word and share this post with your friends if you feel like I deserved it. Make sure to follow me on Twitter or LinkedIn.

Let’s keep in touch

From time to time I send some useful tips to your inbox and let you know about upcoming events. Sign up if you want to stay in loop.

is required.

I treat your email address like I would my own. That means no ads. Just notifications of when I do cool stuff. Unsubscribe anytime. Click here to read about how I handle your data