Stubbing responses in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result when stubbing a GET request with Cypress?

Consider this Cypress test code that stubs a GET request to '/api/user' and returns a fixed user object. What will be the value of response.body.name inside the test?

Cypress

cy.intercept('GET', '/api/user', { statusCode: 200, body: { name: 'Alice', age: 30 } }).as('getUser')
cy.visit('/profile')
cy.wait('@getUser').then(({ response }) => {
  const userName = response.body.name
  cy.wrap(userName).as('userName')
})
cy.get('@userName').should('equal', 'Alice')

A undefined

B "Bob"

C "Alice"

D null

💡 Hint

Look at the stubbed response body in the cy.intercept call.

The stubbed response returns a body with { name: 'Alice', age: 30 }. So response.body.name is "Alice".

❓ assertion

intermediate

Which assertion correctly verifies the stubbed response status code?

You stub a POST request to '/api/login' with status code 201. Which assertion correctly checks this status code in Cypress?

Cypress

cy.intercept('POST', '/api/login', { statusCode: 201, body: { token: 'abc123' } }).as('login')
cy.visit('/login')
cy.get('button').click()
cy.wait('@login').then(({ response }) => {
  // Which assertion goes here?
})

A expect(response.status).to.equal(201)

B expect(response.status_code).to.equal(201)

C expect(response.code).to.equal(201)

D expect(response.statusCode).to.equal(201)

💡 Hint

Check the exact property name for status code in the response object.

The correct property for HTTP status code in Cypress response is statusCode. Others are invalid or undefined.

🔧 Debug

advanced

Why does this Cypress stub not intercept the request?

Look at this Cypress code snippet. The test expects to stub a GET request to '/api/data', but the stub never triggers. What is the likely cause?

Cypress

cy.intercept('GET', '/api/data', { fixture: 'data.json' }).as('getData')
cy.visit('/dashboard')
cy.wait('@getData')

A The actual request URL includes query parameters, so the stub URL does not match exactly.

B The fixture file 'data.json' is missing from the fixtures folder.

C The alias '@getData' is not used in cy.wait correctly.

D cy.visit does not trigger any network requests.

💡 Hint

Check if the request URL matches exactly the stub URL.

If the real request URL has query parameters like '/api/data?page=1', the stub for '/api/data' won't match unless you use a pattern or wildcard.

🧠 Conceptual

advanced

What is the main benefit of stubbing responses in end-to-end tests?

Why do testers stub network responses in end-to-end tests?

A To test the backend API logic directly without frontend involvement.

B To isolate the frontend from backend changes and make tests faster and more reliable.

C To avoid writing any assertions in tests.

D To disable all network requests during tests.

💡 Hint

Think about how stubbing affects test speed and reliability.

Stubbing isolates frontend tests from backend changes, reduces flakiness, and speeds up tests by avoiding real network calls.

❓ framework

expert

Which Cypress command correctly stubs a delayed response to simulate slow network?

You want to stub a GET request to '/api/items' and delay the response by 2 seconds to simulate slow network. Which command achieves this?

A cy.intercept('GET', '/api/items', { delayMs: 2000, body: [{ id: 1 }] }).as('getItems')

B cy.intercept('GET', '/api/items', { delay: 2000, body: [{ id: 1 }] }).as('getItems')

C cy.intercept('GET', '/api/items', { wait: 2000, body: [{ id: 1 }] }).as('getItems')

D cy.intercept('GET', '/api/items', { timeout: 2000, body: [{ id: 1 }] }).as('getItems')

💡 Hint

Check the exact property name Cypress uses to delay stubbed responses.

Cypress uses delayMs to delay stubbed responses in milliseconds. Other properties are invalid.

Practice

1. What is the main purpose of stubbing responses in Cypress testing?

easy

A. To fake server responses so tests run without a real backend

B. To speed up the browser rendering process

C. To automatically generate test data

D. To record user interactions for playback

Solution

1. Step 1: Understand stubbing concept

   Stubbing means faking server responses so the app can be tested without a real backend.

2. Step 2: Identify purpose in Cypress

   Cypress uses stubbing to isolate frontend tests from backend dependencies, making tests faster and more reliable.

3. Final Answer:

   To fake server responses so tests run without a real backend -> Option A

4. Quick Check:

   Stubbing = Fake server response [OK]

Hint: Stubbing fakes backend responses for isolated frontend tests [OK]

Common Mistakes:

• Thinking stubbing speeds up browser rendering
• Confusing stubbing with test data generation
• Believing stubbing records user actions

2. Which of the following is the correct syntax to stub a GET request to '/api/data' with Cypress?

easy

A. cy.stub('GET', '/api/data', { fixture: 'data.json' })

B. cy.route('GET', '/api/data', { fixture: 'data.json' })

C. cy.intercept('GET', '/api/data', { fixture: 'data.json' })

D. cy.mock('GET', '/api/data', { fixture: 'data.json' })

Solution

1. Step 1: Identify correct Cypress command

   The current Cypress command to stub network requests is cy.intercept().

2. Step 2: Check method and parameters

   Using cy.intercept('GET', '/api/data', { fixture: 'data.json' }) correctly stubs a GET request with a fixture response.

3. Final Answer:

   cy.intercept('GET', '/api/data', { fixture: 'data.json' }) -> Option C

4. Quick Check:

   Use cy.intercept for stubbing requests [OK]

Hint: Use cy.intercept for stubbing, not cy.stub or cy.route [OK]

Common Mistakes:

• Using cy.stub instead of cy.intercept
• Using deprecated cy.route command
• Using cy.mock which does not exist in Cypress

3. Given the code below, what will be the output of the test assertion?

cy.intercept('GET', '/users', { body: [{ id: 1, name: 'Alice' }] }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers').its('response.body[0].name').should('equal', 'Alice');

medium

A. Test passes because the stubbed response matches 'Alice'

B. Test fails because the alias '@getUsers' is not defined

C. Test fails because the response body is empty

D. Test throws a syntax error due to incorrect intercept usage

Solution

1. Step 1: Analyze the intercept stub

   The intercept stubs a GET request to '/users' with a response body containing one user named 'Alice'.

2. Step 2: Check the wait and assertion

   The test waits for '@getUsers' and asserts the first user's name equals 'Alice', which matches the stub.

3. Final Answer:

   Test passes because the stubbed response matches 'Alice' -> Option A

4. Quick Check:

   Stub response matches assertion = pass [OK]

Hint: Alias stub and assert matching response for pass [OK]

Common Mistakes:

• Assuming alias is undefined without .as()
• Thinking response body is empty
• Confusing syntax of cy.intercept

4. Identify the error in the following Cypress stub code:

cy.intercept('POST', '/login', { statusCode: 200, body: { token: 'abc123' } });
cy.visit('/login');
cy.wait('@loginRequest');

medium

A. cy.visit must come before cy.intercept

B. The HTTP method 'POST' is invalid in cy.intercept

C. The response body must be a string, not an object

D. The alias '@loginRequest' is missing because the intercept was not aliased

Solution

1. Step 1: Check alias usage

   The intercept is defined but not given an alias using .as(), so '@loginRequest' does not exist.

2. Step 2: Understand wait on alias

   Waiting on '@loginRequest' fails because the alias was never created.

3. Final Answer:

   The alias '@loginRequest' is missing because the intercept was not aliased -> Option D

4. Quick Check:

   Alias missing causes wait failure [OK]

Hint: Always alias intercept with .as() before waiting [OK]

Common Mistakes:

• Forgetting to add .as() to intercept
• Thinking POST is invalid method
• Believing response body must be string

5. You want to stub a GET request to '/products' that returns different responses based on a query parameter 'category'. Which is the best way to implement this in Cypress?

hard

A. Create multiple cy.intercept calls with the same URL but different responses

B. Use cy.intercept with a function handler to check req.query.category and send different responses

C. Use cy.intercept with a static response ignoring query parameters

D. Use cy.route with a fixture file for all categories

Solution

1. Step 1: Understand dynamic stubbing need

   Different responses based on query parameters require conditional logic in the stub.

2. Step 2: Use function handler in cy.intercept

   cy.intercept supports a function to inspect the request and send custom responses based on req.query.category.

3. Final Answer:

   Use cy.intercept with a function handler to check req.query.category and send different responses -> Option B

4. Quick Check:

   Function handler enables dynamic stubbing [OK]

Hint: Use function in cy.intercept for dynamic responses [OK]

Common Mistakes:

• Trying multiple intercepts with same URL (only last applies)
• Ignoring query parameters in stub
• Using deprecated cy.route instead of cy.intercept