Simulando a falha e recuperação do Servidor/API com Cypress

Explorando o poder do Cypress: testando falha e recuperação do servidor com precisão

Garantir a robustez de uma aplicação por meio de testes em diversos cenários é crucial para proporcionar uma experiência confiável aos/às usuários/as.

Um dos desafios enfrentados é simular falhas e recuperações de um servidor ou API.

Neste conteúdo, iremos abordar um teste automatizado escrito com Cypress que replica esse cenário específico, utilizando o comando cy.intercept para manipular requisições e respostas de rede.

Este conteúdo tem como base um teste do repositório Cypress Playground.

Cenário de teste

O teste visa simular uma falha no servidor/API seguida de sua recuperação.

Vamos analisar passo a passo como esse objetivo é alcançado:

it('simula uma falha e recuperação do servidor/API', () => {
  // Simulando o erro no servidor/API
  cy.intercept(
    'GET',
    'https://api.exemplo.com',
    { statusCode: 500 },
  ).as('serverError')

  // Acionando a requisição
  cy.contains('button', 'Obter TODOs').click()

  // Aguardando e verificando o erro no servidor/API
  cy.wait('@serverError')
    .its('response.statusCode')
    .should('be.equal', 500)

  // Verificando a existência da mensagem de erro
  cy.contains(
    '.error span',
    'Ops, algo deu errado. Tente novamente.'
  ).should('be.visible')

  // Recarregando a página
  cy.reload()

  // Simulando uma requisição bem-sucedida
  cy.intercept(
    'GET',
    'https://api.exemplo.com',
    { middleware: true },
  ).as('getTodo')

  // Acionando a recuperação
  cy.contains('button', 'Obter TODOs').click()

  // Aguardando e verificando o sucesso na requisição
  cy.wait('@getTodo')
    .its('response.statusCode')
    .should('be.equal', 200)

  // Garantindo que um TODO foi renderizado na tela
  cy.contains('ul li', 'ID do TODO: ')
    .should('be.visible')
  cy.contains('ul li', 'Título: ')
    .should('be.visible')
  cy.contains('ul li', 'Completo: ')
    .should('be.visible')
  cy.contains('ul li', 'ID do usuário: ')
    .should('be.visible')
})

Análise Detalhada

Vamos analisar cada parte do código para entender como cada trecho contribui para o teste:

Simulando o erro no servidor/API

cy.intercept(
  'GET',
  'https://api.exemplo.com',
  { statusCode: 500 },
).as('serverError')

Nesta seção, utilizamos o comando cy.intercept para interceptar qualquer requisição do tipo GET para a URL especificada (https://api.example.com/), configurando a interceptação para retornar um erro de servidor ({ statusCode: 500 }). A interceptação é nomeada como ‘serverError’, permitindo que esperemos por ela posteriormente.

Acionando a requisição

cy.contains('button', 'Obter TODOs').click()

Esta linha simula uma ação do usuário ao clicar em um botão com o texto ‘Obter TODOs’. Isso aciona a requisição GET interceptada, e o Cypress captura a interceptação rotulada como ‘serverError’.

Aguradando e verificando o erro no servidor/API

cy.wait('@serverError')
  .its('response.statusCode')
  .should('be.equal', 500)

O comando cy.wait('@serverError') pausa a execução do teste até que a requisição interceptada rotulada como ‘serverError’ seja concluída. Isso garante que o teste aguarde a resposta de erro do servidor antes de prosseguir. Além disso, aproveitamos para verificar que o código de status da resposta foi mesmo 500, ou seja, um erro genérico no servidor.

Verificando a existência da mensagem de erro

cy.contains(
  '.error span',
  'Ops, algo deu errado. Tente novamente.'
).should('be.visible')

Após o erro do servidor, o teste espera encontrar um elemento visível com a mensagem de erro especificada. Isso assegura que a aplicação responda adequadamente a um erro do servidor, fornecendo uma mensagem amigável ao usuário.

Recarregando a página

cy.reload()

Esta linha recarrega a página, simulando a tentativa do usuário de se recuperar do erro no servidor.

Simulando uma requisição bem-sucedida

cy.intercept(
  'GET',
  'https://api.exemplo.com',
  { middleware: true },
).as('getTodo')

Aqui, interceptamos a mesma requisição GET, mas desta vez simulamos uma resposta bem-sucedida ({ middleware: true }). A interceptação é nomeada como ‘getTodo’.

Para mais detalhes sobre a propriedade do middleware, recomendo ler sobre o ciclo de vida da interceptação, diretamente na documentação oficial do Cypress.

Acionando a recuperação

cy.contains('button', 'Obter TODOs').click()

Outra ação do usuário aciona a interceptação bem-sucedida da requisição.

Aguardando e verificando o sucesso na requisição

cy.wait('@getTodo')
  .its('response.statusCode')
  .should('be.equal', 200)

O teste espera pela interceptação ‘getTodo’ e verifica se o código de status da resposta é 200, confirmando a recuperação bem-sucedida.

Garantindo que um TODO foi renderizado na tela

As linhas subsequentes validam a presença de elementos específicos na página, garantindo que a aplicação exiba os dados esperados após a recuperação.

cy.contains('ul li', 'ID do TODO: ')
  .should('be.visible')
cy.contains('ul li', 'Título: ')
  .should('be.visible')
cy.contains('ul li', 'Completo: ')
  .should('be.visible')
cy.contains('ul li', 'ID do usuário: ')
  .should('be.visible')

Essas asserções verificam a visibilidade de elementos que indicam que a aplicação obteve e exibiu com sucesso os detalhes do TODO.

Conclusão

Este teste Cypress oferece uma simulação abrangente de falha e recuperação de servidor/API, permitindo que testadores/as e desenvolvedores/as avaliem como uma aplicação responde a erros no servidor.

Cenários realistas, impulsionados por comandos Cypress como o cy.intercept, possibilitam a validação eficaz do comportamento da aplicação em condições desafiadoras.

Garantir feedback significativo e manter a robustez são aspectos críticos para oferecer uma experiência do usuário sem falhas, mesmo diante de potenciais problemas no servidor ou API.

---

Gostou do conteúdo? Deixe um comentário.

---

Quer aprender mais sobre automação de testes web com Cypress? Conheça os cursos da Escola TAT.

• Cypress Playground
• Cypress, do Zero à Nuvem
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

---

👋  Até a próxima e bons testes!