API Requests in Cypress

Learn how to make API requests with Cypress including fetching data from an endpoint and using it to validate page UI

APIs are one of the many technologies that allow developers to communicate across the web. 

For example, if I had a list of recipes that were stored in a data format, I might use an API to make a request to grab that data so I can display it on a page. Here we’re doing just that, where when I reload the page, we can see that we’re making a request to this end point called “recipes”, where we’re simply getting a list of all that data for our recipes. 

Now, the tricky thing when dealing with UIs is how can we validate that our data is properly showing up on the page when that data is dynamic in the first place? 

For example, I created this test where I look through the list of the different recipes, I find the first item in both of these lines, and I look for both the title and the image and validate that they’re the values that they’re expected to be. We can see that as the test goes through, it even works as it expected. Whereas it finds the title, it says “Hot Fried Chicken”, and it even shows the picture of hot fried chicken. 

But ultimately, if I’m creating a recipe site, I want to be constantly pushing out new recipes. So, this “Hot Fried Chicken” might not always be in this first spot. 

What can we do to still validate that this data is properly showing on the page, but make sure that it’s going to be just as dynamic as the data itself? 

How Do I Make API Requests with Cypress?

To get started, we’re going to use the cy.request, method where we can pass in the API end point that we’re hitting to get those recipes. What it’s going to do is, in the background, Cypress will make a request to grab this data from this end point. 

And because that’s going to happen asynchronously, we can next add at then statement where we can pass in a function with an argument of response. Now, this response object will have a lot of things, but what we particularly want is the data from that response. 

If we look back at the API request inside of our browser, we can see that that data is all nested under a property called data. So, we want to access that data and we’re going to take it from the response body. 

So, like we did before, we can now paste back in where we’re going to get all the list elements underneath our recipes list (“recipes-list”). Now, if we wanted to, we could technically just validate that very first item like we did before, but because we’re getting all the data, we can go ahead and validate all the data in that list.

I’m going to use the each command for Cypress, where we can pass in a function that takes 2 arguments — one being the element and another is the index (where we’re going to pass in those two that function). 

We can start off by running cy.wrap so that we have access to the Cypress API for that element, where at this point we’re going to be accessing each of the list elements inside of that recipes list. 

Now we can run find(‘h4’), where we’re going to say we want it to contains, then we can pass in the data object, which we’re getting from the response. And because it’s an array, we can say for each of these data elements, we’re going to get the index so we can access each one of those items. And then finally grab the title for each of those objects. 

We can immediately see that when we run this test, it goes through every single one of those items in the list. And it makes sure that it has each one of those items in the UI.

Since we’re only doing that for the title, we can do the exact same thing, but for our image we’re going to find that image tag, where we’re going to say that it should have the attribute of source (“src”). And that source value should be data[index], just like before, but this time, the image. 

Again, when we run the test, we can see that it goes through. It both finds the title of each of those items, and it finds the images of both of those items. And it’s doing so asynchronously where we can see right at the top here, it’s first making that request to the API and then validating all that data.

Summing It Up – Making API Request with Cypress

In review, we wanted to write a test where we can validate that this page is showing all the recipes that it should be. But the issue is we’re making a request to an API where that data can be dynamic, where writing a static value in our test can easily break. 

In order to make sure that our tests are just as dynamic as the API itself, we can first use the cy.request method, where we’re going to make a request to that API. 

Then we’re going to use that data to go through all those items inside of our UI, to make sure that it’s working just as expected. And with that, we can see that when our test runs, we first make a request to that API and then validate all the data.

Resources

• Git Repo – api.spec.js
• Applitools Kitchen – API Testing