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

Practice

1. What is the main purpose of cy.intercept() in Cypress testing?

easy

A. To watch or modify network requests during tests

B. To create UI elements dynamically

C. To run tests in parallel

D. To generate random test data

Solution

1. Step 1: Understand the role of cy.intercept()

   This command is used to observe or change network requests made by the app during testing.

2. Step 2: Compare with other options

   The other options describe unrelated testing tasks: creating UI elements dynamically, running tests in parallel, or generating random test data.

3. Final Answer:

   To watch or modify network requests during tests -> Option A

4. Quick Check:

   cy.intercept() = watch or modify requests [OK]

Hint: Remember: intercept means catch or change requests [OK]

Common Mistakes:

• Confusing cy.intercept() with UI commands
• Thinking it runs tests in parallel
• Assuming it generates test data

2. Which of the following is the correct syntax to intercept a GET request to '/api/users' and stub a response with status 200?

easy

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

B. cy.intercept('/api/users', 'GET', { statusCode: 200 })

C. cy.intercept('POST', '/api/users', { status: 200 })

D. cy.intercept('GET', '/api/users', { statusCode: 200, body: [] })

Solution

1. Step 1: Check correct parameter order and object structure

   The correct order is method, URL, then response object with statusCode and body.

2. Step 2: Validate each option

   cy.intercept('GET', '/api/users', { statusCode: 200, body: [] }) matches correct syntax. cy.intercept('/api/users', 'GET', { statusCode: 200 }) swaps method and URL. cy.intercept('POST', '/api/users', { status: 200 }) uses wrong method and missing body. cy.intercept('GET', '/api/users', 200) passes status as number, not object.

3. Final Answer:

   cy.intercept('GET', '/api/users', { statusCode: 200, body: [] }) -> Option D

4. Quick Check:

   Method, URL, response object = cy.intercept('GET', '/api/users', { statusCode: 200, body: [] }) [OK]

Hint: Method first, then URL, then response object [OK]

Common Mistakes:

• Swapping method and URL parameters
• Using status instead of statusCode
• Passing status as a number alone

3. Given this code snippet, what will be the output of the intercepted request's status code?

cy.intercept('GET', '/api/data', { statusCode: 404, body: { error: 'Not found' } }).as('getData')
cy.visit('/data-page')
cy.wait('@getData').then(({ response }) => {
  console.log(response.statusCode)
})

medium

A. 404

B. 200

C. undefined

D. 500

Solution

1. Step 1: Analyze the intercept stub response

   The intercept stubs the GET request to '/api/data' with statusCode 404 and error message.

2. Step 2: Understand the console log output

   The cy.wait waits for the intercepted request. The response object uses response.status (which is 404), but the code logs response.statusCode, which is undefined.

3. Final Answer:

   undefined -> Option C

4. Quick Check:

   response.statusCode = undefined (use response.status) [OK]

Hint: cy.wait response uses .status, not .statusCode [OK]

Common Mistakes:

• Logging response.statusCode instead of response.status
• Confusing response.status with statusCode
• Expecting default 200 without stub

4. Identify the error in this Cypress intercept code:

cy.intercept('GET', '/api/items', (req) => {
  req.reply({ status: 201, body: { id: 1 } })
})

medium

A. Callback function should return a value

B. Using 'status' instead of 'statusCode' in reply object

C. Incorrect URL format

D. Missing method parameter in intercept

Solution

1. Step 1: Check the reply object keys

   The reply object must use 'statusCode' to set HTTP status, not 'status'.

2. Step 2: Verify other parts

   Method and URL are correct, and callback does not need to return a value.

3. Final Answer:

   Using 'status' instead of 'statusCode' in reply object -> Option B

4. Quick Check:

   Use statusCode, not status [OK]

Hint: Use statusCode key in reply, not status [OK]

Common Mistakes:

• Confusing status with statusCode
• Thinking callback must return a value
• Assuming URL format is wrong

5. You want to test how your app handles a slow server response for a POST request to '/api/login'. Which cy.intercept() usage correctly simulates a 2-second delay with a 200 status and a JSON body { success: true }?

hard

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

B. cy.intercept('POST', '/api/login', { delayMs: 2000, status: 200, body: { success: true } })

C. cy.intercept('POST', '/api/login', (req) => { req.reply({ delay: 2000, status: 200, body: { success: true } }) })

D. cy.intercept('POST', '/api/login', (req) => { req.delay(2000).reply({ statusCode: 200, body: { success: true } }) })

Solution

1. Step 1: Understand delay usage in cy.intercept

   Delay, statusCode, and body can be used directly in the response object without a callback.

2. Step 2: Check each option's correctness

   cy.intercept('POST', '/api/login', { delay: 2000, statusCode: 200, body: { success: true } }) correctly uses delay, statusCode, and body directly. cy.intercept('POST', '/api/login', { delayMs: 2000, status: 200, body: { success: true } }) uses wrong keys 'delayMs' and 'status'. cy.intercept('POST', '/api/login', (req) => { req.reply({ delay: 2000, status: 200, body: { success: true } }) }) uses callback but 'status' instead of 'statusCode'. cy.intercept('POST', '/api/login', (req) => { req.delay(2000).reply({ statusCode: 200, body: { success: true } }) }) tries chaining a non-existent req.delay method.

3. Final Answer:

   cy.intercept('POST', '/api/login', { delay: 2000, statusCode: 200, body: { success: true } }) -> Option A

4. Quick Check:

   Direct { delay, statusCode, body } [OK]

Hint: Delay works directly in response object [OK]

Common Mistakes:

• Using wrong keys like delayMs or status
• Using status instead of statusCode in callback
• Trying to chain non-existent req.delay method