cy.intercept() for request interception in Cypress - Build an Automation Script

Intercept and verify API request using cy.intercept()

Preconditions (3)

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

Step 2: Use cy.intercept() to listen for GET requests to /api/users

Step 3: Trigger the action that causes the API call (e.g., click 'Load Users' button)

Step 4: Wait for the intercepted request to complete

Step 5: Verify the intercepted request URL is correct

Step 6: Verify the response status code is 200

Step 7: Verify the response body contains expected user data

✅ Expected Result: The API request to /api/users is intercepted successfully, and assertions on URL, status code, and response body pass.

Automation Requirements - Cypress

Assertions Needed:

Request URL matches /api/users

Response status code is 200

Response body contains expected user data

Best Practices:

Use cy.intercept() with alias for request tracking

Use cy.wait() with alias to wait for request completion

Avoid hardcoding full URLs; use path matching

Assert on both request and response properties

Keep selectors and intercept patterns maintainable

Automated Solution

Cypress

describe('API request interception with cy.intercept()', () => {
  it('should intercept GET /api/users and verify response', () => {
    // Intercept GET requests to /api/users and alias it
    cy.intercept('GET', '/api/users').as('getUsers')

    // Visit the page that triggers the API call
    cy.visit('/users')

    // Trigger the API call by clicking the Load Users button
    cy.get('button#load-users').click()

    // Wait for the intercepted request to complete
    cy.wait('@getUsers').then(({ request, response }) => {
      // Assert the request URL path
      expect(request.url).to.include('/api/users')

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

      // Assert the response body contains expected user data
      expect(response?.body).to.have.property('users')
      expect(response?.body.users).to.be.an('array').and.not.be.empty
      expect(response?.body.users[0]).to.have.all.keys('id', 'name', 'email')
    })
  })
})

This test uses cy.intercept() to listen for GET requests to the /api/users endpoint and assigns it an alias @getUsers. We visit the page that triggers the API call and click the button that loads users. Then, cy.wait() waits for the intercepted request to complete. Inside the then callback, we assert that the request URL contains the expected path, the response status code is 200, and the response body contains a users array with user objects having id, name, and email keys. This ensures the API call was made correctly and returned expected data.

Common Mistakes - 4 Pitfalls

Not using alias with cy.intercept() and cy.wait()

{'mistake': 'Hardcoding full URLs in cy.intercept()', 'why_bad': 'Hardcoded full URLs make tests brittle and less maintainable if the base URL changes.', 'correct_approach': "Use path matching like '/api/users' to keep intercepts flexible."}

Not asserting on response properties

Triggering API call before setting up intercept

Bonus Challenge

Now add data-driven testing with 3 different API endpoints to intercept and verify

Show Hint