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:

Using baseUrl

Uploading a file

API testing

Variables

xpath vs. CSS selectors

Check attributes, value and text

before(), beforeEach(), after() and afterEach()

check if element exists

Where did my cookies disappear?

Selecting elements

.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:

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.

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.

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:

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

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.

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

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.

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:

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.

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.

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

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.