Intercepting Network Requests

Knowing how to test network (http) requests and responses is important for every web application. In this lesson you will learn how to use cy.intercept() to manipulate and test network requests and responses.

Intercepting Server Requests

The most basic way to intercept a server request is as follows:

cy.intercept("POST", "/users")

In this example we are intercepting any POST request to the /users route. Typically you will also alias an intercept to perform additional actions, like waiting, later in your test(s).

We explain how waiting works in the Waiting & Retry-ability lesson.

cy.intercept("POST", "/users").as("signup")

// ...

cy.wait("@signup")

Overriding an existing intercept

Sometimes you may need to override an already existing intercept by using a fixture to mock the response data. Let's look at an example from the Real World App.

beforeEach(() => {
  // ...

  cy.intercept("GET", "/transactions/public*").as("publicTransactions")

  // ...
})

In this example, we intercept any GET request to any route that matches /transactions/public*. We are doing this in a beforeEach(), which means this intercept will run before every test.

Later on, in one of our tests, we use cy.intercept() to intercept and override this same GET and route but using a fixture to mock the response.

cy.intercept("GET", "/transactions/public*", {
  // ...
  fixture: "public-transactions.json",
}).as("mockedPublicTransactions")

So as you can see, we can also intercept other intercepts and then provide mocked data using a fixture. We alias this intercept override as mockedPublicTransactions.

Changing Headers

You can also use cy.intercept() to modify headers from a response.

cy.intercept("GET", "/transactions/public*", {
  headers: {
    "X-Powered-By": "Express",
    Date: new Date().toString(),
  },
})

In this example we are dynamically modifying the Date header and also adding a new header "X-Powered-By": "Express".

The original headers from the response will remain intact. These new headers are appended to the original ones.

Modifying Response Data

Sometimes you will need to modify a portion of the response data while leaving everything else intact.

cy.intercept("POST", "/bankaccounts", (req) => {
  const { body } = req
  req.continue((res) => {
    res.body.data.listBankAccount = []
  })
})

In this example, we are overriding the listBankAccount property and setting it to be an empty array. We need to use .continue() to modify the response data.

Inspecting a Request

You can also use intercept to inspect a request, in the callback passed to cy.intercept().

cy.intercept("POST", apiGraphQL, (req) => {
  const { body } = req

  if (
    body.hasOwnProperty("operationName") &&
    body.operationName === "CreateBankAccount"
  ) {
    req.alias = "gqlCreateBankAccountMutation"
  }
})

In this example, we are using intercept to inspect a GraphQL query to determine what kind of query it is. If the query is CreateBankAccount then we are setting its alias to gqlCreateBankAccountMutation

To learn more check out these resources in our docs:

Practice

If you would like to practice intercepting Network Requests and working with the Network in general with Cypress, we have created a special repo which can be found here. The installation instructions are located in the README.md file.

The practice file you are looking for can be found in cypress/e2e/Practice/network-requests.spec.js.

Should you get stuck or need some help, all of the answers are provided within cypress/e2e/Answers/network-requests.spec.js