Como simular erros com Cypress

Hoje em “pitadas de Cypress”, aprenda como simular erros no servidor e na rede, para testar situações difíceis de controlar no mundo dos testes end-to-end

Testes end-to-end são excelentes para testar cenários de “caminho feliz” e as funcionalidades mais importantes da aplicação.

Porém, existem situações inesperadas, e quando elas ocorrem, a aplicação não pode “quebrar” por completo.

Tais situações podem ocorrer devido à erros no servidor ou na rede, para citar alguns.

Nesses momentos é difícil entregar exatamente o que o usuário esperava. No entanto, a aplicação pode ao menos sugerir ao usuário uma alternativa (nem que seja um “tente mais tarde”).

Como exemplo, irei utilizar uma funcionalidade de busca, onde caso haja uma erro, em vez da aplicação “quebrar” e mostrar uma tela em branco ao usuário, ela mostra a seguinte mensagem: Oops! Tente novamente mais tarde.

Felizmente, com Cypress conseguimos facilmente simular situações de erro.

Vejamos abaixo exemplos de testes de erro no servidor, e na rede.

context('Erros', () => {
  const errorMsg = 'Oops! Tente novamente mais tarde.'

  it('testa erro no servidor', () => {
    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('testa erro na rede', () => {
    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')
  })
})

Nos testes acima, intercepto uma requisição HTTP do tipo GET para o endpoint de busca (com a funcionalidade cy.intercept()), onde no primeiro teste, passo também a opção statusCode com o valor 500 (para simular um erro no servidor); e no segundo teste, passo também a opção forceNetworkError com o valor true (para simular um erro na rede).

Com isso, posso então testar que a mensagem correta é visível ao usuário, sugerindo-o tentar novamente mais tarde.

Obs.: Para a experiência do usuário ser melhor ainda, a aplicação poderia mostrar diferentes mensagens de erro dependendo de “onde” vem o erro, e poderíamos tranquilamente testar ambas as situações, cada uma com sua mensagem específica.

Para mais detalhes sobre a funcionalidade cy.intercept(), recomendo consultar a documentação oficial do Cypress.

E aí, curtiu?

Deixa um comentário.

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

Ah, saiu o curso avançado de Cypress da Escola TAT! Aproveite para assistir a aula de apresentação.