cy.intercept() for request interception in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

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

cy.intercept() is used to catch and control HTTP requests made by the application during testing. It helps to spy on, modify, or stub network calls.

beginner

How do you stub a GET request to /api/users with cy.intercept()?

You use cy.intercept('GET', '/api/users', { fixture: 'users.json' }) to replace the real response with a fixture file.

beginner

What does it mean to 'spy' on a request using cy.intercept()?

Spying means watching the request and response without changing them. You can check if the request was made and inspect its details.

intermediate

How can you wait for an intercepted request to complete before continuing a test?

Use cy.wait() with an alias set by cy.intercept(). For example, cy.intercept('GET', '/api/data').as('getData') then cy.wait('@getData').

beginner

Why is intercepting requests useful in testing web applications?

It helps make tests faster, more reliable, and independent of backend changes by controlling network responses and simulating different scenarios.

What does cy.intercept() primarily do in Cypress?

A Intercept CSS styles

B Intercept user clicks

C Intercept and control HTTP requests

D Intercept console logs

cy.intercept() is designed to intercept HTTP requests, not user actions or styles.

How do you alias an intercepted request for later use?

A Using <code>.as('aliasName')</code>

B Using <code>.wait('aliasName')</code>

C Using <code>.get('aliasName')</code>

D Using <code>.click('aliasName')</code>

You assign an alias with .as() to reference the intercepted request later.

Which HTTP method can cy.intercept() handle?

A All HTTP methods

B Only POST

C Only GET

D Only PUT and DELETE

cy.intercept() can intercept any HTTP method like GET, POST, PUT, DELETE, etc.

What is a common use of stubbing with cy.intercept()?

A To block user input

B To replace real server responses with fake data

C To speed up CSS rendering

D To change browser settings

Stubbing replaces real server responses with controlled data for predictable tests.

What happens if you do not wait for an intercepted request before asserting results?

A Test will always pass

B Test will reload the page

C Test will skip the request

D Test might fail because the request is not finished

Not waiting can cause assertions to run too early, leading to failures.

Explain how to use cy.intercept() to stub a POST request and why this is useful.

Think about controlling server responses to test different scenarios.

Describe the difference between spying and stubbing with cy.intercept().

One watches requests, the other changes responses.

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