Why cy.intercept() for request interception in Cypress? - Purpose & Use Cases

The Big Idea

What if you could control every server response in your tests with a single command?

The Scenario

Imagine testing a website that loads data from a server. You refresh the page and wait for the server to respond every time. Sometimes the server is slow or the data changes unexpectedly. You have to check the results manually each time.

The Problem

Manually waiting for server responses is slow and tiring. You might miss errors or get different results each time. It is hard to test how your app behaves with different server responses or errors. This makes testing unreliable and frustrating.

The Solution

Using cy.intercept() lets you catch and control server requests in your tests. You can fake responses, delay them, or simulate errors easily. This makes your tests faster, stable, and predictable without depending on the real server.

Before vs After

✗ Before

cy.visit('/page')
// wait and check data manually
cy.wait(5000)
cy.get('.data').should('contain', 'expected')

✓ After

cy.intercept('GET', '/api/data', { fixture: 'data.json' })
cy.visit('/page')
cy.get('.data').should('contain', 'expected')

What It Enables

You can test your app's behavior under any server condition instantly and reliably.

Real Life Example

Testing a shopping site where you simulate out-of-stock items or server errors without changing the real backend.

Key Takeaways

Manual server testing is slow and unreliable.

cy.intercept() lets you control server responses in tests.

This makes tests faster, stable, and easier to write.

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