Testes E2E com Cypress

Testes E2E com Cypress ensina como realizar testes end-to-end (E2E) utilizando o Cypress, uma das ferramentas mais populares para testes automatizados em JavaScript, especialmente para aplicações web. Vou explicar todos os conceitos e etapas detalhadamente.

O que são Testes E2E?

Testes End-to-End (E2E) são testes automatizados que verificam o comportamento completo de uma aplicação, do início ao fim, simulando a interação do usuário com a interface. Esses testes são importantes porque validam que todas as partes da aplicação funcionam corretamente em conjunto, como esperado, em um ambiente real.

Cypress: O que é e Como Funciona?

O Cypress é uma ferramenta para testes automatizados de aplicações web. Ele foi desenvolvido para ser fácil de usar, poderoso e rápido. Ele permite que você escreva testes que interagem com a interface de usuário da aplicação da mesma forma que um usuário faria, clicando em botões, preenchendo formulários, validando textos, e muito mais.

Algumas características importantes do Cypress:

• 
  Testes em tempo real: Ele executa os testes no próprio navegador, permitindo ver os testes em execução ao vivo.


• 
  Facilidade de configuração: Não exige configuração complicada para começar.


• 
  Execução rápida: Como o Cypress se executa no navegador, a execução dos testes é mais rápida comparado a outras ferramentas de teste E2E.


• 
  Integração com CI/CD: Ele se integra facilmente com pipelines de CI/CD para automação de testes.

Passo a Passo do Módulo 34

1. Conceituando a ferramenta Cypress

Cypress é uma ferramenta de teste automatizado para aplicações web, principalmente para testes E2E. Ele é projetado para interagir diretamente com o código da aplicação no navegador, tornando o teste mais eficiente.

2. Instalando o Cypress na máquina

Para começar a usar o Cypress, você precisa instalá-lo no seu projeto. Aqui está o comando de instalação:

npm install cypress --save-dev

Isso vai instalar o Cypress como uma dependência de desenvolvimento no seu projeto.

3. Iniciando o Cypress

Depois de instalar o Cypress, você pode abri-lo utilizando o seguinte comando no terminal:

npx cypress open

Isso abrirá o Cypress Test Runner, onde você poderá ver os testes sendo executados no navegador. Ele também cria uma pasta cypress no seu projeto, onde todos os testes e configurações ficam armazenados.

4. Usando a função describe para agrupar testes

No Cypress (e no Jest), usamos describe para agrupar vários testes que fazem parte do mesmo conjunto ou módulo. Isso ajuda a organizar os testes de forma mais estruturada.

describe('Teste de Login', () => {

  it('Deve realizar o login com sucesso', () => {

    cy.visit('https://exemplo.com/login');

    cy.get('input[name="username"]').type('usuario');

    cy.get('input[name="password"]').type('senha123');

    cy.get('button[type="submit"]').click();

    cy.url().should('include', '/dashboard');

  });

});

No exemplo acima:

• 
  describe é utilizado para agrupar os testes relacionados ao login.


• 
  it define um teste específico dentro do grupo. O que se segue dentro do it é o código que realiza a verificação (passos do teste).

5. Usando a função it

A função it é usada para definir casos de teste individuais. Cada caso de teste deve ser independente e representar uma funcionalidade ou comportamento específico da aplicação.

6. Recuperando elementos com a função cy.get

A função cy.get é usada para selecionar elementos da página para interagir com eles nos testes.

Exemplo:

cy.get('input[name="username"]').type('usuario');

cy.get('button[type="submit"]').click();

Aqui, cy.get busca o input com o name="username" e o botão de submit com type="submit", e então realiza as ações de type e click.

7. Introdução ao VScode e Autocomplete

Você pode usar o VSCode para editar seus testes e aproveitar o autocomplete do Cypress, que facilita escrever os testes corretamente, sugerindo métodos e comandos enquanto você digita.

8. Usando Relações Hierárquicas

Cypress permite selecionar elementos com base na hierarquia da página, utilizando seletores CSS mais complexos. Por exemplo, você pode selecionar um botão que está dentro de uma div com uma classe específica:

cy.get('.modal').find('button').click(); // Encontra o botão dentro de .modal e clica

9. Construindo Testes de Filtragem

Um exemplo de teste de filtragem seria verificar se, ao aplicar um filtro, a lista de itens é atualizada corretamente. O Cypress permite realizar esse tipo de teste facilmente, interagindo com os filtros e verificando os resultados.

cy.get('.filter').select('Option 1');

cy.get('.item-list').should('have.length', 5);

10. Usando a função beforeEach

A função beforeEach é útil para configurar o estado do aplicativo antes de cada teste. Isso é especialmente importante quando você precisa garantir que a aplicação esteja em um estado inicial antes de executar o teste.

beforeEach(() => {

  cy.visit('https://exemplo.com');

});

11. Conhecendo o Tipo de Retorno do Cypress

O Cypress usa promessas (Promises) para gerenciar o tempo assíncrono, mas ele lida automaticamente com essas promessas, tornando os testes mais simples. Não é necessário usar await ou .then() em muitos casos, pois o Cypress lida com isso internamente.

12. Organizando o Código para Redução de Linhas

Manter os testes organizados e reutilizáveis é fundamental. Você pode criar funções auxiliares e reutilizar trechos de código.

Exemplo:

function login(username, password) {

  cy.get('input[name="username"]').type(username);

  cy.get('input[name="password"]').type(password);

  cy.get('button[type="submit"]').click();

}



describe('Teste de Login', () => {

  it('Deve fazer login com sucesso', () => {

    login('usuario', 'senha123');

    cy.url().should('include', '/dashboard');

  });

});

13. Conhecendo Recursos Adicionais do Cypress

• 
  Tire Screenshots: O Cypress pode automaticamente tirar screenshots durante os testes. Isso ajuda a visualizar o que aconteceu quando um teste falhou.
  

  cy.screenshot();

• Gerar Relatórios: O Cypress permite a geração de relatórios de execução de testes, o que facilita a análise dos resultados.




• Cypress Run: Para executar os testes em modo headless (sem interface gráfica), use o comando:
  
  

  npx cypress run

• 
  Mocking de Requisições HTTP: Você pode simular respostas de servidores com o Cypress, sem precisar fazer chamadas reais. Isso é útil para testar cenários com dados específicos.
  

cy.intercept('GET', '/api/usuarios', { fixture: 'usuarios.json' }).as('getUsuarios');

14. Instalação do Mock Service Worker (MSW)

O Mock Service Worker é uma ferramenta que permite interceptar requisições HTTP em seus testes. Ele pode ser usado com o Cypress para simular requisições e controlar as respostas.

npm install msw

Em seguida, você pode configurar os manipuladores de rede para interceptar as requisições.

Conclusão

No Módulo 34, você aprendeu a utilizar o Cypress para realizar testes E2E em sua aplicação, garantindo que ela funcione corretamente em situações reais de uso. Você aprendeu como configurar o Cypress, escrever testes, interagir com elementos da página, e utilizar recursos como o beforeEach, cy.get, screenshots, relatórios, e muito mais. Esses testes são cruciais para garantir que sua aplicação funcione corretamente e que novos bugs não sejam introduzidos.