Network Interception In Cypress

In this tutorial we will focus on how to intercept web requests using Cypress for the purpose of test automation. We will use the Cat Facts as a base in order to demonstrate the network interception.

Cypress helps you test the entire lifecycle of API requests within your application. Within Cypress, you have the ability to choose whether to stub responses or allow them to actually hit your server. You can mix both the approaches like stubbing some requests and let the other requests to hit the server to get the response.

Requests that are stubbed actually does not reach your server. Stubbing responses enables you to control body, the status, headers, and even network delay.

If Requests are not stubbed they will directly hit to the server to get the response. In this way you are using the application as a real user. However this introduce a lot of confidence to your tests as you are testing the application as a real user. But this approach has its own downside to this. More about this can be read here.

That too much of talking ,now let’s see this is in action.

Use Case

We will be using Cat Facts site to test our network interception scenario.

CatFacts

As you can see in above picture we have different cat facts on UI. We will try to intercept the API call that is displaying these Cat Facts and try to render only 1 fact rather that 5. This can be achieved by using powerful cy.intercept().

To read more about on this click here.

Syntax

cy.intercept(url)
cy.intercept(method, url)
cy.intercept(routeMatcher)

To see the usage click here.

Example

Lets see our Network Interception spec how it looks like.

intercept.cy.js

1. We are visiting the application using cy.visit()
2. /facts?animal_type=cat is responsible for displaying the cat facts on the UI. We are intercepting this request by using cy.intercept() command, where we provide first argument as API we will be intercepting, second will be a Route Handler which will be returning the mocked data. Instead of sending the request directly to server we will be using mocked data(json file in our case). We have cat.json file in fixtures folder that we will be displaying on UI.

cats.json

4. Now we alias this intercept with name facts.

5. After we click the Open App button, instead of sending API request to server, app will use the data from cats.json to render on the UI.

Cypress Runner

6. Now we do the assertions that needs to be done on the response.

Controlling the response

The intercepted request passed to the route handler contains methods to dynamically control the response to a request:

• req.reply() - stub out a response requiring no dependency on a real back-end
• req.continue() - modify or make assertions on the real response
• req.destroy() - destroy the request and respond with a network error
• req.redirect() - respond to the request with a redirect to a specified location
• req.on() - modify the response by attaching to events

Benefits of Intercepting the Network requests

• Can take control of response bodies, status, and headers
• Can force responses to set throttling and simulate network delay
• No code changes to your server or client code
• Faster response as you are not hitting the real servers.

Github Repo Link : https://github.com/jeeshan12/cypress-network-interception.git