Cypress: Benefits of Network Interception

One feature of Cypress i adore most is the Capability of intercepting request.

With Intercept we can

Wait for a request(s) to complete
Stub a particular request
Fail a particular request

To write tests for all the above scenarios we will use BrowserStack’s demo application . Which looks like below

Wait for a request(s) to complete

Before writing test let’s understand how these Phone Models are loaded in the screen. To know how its loaded, we can open Developer Tools and Go to Network Tab and refresh the page.

So we have products API which is responsible for getting all the Phone models from backend and we can wait for this particular request rather than just waiting for Elements in DOM.

Let’s write our test which waits for this API request to complete.

it('Network test and wait for request to complete', () => {
  cy.intercept('api/products').as('products');
  cy.visit('https://www.bstackdemo.com/');
  cy.wait('@products', 3000).its('response.statusCode').should('eq', 200);
});

In the above code we pass the URL/Pattern matcher to our Intercept method and save that as alias and we then visit the application and wait for the request to trigger and wait for that. We are also validating the statusCode to ensure that request is successful.

Stub a particular request

Why stubbing is needed ? Well, there are few reasons for stub.

You are a frontend developer, your component is ready but the API functionality from backend team is not ready. Instead of waiting for the API functionality to complete we can use the stub feature of Cypress to listen to the API call but instead of getting the response from backend, we can mock the response as we want.

You are a tester and you want to test how the screen loads based on various data set returning from API response. Instead of creating Data using application, you can just intercept the request and return the response the way you want.

With these explanation lets write the code where we want to test how the application behaves when we don’t return any Phone Models

it('Intercept request and stub', () => {
  const phoneModels = {
    products: [],
  };
  cy.intercept('https://www.bstackdemo.com/api/products', {
    statusCode: 200,
    body: phoneModels,
  }).as('products');
  cy.visit('https://www.bstackdemo.com/');
});

In the above test we are passing two parameters to cy.intercept — First parameter is the Url and second is the RoutHandler which has statusCode and the body which we want to return as Response.

If we run this test what we see is

So the products API call doesnt return any of the phone models and we can see 0 Product(s) found in the result. We can also write assertion code to check this case.

it.only('Intercept request and stub', () => {
  const phoneModels = {
    products: [],
  };
  cy.intercept('https://www.bstackdemo.com/api/products', {
    statusCode: 200,
    body: phoneModels,
  }).as('products');
  cy.visit('https://www.bstackdemo.com/');
  cy.get('.products-found span').invoke('text').should('eq', '0 Product(s) found.');
});

Fail a particular request

There could be cases where we want to destroy the request before it reaches the server and for that we can use request.destroy() and below is the test

it('Network destroy', () => {
  cy.intercept('api/products', (req) => {
    req.destroy();
  }).as('products');
  cy.visit('https://www.bstackdemo.com/');
});

Running the above test will result like below

We can also use forceNetworkError to fail the request

it.only('Test forceNetworkError', () => {
  cy.intercept('api/products', {
    forceNetworkError: true,
  }).as('products');
  cy.visit('https://www.bstackdemo.com/');
  cy.wait('@products');
});

Hope you gained some knowledge from this article! If Yes, please share, follow and 👏 so that this article can reach and help many people.

Test Automation Stack