How to simulate errors with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-25 17:03:01

## 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**](https://cypress.io), we can easily simulate error situations.

Below are examples of tests for server and network errors.

```js
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**](https://docs.cypress.io/api/commands/intercept.html)._

___

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

Leave a comment.
___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/25/como-simular-erros-com-cypress/) blog.
___

Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr).

Happy testing! 🎉