Why intercepting network validates API integration in Cypress - Test Execution Impact

Test Overview

This test checks that when the user clicks a button, the app sends the correct API request and handles the response properly. It verifies API integration by intercepting the network call and confirming the response data is shown on the page.

Test Code - Cypress

Cypress

describe('API Integration Test with Network Intercept', () => {
  it('should fetch and display user data on button click', () => {
    cy.intercept('GET', '/api/user', {
      statusCode: 200,
      body: { id: 1, name: 'Alice' }
    }).as('getUser')

    cy.visit('/user-profile')
    cy.get('#fetch-user-btn').click()

    cy.wait('@getUser').its('response.statusCode').should('eq', 200)
    cy.get('#user-name').should('contain', 'Alice')
  })
})

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	cy.intercept sets up a stub for GET /api/user with mock response	No page loaded yet, network intercept ready	-	PASS
2	cy.visit opens the /user-profile page in browser	User profile page loaded with button #fetch-user-btn visible	-	PASS
3	cy.get finds the button #fetch-user-btn and clicks it	Button clicked, app triggers GET /api/user request	-	PASS
4	cy.wait waits for the intercepted GET /api/user request to complete	Network call intercepted, response received with status 200 and body {id:1, name:'Alice'}	Check response status code equals 200	PASS
5	cy.get finds element #user-name and checks it contains text 'Alice'	Page shows user name 'Alice' after API response	Verify UI updated with API response data	PASS

Failure Scenario

Failing Condition: API request does not return status 200 or UI does not update with user name

Execution Trace Quiz - 3 Questions

What does cy.intercept do in this test?

A It clicks the button to trigger the API call

B It catches the API request and provides a fake response

C It checks the text on the page

D It opens the user profile page

Key Result

Intercepting network calls lets us control and verify API responses during tests, ensuring the app correctly integrates with backend services without relying on real servers.