Network Errors

Error response from the server

Let's say the application is trying to fetch some data from the server. What happens when the server responds with 500 status code.

<button id="fetch-comment" class="btn btn-primary">
  Try fetching a comment
<div class="result"></div>
  ;(function () {
    // we fetch all data from this REST json backend
    const root = ''

    function getComment() {
        url: `${root}/comments/1`,
        method: 'GET',
        .then(function (data) {
          console.log('data', data)
        .fail(function (err) {
          if (err.responseJSON) {
          } else {
            $('.result').text('Network error')

    $('#fetch-comment').on('click', function (e) {
// stub the fetch request, respond with status code 500
cy.intercept('/comments/1', {
  statusCode: 500,
  body: {
    error: 'Server has a day off',
cy.contains('.result', 'Server has a day off').should(

Connection error

You can simulate network error (like the connection dropping) using the command cy.interceptopen in new window and the forceNetworkError response property.

cy.log('**connection error**')
// first time return a stub text
// second time simulate a network error
// but cy.intercepts are applied in reverse order
cy.intercept('/comments/1', { forceNetworkError: true })
  { times: 1 },
  { body: { body: 'Stub comment' } },
// click the button and check how the application shows the data
cy.contains('.result', 'Stub comment').should('be.visible')

// and then handles the error response
cy.contains('.result', 'Network error').should('be.visible')