Use cypress UI in order to debug an API response
Most of the time the communication between backend and frontend works seamlessly.
Until it doesn't.
When our e2e tests start to fail because there's an issue with an API response, it's important to know how to debug it.
In this lesson we're going to learn how to get insights about a network request and its response using the cypress UI.
Tomasz Łakomy: [00:00] With Cypress, it is possible to get insights into how exactly the network requests change the state of our application. Let's take a look at an example. Right now, we have a very basic test which is just going to visit our home page and send a network request in order to get all those emojis.
[00:14] If we hover over a network request in the Cypress log, we're going to see the state of the app changing between the state that was before the request was sent and after the response for the request has been received. If we click on the request, we're going to be able to switch the state manually. This is before, and this is after the response has been received.
[00:31] In order to find out more about this network request, open up the console. By default, Cypress is going to log out all kinds of useful info for us about this request. We have a status, which is 200. We can take a look at what kind of request was sent, and also take a look at the response.
[00:44] That is very useful, because it allows us to investigate what exactly is going on with our tests in case we have some issues.