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.