Waiting for requests (cy.wait with alias) in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does cy.wait('@alias') do in Cypress?

It waits for a network request that was aliased earlier to complete before continuing the test. This helps ensure the app has received the response before assertions run.

beginner

How do you create an alias for a network request in Cypress?

Use cy.intercept() with .as('aliasName'). For example: cy.intercept('GET', '/api/data').as('getData').

intermediate

Why is using cy.wait() with aliases better than using fixed cy.wait() times?

Because it waits exactly for the network request to finish, making tests faster and more reliable than waiting a fixed time which might be too short or too long.

intermediate

What happens if the aliased request does not complete within the default timeout when using cy.wait('@alias')?

The test will fail with a timeout error, indicating the request did not finish in time. You can adjust the timeout if needed.

intermediate

Can you wait for multiple requests using cy.wait() with aliases?

Yes, you can pass an array of aliases like cy.wait(['@req1', '@req2']) to wait for all specified requests to complete.

What is the correct way to alias a GET request to '/users' in Cypress?

A cy.wait('GET', '/users').as('getUsers')

B cy.route('GET', '/users').alias('getUsers')

C cy.intercept('GET', '/users').as('getUsers')

D cy.get('/users').as('getUsers')

Use cy.intercept() with .as() to create an alias for a network request.

What does cy.wait('@getUsers') do?

A Waits for the aliased network request 'getUsers' to finish

B Waits for 5 seconds

C Starts the network request 'getUsers'

D Cancels the network request 'getUsers'

cy.wait('@alias') waits for the aliased request to complete before continuing.

If a request takes longer than the default timeout, what happens when using cy.wait('@alias')?

A Request is retried automatically

B Test continues immediately

C Test pauses indefinitely

D Test fails with a timeout error

cy.wait() will fail the test if the request does not complete within the timeout.

How can you wait for multiple requests at once in Cypress?

A cy.wait(['@req1', '@req2'])

B cy.wait('@req1 && @req2')

C cy.wait('@req1').wait('@req2')

D cy.wait('@req1 || @req2')

Passing an array of aliases to cy.wait() waits for all specified requests.

Why is using cy.wait() with aliases preferred over fixed time waits?

A It waits longer than fixed times

B It waits exactly for the request, making tests faster and more reliable

C It skips the request

D It makes tests slower

Waiting for requests ensures tests proceed only after responses, avoiding unnecessary delays or flakiness.

Explain how to use cy.intercept() and cy.wait() together to wait for a network request in Cypress.

Think about how to catch and wait for a request before checking results.

Describe why waiting for network requests with aliases improves test reliability compared to fixed time waits.

Consider what happens if the app is slow or fast.

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