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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!