cy.intercept() for request interception in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to intercept a GET request to '/api/data'.

Cypress

cy.[1]('GET', '/api/data').as('getData')

Drag options to blanks, or click blank then click option'

Aintercept

Bvisit

Crequest

Dwait

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.visit() instead of cy.intercept() to catch requests.

Using cy.request() which sends a request but does not intercept.

Using cy.wait() which waits for a request but does not intercept.

The cy.intercept() command is used to intercept HTTP requests in Cypress. Here, it intercepts a GET request to '/api/data'.

2fill in blank

medium

Complete the code to stub the response with a status code 200 and body { success: true }.

Cypress

cy.intercept('GET', '/api/data', [1]).as('getData')

Drag options to blanks, or click blank then click option'

A{ body: 'error' }

B{ statusCode: 200, body: { success: true } }

C{ statusCode: 404 }

D{ statusCode: 500 }

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong status codes like 404 or 500 for a successful stub.

Providing body as a string instead of an object.

To stub a response, you provide an object with statusCode and body. Here, status 200 and a success body are correct.

3fill in blank

hard

Fix the error in the code to wait for the intercepted request alias 'getData'.

Cypress

cy.[1]('@getData')

Drag options to blanks, or click blank then click option'

Aintercept

Bvisit

Crequest

Dwait

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.intercept() to wait, which only sets up interception.

Using cy.visit() which loads a page but does not wait for requests.

Using cy.request() which sends a request but does not wait for intercepted ones.

The cy.wait() command waits for the intercepted request to complete using its alias.

4fill in blank

hard

Fill both blanks to intercept a POST request to '/api/login' and stub a 401 unauthorized response.

Cypress

cy.intercept('[1]', '/api/login', [2]).as('loginAttempt')

Drag options to blanks, or click blank then click option'

APOST

B{ statusCode: 401 }

C{ statusCode: 200 }

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET instead of POST for login.

Using 200 status code instead of 401 for unauthorized.

The first blank is the HTTP method 'POST'. The second blank is the stub response with status 401 for unauthorized.

5fill in blank

hard

Fill all three blanks to intercept a PUT request to '/api/user/123', stub a response with status 204, and wait for it.

Cypress

cy.intercept('[1]', '/api/user/123', [2]).as('[3]')
cy.wait('@userUpdate')

Drag options to blanks, or click blank then click option'

APUT

B{ statusCode: 204 }

CuserUpdate

DPOST

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of PUT for update.

Using wrong alias name causing cy.wait() to fail.

The HTTP method is PUT for updating. The stub response uses status 204 (no content). The alias is 'userUpdate' which is used in cy.wait().

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