Why intercepting network validates API integration in Cypress - Automation Benefits in Action

Validate API integration by intercepting network requests

Preconditions (3)

Step 1: Open the web application page that triggers the API call

Step 2: Use Cypress to intercept the API network request

Step 3: Trigger the action in the UI that causes the API call

Step 4: Wait for the intercepted API request to complete

Step 5: Verify the API request URL and method are correct

Step 6: Verify the API response status code is 200

Step 7: Verify the API response body contains expected data

✅ Expected Result: The API call is intercepted successfully, and the request and response data match the expected values, confirming correct API integration.

Automation Requirements - Cypress

Assertions Needed:

Verify intercepted request URL matches expected endpoint

Verify HTTP method is correct (e.g., GET, POST)

Verify response status code is 200

Verify response body contains expected data fields

Best Practices:

Use cy.intercept() to stub or spy on network requests

Use aliases to wait for requests with cy.wait()

Avoid hardcoding full URLs; use relative paths or environment variables

Assert on both request and response to validate integration

Keep tests isolated and independent

Automated Solution

Cypress

describe('API Integration Validation via Network Interception', () => {
  it('should intercept API call and validate request and response', () => {
    // Intercept the API call and alias it
    cy.intercept('GET', '/api/data').as('getData');

    // Visit the page that triggers the API call
    cy.visit('/data-page');

    // Trigger the action that causes the API call
    cy.get('button#loadData').click();

    // Wait for the API call to complete
    cy.wait('@getData').then(({ request, response }) => {
      // Assert request URL and method
      expect(request.method).to.equal('GET');
      expect(request.url).to.include('/api/data');

      // Assert response status code
      expect(response.statusCode).to.equal(200);

      // Assert response body contains expected data
      expect(response.body).to.have.property('items').and.be.an('array');
      expect(response.body.items.length).to.be.greaterThan(0);
    });
  });
});

This Cypress test intercepts the API call to /api/data using cy.intercept() and assigns it an alias @getData. It then visits the page that triggers the API call and clicks the button to load data.

Using cy.wait('@getData'), the test waits for the API call to complete and accesses both the request and response objects.

Assertions check that the request method is GET and the URL contains the expected endpoint. It also verifies the response status code is 200, indicating success, and that the response body contains an items array with at least one element.

This approach validates that the frontend correctly integrates with the backend API by confirming the request is sent properly and the response data is as expected.

Common Mistakes - 4 Pitfalls

Not waiting for the intercepted request to complete before asserting

Hardcoding full URLs including domain in intercept

Only asserting on request or only on response

Using cy.route() instead of cy.intercept() in Cypress 6+

Bonus Challenge

Now add data-driven testing with 3 different API endpoints and verify each response

Show Hint