Dynamic response stubbing in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test with dynamic response stubbing?

Consider this Cypress test that stubs a GET request dynamically based on the query parameter.

cy.intercept('GET', '/api/items*', (req) => {
  const category = req.query.category;
  if (category === 'books') {
    req.reply({ body: [{ id: 1, name: 'Book A' }] });
  } else {
    req.reply({ body: [] });
  }
}).as('getItems');

cy.visit('/items?category=books');
cy.wait('@getItems').then(({ response }) => {
  console.log(response.body.length);
});

Cypress

cy.intercept('GET', '/api/items*', (req) => {
  const category = req.query.category;
  if (category === 'books') {
    req.reply({ body: [{ id: 1, name: 'Book A' }] });
  } else {
    req.reply({ body: [] });
  }
}).as('getItems');

cy.visit('/items?category=books');
cy.wait('@getItems').then(({ response }) => {
  console.log(response.body.length);
});

A 0

B 1

C undefined

D TypeError

💡 Hint

Think about what the stub returns when the category query is 'books'.

The stub checks the query parameter 'category'. When it equals 'books', it replies with an array containing one item. So, response.body.length is 1.

❓ assertion

intermediate

Which assertion correctly verifies the dynamic stubbed response contains 2 users?

You stub a GET request to '/api/users' that returns 2 user objects dynamically. Which assertion correctly checks the response length?

Cypress

cy.intercept('GET', '/api/users', (req) => {
  req.reply({ body: [{ id: 1 }, { id: 2 }] });
}).as('getUsers');

cy.visit('/users');
cy.wait('@getUsers').its('response.body').should( /* ??? */ );

A have.length(2)

B equal(2)

C contain.length(2)

D length.equal(2)

💡 Hint

Check the correct Cypress syntax for asserting array length.

The have.length(2) assertion checks that the array has exactly 2 items. Other options are invalid syntax or incorrect.

🔧 Debug

advanced

Why does this dynamic stub not work as expected?

Examine this Cypress intercept code. It should stub different responses based on the request body, but always returns the same response.

cy.intercept('POST', '/api/login', (req) => {
  if (req.body.username === 'admin') {
    req.reply({ statusCode: 200, body: { token: 'admin-token' } });
  }
});

Cypress

cy.intercept('POST', '/api/login', (req) => {
  if (req.body.username === 'admin') {
    req.reply({ statusCode: 200, body: { token: 'admin-token' } });
  }
});

A The req.reply is called twice causing a conflict.

B The stub does not handle non-admin usernames, so requests without 'admin' hang.

C The intercept URL pattern is incorrect and does not match the request.

D The req.body is undefined because the request is not parsed automatically.

💡 Hint

Think about how Cypress parses request bodies in intercept handlers.

In Cypress, req.body is not automatically parsed as JSON in intercept handlers. It is a string unless parsed manually, so req.body.username is undefined.

❓ framework

advanced

Which Cypress command correctly stubs a dynamic GET response based on URL parameters?

You want to stub GET requests to '/api/products' and return different products based on the 'type' query parameter. Which code snippet achieves this?

A

cy.intercept('GET', '/api/products*', (req) => {
  const type = req.query.type;
  if (type === 'electronics') {
    req.reply({ body: [{ id: 1, name: 'Phone' }] });
  } else {
    req.reply({ body: [] });
  }
});

B

cy.intercept('GET', '/api/products', (req) => {
  if (req.url.includes('type=electronics')) {
    req.reply({ body: [{ id: 1, name: 'Phone' }] });
  } else {
    req.reply({ body: [] });
  }
});

C

cy.intercept('GET', '/api/products?type=electronics', (req) => {
  req.reply({ body: [{ id: 1, name: 'Phone' }] });
});

D cy.intercept('GET', '/api/products', { body: [{ id: 1, name: 'Phone' }] });

💡 Hint

Consider how to match any query parameters and access them dynamically.

Option A uses a wildcard * to match any query parameters and accesses req.query.type to decide the response dynamically. Others either do not match all queries or do not handle dynamic responses.

🧠 Conceptual

expert

What is the main advantage of dynamic response stubbing in Cypress tests?

Choose the best explanation for why dynamic response stubbing is useful in Cypress testing.

A It speeds up tests by caching all responses and never making network calls.

B It automatically generates test data without needing manual input or fixtures.

C It allows tests to simulate different server responses based on request data, improving test coverage and realism.

D It replaces the need for writing assertions by validating responses automatically.

💡 Hint

Think about how dynamic stubbing helps test different scenarios.

Dynamic response stubbing lets you tailor responses based on request details, so you can test various cases without changing server code or fixtures. This improves test coverage and mimics real-world behavior.