Waiting for Browser API Calls & Cypress

Modern applications load content asynchronously through APIs.If a test does not properly wait for those API responses, race conditions appear.

This reference explains how to correctly wait for browser API calls in Cypress and prevent flakiness in dynamic applications.

The Problem: Asynchronous Content

When UI content depends on /articles API response, Cypress may assert before data is fully loaded.

This approach is flaky:

Why it fails:

• .invoke('text') captures text immediately

• No retry after extraction

• If API is still loading → incorrect value

• Assertion fails

Reliable Solution: Wait for the API Call

Cypress provides synchronization using:

• cy.intercept()

• cy.wait()

Example 1 – Waiting Before UI Validation

What this guarantees:

• Request was made

• Response was received

• Test continues only after completion

• No race condition

Advanced: Access the API Object

cy.wait() returns the intercepted request object.

This includes:

• Request details

• Response body

• Status code

• Headers

Example 2 – Validate API + Validate UI

This approach:

• Confirms backend data

• Confirms UI rendering

• Proves data consistency

• Increases confidence in test reliability

When to Use API Waiting

Use this technique when:

• Content is API-driven

• UI renders after backend response

• Tests show intermittent failures

• Backend validation is required

Avoid adding waits (cy.wait(2000)).

Always synchronize using network calls instead.

Three-Step Pattern

1. Declare intercept with alias

2. Trigger the action

3. Wait for the alias

4. Validate API and/or UI

Key Takeaway

API waiting is not about slowing tests down. It is about aligning the test with the application’s network behavior.