Wait for API after button click in Cypress

Last Updated : 24 Oct, 2024

When writing end-to-end tests, it's common to trigger API requests through user actions such as button clicks. Cypress provides a powerful way to wait for these requests and their responses using cy.intercept() and cy.wait(). By doing this, you ensure that your test doesn’t proceed until the API request completes and the response is processed.

Example

HTML Code

Here’s an example HTML page where a button triggers an API call:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API Wait Example</title>
  <script>
    function fetchData() {
      fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json())
        .then(data => {
          document.getElementById('result').innerText = `Title: ${data.title}`;
        });
    }
  </script>
</head>
<body>
  <button id="fetch-btn" onclick="fetchData()">Fetch Data</button>
  <div id="result"></div>
</body>
</html>

Cypress Test Code

Example 1: Wait for an API response after clicking the button.

JavaScript

describe('Wait for API response after button click', () => {
  it('should wait for the API call to complete', () => {
    cy.visit('http://localhost:3000'); // Load your local HTML page

    // Intercept the API request
    cy.intercept('GET', 'https://jsonplaceholder.typicode.com/posts/1').as('getPost');

    // Click the button to trigger the API request
    cy.get('#fetch-btn').click();

    // Wait for the API request to finish
    cy.wait('@getPost');

    // Assert that the API response has updated the result on the page
    cy.get('#result').should('contain', 'Title');
  });
});

Explanation

HTML Code: A button with an id of #fetch-btn triggers a JavaScript function that sends a fetch request to the API and updates the #result div with the response data.
Cypress Test Code:
- cy.intercept('GET', 'https://jsonplaceholder.typicode.com/posts/1').as('getPost'); sets up an interceptor to listen for the API request made to the specified URL and assigns it an alias @getPost.
- cy.get('#fetch-btn').click(); clicks the button, which triggers the API request.
- cy.wait('@getPost'); waits for the API request to complete before proceeding.
- cy.get('#result').should('contain', 'Title'); asserts that the #result div contains the word "Title", verifying that the API response was processed and displayed.

Output

When the test is run:

Cypress will wait for the API request to complete after the button click.
Once the request is complete, it will verify that the page content has been updated with the response data.
In the Cypress test runner, you can see the intercepted request and its response details, ensuring that the request was captured and processed.

Conclusion

Using cy.intercept() and cy.wait() in Cypress allows you to handle asynchronous API calls effectively. This ensures that your tests wait for the necessary responses before making assertions, leading to more reliable and accurate tests.

codersaksyevt

Improve

Article Tags :

Wait for API after button click in Cypress

Example

Explanation

Output

Conclusion

Similar Reads

SDLC MODELS

TYPES OF TESTING

Thank You!

What kind of Experience do you want to share?