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.


Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy, e bons testes! 🎉

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

3 comentários em “Como simular erros com Cypress

Deixe uma resposta para QApabilities Cancelar resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s