Introdução

Testes end-to-end têm reputação de ser lentos e instáveis. Ferramentas baseadas em Selenium rodam em um processo separado do navegador, o que gera problemas de temporização e testes que falham aleatoriamente mesmo quando a aplicação está funcionando corretamente. O Cypress adota uma abordagem diferente: ele roda dentro do próprio navegador, no mesmo event loop da aplicação. Isso elimina toda uma categoria de problemas de temporização, tornando os testes mais rápidos de escrever e mais fáceis de depurar.

O que é o Cypress?

Cypress é uma ferramenta de testes open-source construída para aplicações JavaScript modernas. Ela roda diretamente no navegador e funciona com React, Angular e Vue.js sem configuração adicional. Vem com um test runner gráfico que mostra exatamente o que aconteceu em cada etapa, além de um mecanismo de espera automática que elimina a necessidade de sleeps ou waits explícitos nos seus testes.

Principais Funcionalidades do Cypress

  • Time Travel: o Cypress tira snapshots durante a execução dos testes. Passe o mouse sobre qualquer comando no log para ver o estado da aplicação naquele momento.
  • Depurabilidade: mensagens de erro legíveis e stack traces claros. As falhas descrevem o que aconteceu, não apenas qual asserção falhou.
  • Espera Automática: o Cypress aguarda elementos do DOM, requisições de rede e animações antes de prosseguir. Você não precisa espalhar cy.wait(1000) pelos seus testes.
  • Recarregamentos em Tempo Real: os arquivos de teste recarregam automaticamente quando são salvos.
  • Controle de Tráfego de Rede: intercepte e substitua requisições HTTP para testar estados de erro e casos extremos sem depender de um backend ativo.

Por que Usar o Cypress?

Testes instáveis são piores do que nenhum teste: eles corroem a confiança até que o time comece a ignorar as falhas. O modelo em-processo do Cypress elimina a maior parte das race conditions que causam instabilidade em outras ferramentas. A GUI interativa torna a depuração de falhas rápida, pois você pode ver exatamente como estava a aplicação no momento em que o teste falhou.

Como Implementar o Cypress

Instalação

Certifique-se de ter o Node.js instalado e, em seguida, adicione o Cypress ao seu projeto:

npm install cypress --save-dev

Ou, usando yarn:

yarn add cypress --dev

Configuração Inicial

Abra o Cypress pela primeira vez para gerar as pastas e arquivos necessários:

npx cypress open

Isso cria uma pasta cypress com:

  • fixtures/ para dados de teste estáticos.
  • integration/ para arquivos de teste (specs).
  • plugins/ para estender ou modificar o comportamento do Cypress.
  • support/ para comandos customizados reutilizáveis e configuração global.

Configuração

Personalize as configurações em cypress.json:

{
  "baseUrl": "http://localhost:3000",
  "viewportWidth": 1280,
  "viewportHeight": 720,
  "video": true
}

baseUrl é a URL onde sua aplicação roda. viewportWidth e viewportHeight definem as dimensões do navegador. video habilita a gravação das execuções de teste.

Criando um Sistema de Exemplo

Configurando uma Aplicação de Exemplo

Crie uma aplicação Todo básica usando React:

Passo 1: Criar um Novo App React

npx create-react-app cypress-todo-app
cd cypress-todo-app

Passo 2: Construir a Aplicação Todo

Implemente uma interface simples onde os usuários podem adicionar e remover itens de tarefas e, em seguida, inicie o servidor de desenvolvimento:

npm start

Escrevendo Testes com Cypress

Passo 1: Criar um Novo Arquivo de Teste

Dentro de cypress/integration/, crie todo.spec.js.

Passo 2: Escrever os Testes

describe('Todo App', () => {
  beforeEach(() => {
    cy.visit('/');
  });

  it('Displays the app title', () => {
    cy.contains('h1', 'Todo App');
  });

  it('Can add a new todo item', () => {
    const newItem = 'Buy milk';
    cy.get('input[name="new-todo"]').type(`${newItem}{enter}`);
    cy.get('.todo-list').should('contain', newItem);
  });

  it('Can remove a todo item', () => {
    const itemToRemove = 'Buy milk';
    cy.get('.todo-list')
      .contains(itemToRemove)
      .parent()
      .find('.delete-button')
      .click();
    cy.get('.todo-list').should('not.contain', itemToRemove);
  });
});

Passo 3: Executar os Testes

npx cypress open

Selecione todo.spec.js para executar os testes de forma interativa.

Executando Testes e Analisando os Resultados

O test runner do Cypress exibe cada comando conforme ele é executado. Você pode passar o mouse sobre qualquer comando no log para ver um snapshot da aplicação naquele ponto. Testes com falha geram screenshots automaticamente, e a gravação em vídeo captura a execução completa.

Funcionalidades Avançadas

Fixtures

Fixtures carregam dados estáticos de arquivos para os seus testes:

cy.fixture('user.json').then((user) => {
  // Use user data in your tests
});

Comandos Customizados

Código de configuração repetido deve ser colocado em comandos customizados, não copiado entre specs.

Em cypress/support/commands.js:

Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('input[name="email"]').type(email);
  cy.get('input[name="password"]').type(password);
  cy.get('form').submit();
});

Use o comando customizado nos seus testes:

cy.login('test@example.com', 'password123');

Integração Contínua com Cypress

Exemplo com GitHub Actions

Crie um arquivo .github/workflows/cypress.yml:

name: Cypress Tests

on: [push]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Dependencies
        run: npm install
      - name: Run Cypress Tests
        run: npx cypress run

Isso executa o Cypress em modo headless a cada push.

Conclusão

Vale a pena adotar o Cypress se o seu time já sofreu com testes Selenium instáveis ou com o ciclo de feedback lento das ferramentas tradicionais de E2E. A arquitetura in-browser resolve o problema de temporização na raiz. A GUI interativa torna a depuração prática, e não uma tarefa dolorosa. Comece com um punhado de testes cobrindo os fluxos de usuário mais utilizados, faça-os passar de forma confiável no CI e expanda a partir daí.

Recursos Adicionais