Waiting for requests (cy.wait with alias) in Cypress - Build an Automation Script

Verify API request completes successfully using cy.wait with alias

Preconditions (2)

Step 1: Open the test page at http://localhost:3000

Step 2: Intercept the GET request to /api/data and alias it as 'getData'

Step 3: Click the 'Load Data' button

Step 4: Wait for the 'getData' request to complete using cy.wait('@getData')

Step 5: Verify the response status code is 200

Step 6: Verify the page displays the loaded data text 'Data loaded successfully'

✅ Expected Result: The API request completes with status 200 and the page shows 'Data loaded successfully'

Automation Requirements - Cypress

Assertions Needed:

Verify the intercepted request response status is 200

Verify the page contains the text 'Data loaded successfully'

Best Practices:

Use cy.intercept to stub or spy on network requests

Use cy.wait with alias to wait for specific requests

Use clear and descriptive aliases

Avoid hardcoded waits like cy.wait(5000)

Use assertions after cy.wait to confirm request success

Automated Solution

Cypress

describe('API request wait test', () => {
  it('waits for API request and verifies response', () => {
    cy.visit('http://localhost:3000');

    // Intercept GET /api/data and alias as 'getData'
    cy.intercept('GET', '/api/data').as('getData');

    // Click the button that triggers the API request
    cy.get('button#load-data').click();

    // Wait for the API request to complete
    cy.wait('@getData').its('response.statusCode').should('eq', 200);

    // Verify the page shows success message
    cy.contains('Data loaded successfully').should('be.visible');
  });
});

This test first visits the page where the API request will be triggered.

We use cy.intercept to watch the GET request to /api/data and give it the alias getData.

Clicking the button triggers the request.

Then cy.wait('@getData') waits for that request to finish before continuing.

We check the response status code is 200 to confirm success.

Finally, we assert the page shows the success message, confirming the UI updated correctly.

This approach avoids using fixed delays and makes the test reliable and fast.

Common Mistakes - 3 Pitfalls

{'mistake': 'Using cy.wait with a fixed time like cy.wait(5000) instead of waiting for the request alias', 'why_bad': 'Fixed waits slow tests and can cause flakiness if the request takes longer or shorter time', 'correct_approach': "Use cy.wait('@alias') to wait exactly for the network request to complete"}

{'mistake': 'Not aliasing the intercepted request before triggering it', 'why_bad': 'Without alias, cy.wait cannot target the specific request, so waiting is ineffective', 'correct_approach': "Always use cy.intercept(...).as('aliasName') before the action that triggers the request"}

{'mistake': 'Not asserting the response status or content after cy.wait', 'why_bad': 'Waiting alone does not verify the request succeeded or returned expected data', 'correct_approach': "Add assertions on the intercepted request's response and page content after cy.wait"}

Bonus Challenge

Now add data-driven testing with 3 different API endpoints and verify each response

Show Hint

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