Unveiling Cypress's Power: Testing Internet Outages and Recoveries with Precision
Testing an application under various scenarios is crucial to ensure its robustness and user-friendliness.
One common yet challenging scenario is simulating internet outages and recoveries.
In this blog post, we'll explore a Cypress test that replicates this scenario, utilizing the powerful intercept
command to manipulate network requests and responses.
This blog post was originated by the following test, from the Cypress Playground repository.
The Test Scenario
The test aims to simulate the internet going "down" and then recovering.
Let's walk through the code step by step to understand how it achieves this:
// Complete Code
it('simulates the internet going "down" then back "up"', () => {
// Simulating Network Error
cy.intercept(
'GET',
'https://jsonplaceholder.typicode.com/todos/1',
{ forceNetworkError: true }
).as('networkError')
// Triggering the Request
cy.contains('button', 'Get TODO').click()
// Handling the Network Error
cy.wait('@networkError')
cy.contains(
'.error span',
'Oops, something went wrong. Check your internet connection, refresh the page, and try again.'
).should('be.visible')
// Triggering Recovery
cy.reload()
// Simulating Successful Request
cy.intercept(
'GET',
'https://jsonplaceholder.typicode.com/todos/1',
{ middleware: true }
).as('getTodo')
cy.contains('button', 'Get TODO').click()
cy.wait('@getTodo')
.its('response.statusCode')
.should('be.equal', 200)
// Validating Result
cy.contains('ul li', 'TODO ID: ').should('be.visible')
cy.contains('ul li', 'Title: ').should('be.visible')
cy.contains('ul li', 'Completed: ').should('be.visible')
cy.contains('ul li', 'User ID: ').should('be.visible')
})
Breaking It Down
Let's break it down, so you can understand each piece of code step-by-step.
1. Simulating Network Error
cy.intercept(
'GET',
'https://jsonplaceholder.typicode.com/todos/1',
{ forceNetworkError: true }
).as('networkError')
In this section, we use the cy.intercept
command to intercept any GET request to the specified URL (https://jsonplaceholder.typicode.com/todos/1
). The interception is configured to force a network error (forceNetworkError: true
). The interception is named 'networkError' using the as
command, allowing us to wait for it later.
2. Triggering the Request
cy.contains('button', 'Get TODO').click()
This line simulates a user action by clicking a button with the text 'Get TODO.' This triggers the intercepted GET request, and Cypress will capture the interception labeled as 'networkError.'
3. Handling the Network Error
cy.wait('@networkError')
The cy.wait('@networkError')
command pauses the test execution until the intercepted request labeled 'networkError' is completed. This ensures that the test waits for the network error response before proceeding.
cy.contains(
'.error span',
'Oops, something went wrong. Check your internet connection, refresh the page, and try again.'
).should('be.visible')
After the network error, the test expects to find a visible element with the specified error message. This asserts that the application responds appropriately to a network error, providing a user-friendly message.
4. Triggering Recovery
cy.reload()
This line reloads the page, simulating a user's attempt to recover from the network error.
5. Simulating Successful Request
cy.intercept(
'GET',
'https://jsonplaceholder.typicode.com/todos/1',
{ middleware: true }
).as('getTodo')
Here, we intercept the same GET request, but this time, we simulate a successful response ({ middleware: true }
). The interception is named 'getTodo'.
For more details about the
middleware
property, I recommend reading about the interception lifecycle, directly from the Cypress official docs.
cy.contains('button', 'Get TODO').click()
Another user action triggers the successful request interception.
cy.wait('@getTodo')
.its('response.statusCode')
.should('be.equal', 200)
The test waits for the 'getTodo' interception and asserts that the response status code is 200, confirming the successful recovery.
6. Validating Result
The subsequent lines validate the presence of specific elements on the page, ensuring that the application displays the expected data after the recovery.
cy.contains('ul li', 'TODO ID: ').should('be.visible')
cy.contains('ul li', 'Title: ').should('be.visible')
cy.contains('ul li', 'Completed: ').should('be.visible')
cy.contains('ul li', 'User ID: ').should('be.visible')
These assertions check for the visibility of elements indicating that the application has successfully fetched and displayed the TODO details.
Conclusion
This Cypress test provides a comprehensive simulation of internet outage and recovery, allowing testers and developers to evaluate how an application responds to network errors.
Realistic scenarios, powered by Cypress commands like intercept
, enable effective validation of application behavior under challenging conditions.
Finally, ensuring meaningful feedback and maintaining robustness are critical aspects of delivering a seamless user experience, even in the face of potential network issues.
Did you like the content? Leave a comment.
Would you like to learn Cypress in a hands-on course?
I introduce you to my newest course, 🌲 Cypress, from Zero to the Cloud ☁️.
I hope you like it, and happy testing!
Top comments (0)