Why intercepting network validates API integration in Cypress

Introduction

Intercepting network calls helps check if the app talks correctly with the API. It shows if data is sent and received as expected.

When you want to confirm the app sends the right request to the server.

When you need to check the server's response before the app uses it.

When testing if error messages appear when the API fails.

When verifying that the app updates UI based on API data.

When you want to speed up tests by mocking API responses.

Syntax

Cypress

cy.intercept(method, url, response?)

method is the HTTP method like GET or POST.

url is the API endpoint to watch or mock.

Examples

Watch GET requests to '/api/users' without changing response.

Cypress

cy.intercept('GET', '/api/users')

Mock POST requests to '/api/login' to always return success.

Cypress

cy.intercept('POST', '/api/login', { statusCode: 200, body: { success: true } })

Sample Program

This test intercepts the GET request to '/api/users' and returns a fixed user list from 'users.json'. It waits for the API call and checks the status code is 200. Then it confirms the page shows a user named 'Alice'.

Cypress

describe('API integration test', () => {
  it('checks user data from API', () => {
    cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
    cy.visit('/users');
    cy.wait('@getUsers').its('response.statusCode').should('eq', 200);
    cy.get('.user-list').should('contain', 'Alice');
  });
});

Important Notes

Intercepting lets you control and check API calls without relying on the real server.

Use aliases (like '@getUsers') to wait for and assert on specific requests.

Mocking responses helps test edge cases like errors or empty data.

Summary

Intercepting network calls helps verify API communication in tests.

It allows checking requests, responses, and app behavior together.

Using intercept improves test reliability and speed by controlling API data.