Waiting for requests (cy.wait with alias) in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider the following Cypress test code. What will be the value of response.status after the cy.wait('@getUser') command resolves?

Cypress

cy.intercept('GET', '/api/user').as('getUser');
cy.visit('/profile');
cy.wait('@getUser').then(({ response }) => {
  const status = response.status;
  cy.wrap(status).as('statusCode');
});
cy.get('@statusCode').then(statusCode => {
  console.log(statusCode);
});

A 200

B undefined

C 404

D 500

💡 Hint

The intercept simulates a successful GET request to '/api/user'.

The intercept command sets up a stub for the GET request to '/api/user' which by default returns a 200 status. The cy.wait('@getUser') waits for this request and the response status is 200.

❓ assertion

intermediate

Which assertion correctly waits for and verifies the response body property?

You want to wait for the API call aliased as '@fetchData' and assert that the response body has a property success set to true. Which option correctly does this?

A cy.get('@fetchData').should('have.property', 'response.body.success', true);

B cy.wait('@fetchData').should('have.property', 'success', true);

C cy.wait('@fetchData').its('response.body.success').should('eq', true);

D cy.wait('@fetchData').then(({ response }) => expect(response.body.success).to.be.true);

💡 Hint

Use cy.wait with its to access nested properties.

Option C correctly waits for the alias and accesses the nested property using its, then asserts it equals true. Option C is invalid because should does not work directly on the alias object like that. Option C uses cy.get which is for DOM elements, not aliases. Option C correctly accesses response.body by destructuring the argument.

🔧 Debug

advanced

Why does this test fail to wait for the request?

This Cypress test fails intermittently because cy.wait('@postData') times out. What is the most likely reason?

Cypress

cy.intercept('POST', '/api/data').as('postData');
cy.visit('/form');
cy.get('button[type=submit]').click();
cy.wait('@postData');

A The POST request happens before the intercept is set up.

B The button click does not trigger the POST request.

C The alias '@postData' is misspelled in cy.wait.

D cy.wait cannot be used with POST requests.

💡 Hint

Check if the user action triggers the network request.

If the button click does not trigger the POST request, cy.wait('@postData') will time out waiting for a request that never happens. The intercept and alias are correctly set up before the visit, and cy.wait works with POST requests. The alias spelling is correct.

🧠 Conceptual

advanced

What is the main benefit of using cy.wait with an alias in Cypress tests?

Why do testers use cy.wait('@alias') instead of arbitrary cy.wait(time) delays?

A It retries the request automatically if it fails.

B It pauses the test for a fixed time to avoid race conditions.

C It disables all other network requests during the wait.

D It waits exactly for the network request to finish, making tests more reliable and faster.

💡 Hint

Think about waiting for real events vs fixed delays.

Using cy.wait with an alias waits for the actual network request to complete, avoiding flaky tests caused by guessing wait times. Fixed delays can be too short or too long, making tests unreliable or slow. Cypress does not retry requests automatically with cy.wait, nor does it disable other requests.

❓ framework

expert

In a complex test suite, how can you wait for multiple requests with different aliases before proceeding?

You have three API calls aliased as '@getUser', '@getPosts', and '@getComments'. You want to wait for all three to finish before continuing the test. Which code snippet correctly waits for all three requests?

A cy.wait(['@getUser', '@getPosts', '@getComments']);

B cy.wait('@getUser'); cy.wait('@getPosts'); cy.wait('@getComments');

C Promise.all([cy.wait('@getUser'), cy.wait('@getPosts'), cy.wait('@getComments')]);

D cy.wait('@getUser && @getPosts && @getComments');

💡 Hint

Check Cypress docs for waiting on multiple aliases at once.

Option A uses an array of aliases in cy.wait, which waits for all listed requests to complete before continuing. Option A waits sequentially but is less efficient and can cause timing issues. Option A is invalid because cy.wait returns Cypress chainables, not promises usable with Promise.all. Option A is invalid syntax.

Practice

1. What is the main purpose of using cy.wait() with an alias in Cypress tests?

easy

A. To log the test results to the console

B. To pause the test until a specific network request finishes

C. To reload the page automatically

D. To skip a test step temporarily

Solution

1. Step 1: Understand cy.wait() with alias

   The cy.wait() command pauses the test until the network request with the given alias completes.

2. Step 2: Purpose of waiting for requests

   This ensures the test runs only after the needed data is loaded, making tests reliable.

3. Final Answer:

   To pause the test until a specific network request finishes -> Option B

4. Quick Check:

   Waiting for request = pause test until done [OK]

Hint: Wait pauses test until named request finishes [OK]

Common Mistakes:

• Thinking cy.wait skips steps
• Confusing cy.wait with page reload
• Using cy.wait without alias

2. Which of the following is the correct syntax to alias a network request in Cypress?

easy

A. cy.intercept('/api/data').alias('getData')

B. cy.route('/api/data').alias('getData')

C. cy.wait('/api/data').as('getData')

D. cy.intercept('/api/data').as('getData')

Solution

1. Step 1: Identify correct alias method

   In Cypress, cy.intercept() is used to spy or stub requests, and .as() assigns an alias.

2. Step 2: Check syntax correctness

   cy.intercept('/api/data').as('getData') uses cy.intercept('/api/data').as('getData'), which is the correct syntax.

3. Final Answer:

   cy.intercept('/api/data').as('getData') -> Option D

4. Quick Check:

   Alias uses .as() after intercept [OK]

Hint: Use .as() to alias intercept, not .alias() [OK]

Common Mistakes:

• Using .alias() instead of .as()
• Trying to alias cy.wait instead of cy.intercept
• Using deprecated cy.route instead of cy.intercept

3. Given the code below, what will be the output in the test if the request takes 500ms to complete?

cy.intercept('GET', '/users').as('getUsers')
cy.visit('/users')
cy.wait('@getUsers').then(({ response }) => {
  console.log(response.status)
})

medium

A. 200

B. undefined

C. 500

D. 404

Solution

1. Step 1: Understand intercept and wait behavior

   The cy.intercept() spies on the GET request to '/users' and aliases it as 'getUsers'.

2. Step 2: Analyze the wait and response

   cy.wait('@getUsers') waits for the request to finish, then logs the response.status. A successful GET usually returns 200.

3. Final Answer:

   200 -> Option A

4. Quick Check:

   Wait logs response status 200 [OK]

Hint: Wait returns response object with status [OK]

Common Mistakes:

• Confusing request duration with status code
• Expecting wait to return undefined
• Assuming 404 if request is slow

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

cy.intercept('POST', '/login').as('loginRequest')
cy.get('button#submit').click()
cy.wait('loginRequest')

medium

A. Missing @ symbol in cy.wait alias

B. Incorrect HTTP method in intercept

C. Alias name should be in double quotes

D. cy.get selector is invalid

Solution

1. Step 1: Check cy.wait usage

   The cy.wait() command requires the alias to be prefixed with '@' to identify the request alias.

2. Step 2: Identify the error

   The code uses cy.wait('loginRequest') missing the '@', which causes Cypress to not recognize the alias.

3. Final Answer:

   Missing @ symbol in cy.wait alias -> Option A

4. Quick Check:

   Alias in cy.wait needs '@' prefix [OK]

Hint: Always prefix alias with '@' in cy.wait [OK]

Common Mistakes:

• Omitting '@' before alias in cy.wait
• Using wrong HTTP method in intercept
• Thinking quotes affect alias recognition

5. You want to test that after clicking a button, a POST request to '/submit' completes successfully before checking the page content. Which is the best way to write this in Cypress?

hard

A. cy.intercept('POST', '/submit').as('submitRequest')
cy.wait('@submitRequest')
cy.get('button#send').click()
cy.contains('Success').should('be.visible')

B. cy.get('button#send').click()
cy.wait('@submitRequest')
cy.intercept('POST', '/submit').as('submitRequest')
cy.contains('Success').should('be.visible')

C. cy.intercept('POST', '/submit').as('submitRequest')
cy.get('button#send').click()
cy.wait('@submitRequest')
cy.contains('Success').should('be.visible')

D. cy.get('button#send').click()
cy.contains('Success').should('be.visible')
cy.intercept('POST', '/submit').as('submitRequest')
cy.wait('@submitRequest')

Solution

1. Step 1: Setup intercept before action

   You must call cy.intercept() and alias before triggering the request by clicking the button.

2. Step 2: Wait for request before assertions

   Use cy.wait('@submitRequest') after clicking to pause until the POST completes, then check page content.

3. Final Answer:

   Intercept first, click, wait, then assert success message -> Option C

4. Quick Check:

   Intercept before action, wait after click [OK]

Hint: Always intercept before triggering request, then wait [OK]

Common Mistakes:

• Waiting before intercepting
• Asserting before request finishes
• Interception after click triggers request