Modify API Response | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Working with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to intercept and modify API responses using Cypress, which is particularly useful for testing edge cases in applications. Why Intercept API Responses? When testing scenarios like a likes counter that needs to handle large values (e.g., 10 million likes), manually updating the database can be cumbersome. Instead, mocking data allows for consistent reproduction of scenarios without risking database integrity. Steps to Modify API Responses in Cypress Set Up Interception: Create a new test and intercept the API request. Use Callback Functions: Provide a callback function to handle the request. Continue the Request: Allow the request to go through using the continue method. Modify the Response: Catch the response and modify specific properties, such as the favorite count . Send the Modified Response: Use res.send to return the modified response to the application. Example Code Snippet cy.intercept('GET', '/api/articles', (req) => { req.continue((res) => { res.body.articles[0].favorite_count = 9999999; // Modify the favorite count res.send(res.body); // Send the modified response }); }); Validation After modifying the response, validate that the application displays the expected values using assertions, such as checking the text of the likes counter. In summary, intercepting and modifying API responses in Cypress allows for efficient testing of edge cases without altering the underlying database, ensuring reliable test automation.
Video Transcript
Hey guys, in this lesson I will show you how you can intercept response from the API, modify this response, and then send back to your application. Let me show you why this case can be useful. So this is our test application. Imagine that you need to test an edge case scenario, for example, for this likes counter, that it is capable to handle up to 10 million likes, something like this. How would you automate this? So if you would run this scenario manually, you can probably go to a database, update the value in the database, then run your scenario, and look this value in the UI. But if you run automation, it's create kind of a problem, because you need to carefully manage this test data in the database, making sure that nobody breaks this data, so you can continually run this scenario. So it would be a good case to mock this data instead, so you can consistently reproduce this scenario. Option number one, you can of course just modify the entire response for the articles that we did before, but our articles response is quite big. So look, it is like 10 articles, and in the real world applications, your real response can be a lot bigger. It can be a lot more dynamic. It is just hard to mock the whole thing. And you don't need to mock the whole thing. If you need to modify just a single property or a couple of properties. So instead, a better way would be to let your application complete the API request, and then you're catching the response on the way back, modify just a single property, and then sending back the entire response with just a single property modified, so you can test this edge case. So how would you do this in Cypress? So I created a new test right here, modify API response. And initial setup is similar to interception of articles and point. But instead of providing the entire mock response of the articles, I will intercept the request first. And I will provide the first argument as the callback function, like this, with my request. Then inside of the intercept function, this request object is available. And if needed, I can get any information from this request object. For example, body, if I want to read the properties from the body. Or maybe I can get access to headers of this API request, and so on. Also, I can call the method reply if I want to provide the response right away. So it's another option of providing the response object right away without letting Cypress sending this request to the actual server. So we're catching the initial state and the request state. But instead, we want to let this request to go through. So I'm calling the method continue. And this will make this request to go through. But I am catching their response on the way back. And I'm calling the another callback function with a response object this time. And this response object will give me the response that came back from the server. Then within this response object, I can call the body. And then I can modify this body however you want. So what I'm looking inside of the body, let's look in the articles object. So this is the object that we are expecting. The first properties will be the articles. So I'm calling through the dot notation, so response, body, articles. I want to get the first article. So look, this is the array of the article. So I'm looking for the first article in this array. I put the square braces and put zero. Then I am looking in the first article, this favorite count property, favorite count dot favorite count. And I assign value that I want to be modified in this response. Let's say I want to put 9999 and 1, 2, 3. So it will be almost 10 million likes, right? And then I call my response object one more time and call send. So I want to send this modified response. And what I want to send, this response body object that we modified, just the lines above, and that's it. So let's try to run it. So opening Cypress and running the test. Here we go, and look at this. So it worked successfully. So we have almost 9 million, almost 10 million likes. And interception of the response and modification of the response work correctly. And the rest of the articles are exactly as they came from the server. So we didn't touch anything else. We touch only a single property. Also, when you look into the runner on the left, look. For the articles, for the endpoint that was modified, we have additional label, res-modified. So for you, if you have multiple steps and so on, when you look through the runner, you will see, aha, okay, just for your information, this response, this particular response was modified. And I guess let's add one little thing is the validation, right? Because every test should end with validation. What can we use? So I can use, I guess, this app favorite count tag. So going back, and I call sci-get, I call app-favorite-button. I'm looking for the first one, and it should contain text. And the text that I'm expecting is this one. So let's run this test one more time. Running the test, and test pass successfully. We successfully validated that this value is displayed as the likes counter. All right, guys, that's it. So let's quickly summarize what we did in this lesson. So when you want to intercept the response from the server, if your response is big, and especially it's useful for testing different edge cases, you can intercept the response. First, you need to provide the callback function to catch the request. You need to continue this request, then you catch the response, and then you modify the response object with however you want. And then you call res-send, and send the modified object. It will be sent back to the browser. After that, you can test this value of modified response in your application to test different edge case scenarios. All right, that's it, guys, and I'll see you in the next lesson.