Wait for API after button click in Cypress
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:
<!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.
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.
