How to simulate errors with Cypress

Today, in “Pinches of Cypress”, learn how to simulate errors on the server and network to test difficult-to-control situations in the end-to-end testing world

End-to-end tests are excellent for testing “happy path” scenarios and the most important application features.

However, there are unexpected situations, and when they occur, the application cannot completely "break".

Such situations can occur due to errors on the server or the network, to name a few.

At such times it isn't easy to deliver exactly what the user expected. However, the application can suggest the user an alternative (even if it is a “try again later” message).

For today's example, I will use a searching functionality, where in case of an error, instead of the application “breaking” and showing a blank screen to the user, it shows the following message: Oops! Try again later.

Fortunately, with Cypress, we can easily simulate error situations.

Below are examples of tests for server and network errors.

context('Errors', () => {
  const errorMsg = 'Oops! Try again later'

  it('simulates a server error', () => {
    cy.intercept(
      'GET',
      '**/search?query=cypress',
      { statusCode: 500 }
    ).as('getServerFailure')

    cy.visit('https://example.com/search')

    cy.get('[data-cy="search-field"]')
      .should('be.visible')
      .type('cypress{enter}')
    cy.wait('@getServerFailure')

    cy.contains(errorMsg)
      .should('be.visible')
  })

  it('simulates a network failure', () => {
    cy.intercept(
      'GET',
      '**/search?query=cypressio',
      { forceNetworkError: true }
    ).as('getNetworkFailure')

    cy.visit('https://example.com/search')

    cy.get('[data-cy="search-field"]')
      .should('be.visible')
      .type('cypressio{enter}')
    cy.wait('@getNetworkFailure')

    cy.contais(errorMsg)
      .should('be.visible')
  })
})

In the above tests, I intercept an HTTP request of type GET to the search endpoint (with the cy.intercept() functionality), where in the first test, I also pass the statusCode option with the value 500 (to simulate a server failure). In the second test, I also pass the forceNewtworkError option with the value of true (to simulate a network error).

After that, I can test that the correct message is visible to the user, suggesting that they try again later.

Note: For an even better experience, the application could show different error messages depending on “where” the error comes from, and we could easily test both situations, each with its specific message.

For more details on the cy.intercept() functionality, I recommend reading the official Cypress documentation.

Did you like today's “Pinch of Cypress”?

Leave a comment.

This post was originally published in Portuguese on the Talking About Testing blog.

Would you like to learn about test automation with Cypress? Get to know my online courses on Udemy.

Happy testing! 🎉