DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to simulate errors with Cypress
Walmyr Filho
Walmyr Filho

Posted on • Updated on

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')
  })
})
Enter fullscreen mode Exit fullscreen mode

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! πŸŽ‰

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.