$ npm install -D cypress

// ui-spec.js
it('loads the app', () => {
  cy.visit('http://localhost:3030')
  cy.get('.todoapp').should('be.visible')
})

it('adds 2 todos', () => {
  cy.visit('http://localhost:3000')
  cy.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  cy.get('.todo-list li')
    .should('have.length', 2)
})

it('adds 2 todos', () => {
  const user = cy
  user.visit('http://localhost:3000')
  user.get('.new-todo')
    .type('learn testing{enter}')
    .type('be cool{enter}')
  user.get('.todo-list li')
    .should('have.length', 2)
})

// app loading todos on start
loadTodos ({ commit }) {
  commit('SET_LOADING', true)
  axios
    .get('/todos')
    .then(r => r.data)
    .then(todos => {
      console.log('got %d todos', todos.length)
      commit('SET_TODOS', todos)
      commit('SET_LOADING', false)
    })
    .catch(e => {
      console.error('could not load todos')
      console.error(e.message)
      console.error(e.response.data)
    })
},

it('handles 404 when loading todos', () => {
  cy.server()
  cy.route({
    url: '/todos',
    response: 'test does not allow it',
    status: 404
  })
  cy.visit('/', {
    onBeforeLoad: win => {
      cy.spy(win.console, 'error').as('console-error')
    }
  })
  // observe external effect from the app
  cy.get('@console-error')
    .should('have.been.calledWithExactly', 
      'test does not allow it')
})

it('handles 404 when loading todos', () => {
  cy.server()
  cy.route({
    url: '/todos',
    response: 'test does not allow it',
    status: 404
  })
  cy.visit('/', {
    onBeforeLoad: win => {
      cy.spy(win.console, 'error').as('console-error')
    }
  })
  // observe external effect from the app
  cy.get('@console-error')
    .should('have.been.calledWithExactly', 
      'test does not allow it')
})

it('handles 404 when loading todos', () => {
  cy.server()
  cy.route({
    url: '/todos',
    response: 'test does not allow it',
    status: 404
  })
  cy.visit('/', {
    onBeforeLoad: win => {
      cy.spy(win.console, 'error').as('console-error')
    }
  })
  // observe external effect from the app
  cy.get('@console-error')
    .should('have.been.calledWithExactly', 
      'test does not allow it')
})

it('finds record in the database', () => {
  // random text to avoid confusion
  const id = Cypress._.random(1, 1e6)
  const title = `todo ${id}`
  cy.get('.new-todo').type(`${title}{enter}`)

})

it('finds record in the database', () => {
  // random text to avoid confusion
  const id = Cypress._.random(1, 1e6)
  const title = `todo ${id}`
  cy.get('.new-todo').type(`${title}{enter}`)
  cy.task('hasSavedRecord', title).should('equal', true)
})

const hasRecordAsync = (title, ms) => {
  // use promise-retry or convergence
  ...
}

module.exports = (on, config) => {
  on('task', {
    hasSavedRecord (title, ms = 3000) {
      return hasRecordAsync(title, ms)
    }
  })
}

cypress run --record
cypress run --record --group single
cypress run --record --group parallel --parallel