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