Iniciando com Testes E2E no Cypress

Rocketseat -

Texto de Paulo Clemente
Desenvolvedor e redator de mídias sociais na Rocketseat

Testes de ponta a ponta (E2E) são uma metodologia crucial no desenvolvimento de software, garantindo que os sistemas funcionem como esperado do início ao fim. Esses testes simulam ações reais do usuário, percorrendo todo o aplicativo para verificar sua funcionalidade e desempenho.

Por que os Testes E2E são Importantes?

Eles são essenciais para identificar problemas que só aparecem quando diferentes partes do sistema interagem. Dessa forma, asseguram a qualidade e a confiabilidade do software antes de serem lançados ao mercado.

NLW unite | Evento gratuito de programação na prática | Rocketseat
Desafie-se em uma nova tecnologia criando um projeto completo em 3 aulas no maior evento online e gratuito de programação na prática para todos os níveis da Rocketseat.
Rocketseat

Primeiros Passos com o Cypress

Instalando o Cypress

Para iniciar, é necessário instalar o Cypress. Este processo é simples e pode ser feito através do seguinte comando no terminal:

npm install cypress --save-dev

Configurando seu Ambiente de Teste

Após a instalação, a configuração do ambiente é o próximo passo. Você pode inicializar o Cypress com o comando:

npx cypress open

Isso cria uma estrutura de diretórios com exemplos de testes e arquivos de configuração.

Criando seu Primeiro Teste E2E

Escrevendo Cenários de Teste

A criação de cenários de teste é fundamental. Abaixo está um exemplo simples de um teste E2E escrito para Cypress:

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})

Executando Testes com Cypress

Após escrever o teste, você pode executá-lo através do Cypress UI ou pela linha de comando:

npx cypress run

No Log de Comando você verá o Cypress exibir o conjunto, o teste e sua primeira asserção (que deve passar em verde).

Agora vamos forçar uma falha:

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})

Depois de salvar novamente, você verá o Cypress exibir o teste com falha em vermelho, pois verdadeiro não é igual a falso.

Cypress também exibe o rastreamento de pilha e o quadro de código onde a asserção falhou (quando disponível). Você pode clicar no link azul do arquivo para abrir o arquivo onde ocorreu o erro no seu abridor de arquivos preferido. Para ler mais sobre a exibição do erro, leia sobre erros de depuração.
Teste seus conhecimentos em React | Rocketseat
Quanto você sabe sobre React? Teste seus conhecimentos de programação com a Rocketseat e descubra qual o seu nível de conhecimento nessa tecnologia nesse quiz gratuito 🚀
Rocketseat

Dicas e Melhores Práticas

Estruturando Testes para maior Eficiência

Uma boa estruturação dos testes é crucial para a eficiência. Isso inclui não apenas a organização dos scripts de teste, mas também a divisão lógica dos testes. Aqui estão algumas dicas:

  1. Organize os Testes por Funcionalidade: Agrupe os testes por funcionalidade ou recursos do sistema. Isso facilita a manutenção e a identificação de problemas específicos.
  2. Use Nomenclaturas Claras: Dê nomes descritivos para os testes e as funções. Isso torna o código mais legível e fácil de entender.
  3. Modularize os Testes: Divida testes grandes e complexos em módulos menores. Isso ajuda na manutenção e no reuso de código. Por exemplo, funções comuns como login ou navegação podem ser reutilizadas em vários testes.
  4. Priorize a Clareza sobre a Concisão: Embora seja tentador escrever o código mais curto possível, a clareza deve sempre vir em primeiro lugar. Códigos de teste devem ser facilmente compreensíveis por qualquer pessoa nova no projeto.
  5. Utilize Comentários e Documentação: Comente o código quando necessário e mantenha uma documentação atualizada. Isso facilita a compreensão e a colaboração entre membros da equipe.

Pra quem está começando na área de testes nota-se que com pequenos passos e com poucas configurações consegue-se criar um teste automatizado. E, pra quem já tem uma experiência, o Cypress é uma ótima escolha por excluir a necessidade de ferramentas auxiliares.