Cypress: O Guia Definitivo de Testes End-to-End para Aplicações Web

No cenário de desenvolvimento web em rápida evolução de hoje, garantir a qualidade e a confiabilidade das aplicações web é fundamental. Os testes End-to-End (E2E) desempenham um papel crucial na verificação de que todos os componentes de uma aplicação funcionam perfeitamente em conjunto, da perspectiva do utilizador. O Cypress surgiu como um framework de testes E2E líder, oferecendo uma experiência amigável ao desenvolvedor, recursos poderosos e excelente desempenho. Este guia abrangente irá guiá-lo por tudo o que você precisa saber para começar a usar o Cypress e testar efetivamente suas aplicações web.

O que é Cypress?

Cypress é uma ferramenta de testes front-end de última geração construída para a web moderna. Ao contrário dos frameworks de testes tradicionais que executam testes num navegador, o Cypress opera diretamente no navegador, oferecendo controle e visibilidade incomparáveis sobre o comportamento da sua aplicação. Ele foi projetado para ser rápido, confiável e fácil de usar, tornando-o uma escolha popular entre desenvolvedores e engenheiros de QA em todo o mundo. O Cypress é escrito em JavaScript e executa dentro do navegador, tornando-o muito performático e oferecendo acesso incomparável aos recursos internos da aplicação.

Principais Benefícios de Usar o Cypress

• Amigável ao Desenvolvedor: O Cypress fornece uma API limpa e intuitiva, tornando fácil escrever e depurar testes.
• Viagem no Tempo: O Cypress tira snapshots do estado da sua aplicação durante cada comando de teste, permitindo que você volte no tempo e veja exatamente o que aconteceu em qualquer ponto.
• Recarregamentos em Tempo Real: O Cypress recarrega automaticamente quando você faz alterações nos seus testes, fornecendo feedback instantâneo.
• Espera Automática: O Cypress espera automaticamente que os elementos se tornem visíveis ou interativos antes de executar ações, eliminando a necessidade de esperas explícitas.
• Controle de Rede: O Cypress permite que você simule requisições e respostas de rede, permitindo que você simule diferentes cenários e teste o tratamento de erros da sua aplicação.
• Depurabilidade: O Cypress fornece excelentes ferramentas de depuração, incluindo um debugger poderoso e mensagens de erro detalhadas.
• Testes Cross-Browser: O Cypress suporta vários navegadores, incluindo Chrome, Firefox, Edge e Electron.
• Testes Headless: Execute testes no modo headless para uma execução mais rápida em ambientes CI/CD.
• Asserções Integradas: O Cypress fornece um conjunto rico de asserções integradas para verificar o comportamento esperado da sua aplicação.

Instalação e Configuração

Começar com o Cypress é simples. Veja como instalá-lo:

1. Pré-requisitos: Certifique-se de que você tem o Node.js e o npm (Node Package Manager) instalados no seu sistema. Você pode baixá-los no site oficial do Node.js.
2. Instale o Cypress: Abra seu terminal ou prompt de comando, navegue até o diretório do seu projeto e execute o seguinte comando:

            npm install cypress --save-dev
            

              
                Copy
              
            
          

3. Abra o Cypress: Após a conclusão da instalação, você pode abrir o Cypress Test Runner executando:

            npx cypress open
            

              
                Copy
              
            
          

Este comando iniciará o Cypress Test Runner, que fornece uma interface gráfica para executar e depurar seus testes.

Escrevendo Seu Primeiro Teste Cypress

Vamos criar um teste simples para verificar se a página inicial de um site é carregada corretamente. Crie um novo arquivo chamado `example.cy.js` no diretório `cypress/e2e` do seu projeto.

            
// cypress/e2e/example.cy.js

describe('Meu Primeiro Teste', () => {
  it('Visita o Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

            

              
                Copy
              
            
          

Vamos detalhar este teste:

• `describe()`: Define um conjunto de testes, que é uma coleção de testes relacionados.
• `it()`: Define um caso de teste individual dentro do conjunto de testes.
• `cy.visit()`: Navega para o URL especificado.
• `cy.contains()`: Encontra um elemento contendo o texto especificado.
• `.click()`: Clica no elemento selecionado.
• `cy.url()`: Obtém o URL atual da página.
• `.should()`: Faz uma asserção sobre o estado da aplicação.
• `cy.get()`: Seleciona um elemento usando um seletor CSS.
• `.type()`: Digita o texto no elemento selecionado.
• `.should('have.value', 'fake@email.com')`: Afirma que o valor do elemento é igual a 'fake@email.com'.

Execute este teste no Cypress Test Runner para vê-lo em ação. Você deverá ver o navegador navegar para o site Cypress Kitchen Sink, clicar no link "type" e verificar o URL.

Comandos Cypress

O Cypress fornece uma ampla gama de comandos para interagir com sua aplicação. Aqui estão alguns dos comandos mais comumente usados:

• `cy.visit(url)`: Navega para o URL especificado.
• `cy.get(selector)`: Seleciona um elemento usando um seletor CSS.
• `cy.contains(content)`: Seleciona um elemento contendo o texto especificado.
• `cy.click()`: Clica no elemento selecionado.
• `cy.type(text)`: Digita o texto no elemento selecionado.
• `cy.clear()`: Limpa o conteúdo de um elemento de entrada ou área de texto.
• `cy.submit()`: Envia um formulário.
• `cy.check()`: Marca uma caixa de seleção ou botão de rádio.
• `cy.uncheck()`: Desmarca uma caixa de seleção.
• `cy.select(value)`: Seleciona uma opção de uma lista suspensa.
• `cy.scrollTo(position)`: Rola a página até a posição especificada.
• `cy.trigger(event)`: Aciona um evento DOM no elemento selecionado.
• `cy.request(url, options)`: Faz uma requisição HTTP para o URL especificado.
• `cy.intercept(route, handler)`: Intercepta requisições HTTP que correspondem à rota especificada.
• `cy.wait(time)`: Espera pela quantidade de tempo especificada.
• `cy.reload()`: Recarrega a página atual.
• `cy.go(direction)`: Navega para a página anterior ou seguinte no histórico do navegador.
• `cy.url()`: Obtém o URL atual da página.
• `cy.title()`: Obtém o título da página.
• `cy.window()`: Obtém o objeto window.
• `cy.document()`: Obtém o objeto document.
• `cy.viewport(width, height)`: Define o tamanho da viewport.

Estes são apenas alguns dos muitos comandos disponíveis no Cypress. Consulte a documentação do Cypress para obter uma lista completa de comandos e suas opções.

Asserções no Cypress

As asserções são usadas para verificar o comportamento esperado da sua aplicação. O Cypress fornece um conjunto rico de asserções integradas que você pode usar para verificar o estado dos elementos, o URL, o título e muito mais. As asserções são encadeadas após os comandos Cypress usando o método `.should()`.

Aqui estão alguns exemplos de asserções comuns:

• `.should('be.visible')`: Afirma que um elemento está visível.
• `.should('not.be.visible')`: Afirma que um elemento não está visível.
• `.should('be.enabled')`: Afirma que um elemento está habilitado.
• `.should('be.disabled')`: Afirma que um elemento está desabilitado.
• `.should('have.text', 'texto esperado')`: Afirma que um elemento tem o texto especificado.
• `.should('contain', 'texto esperado')`: Afirma que um elemento contém o texto especificado.
• `.should('have.value', 'valor esperado')`: Afirma que um elemento tem o valor especificado.
• `.should('have.class', 'classe esperada')`: Afirma que um elemento tem a classe especificada.
• `.should('have.attr', 'nome do atributo', 'valor esperado')`: Afirma que um elemento tem o atributo e o valor especificados.
• `.should('have.css', 'propriedade CSS', 'valor esperado')`: Afirma que um elemento tem a propriedade CSS e o valor especificados.
• `.should('have.length', comprimento esperado)`: Afirma que um elemento tem o comprimento especificado (por exemplo, o número de elementos em uma lista).

Você também pode criar asserções personalizadas para atender às suas necessidades específicas.

Melhores Práticas para Escrever Testes Cypress

Seguir as melhores práticas pode ajudá-lo a escrever testes Cypress mais fáceis de manter, confiáveis e eficientes. Aqui estão algumas recomendações:

• Escreva Testes Claros e Concisos: Cada teste deve se concentrar numa funcionalidade ou cenário específico. Evite escrever testes excessivamente complexos que sejam difíceis de entender e manter.
• Use Nomes de Teste Significativos: Dê aos seus testes nomes descritivos que indiquem claramente o que eles estão testando.
• Evite Codificar Valores: Use variáveis ou arquivos de configuração para armazenar valores que podem mudar com o tempo.
• Use Comandos Personalizados: Crie comandos personalizados para encapsular a lógica reutilizável e tornar seus testes mais legíveis.
• Isolamento de Testes: Cada teste deve ser independente de outros testes. Evite depender do estado da aplicação de testes anteriores.
• Limpe Após os Testes: Redefina o estado da aplicação após cada teste para garantir que os testes subsequentes comecem do zero.
• Use Atributos de Dados: Use atributos de dados (por exemplo, `data-testid`) para selecionar elementos nos seus testes. É menos provável que os atributos de dados mudem do que as classes ou IDs CSS, tornando seus testes mais resistentes a mudanças na UI.
• Evite Esperas Explícitas: O Cypress espera automaticamente que os elementos se tornem visíveis ou interativos. Evite usar esperas explícitas (por exemplo, `cy.wait()`) a menos que seja absolutamente necessário.
• Teste Fluxos de Usuário: Concentre-se em testar os fluxos de usuário em vez de componentes individuais. Isso ajudará você a garantir que sua aplicação funcione corretamente da perspectiva do usuário.
• Execute Testes Regularmente: Integre os testes Cypress no seu pipeline CI/CD e execute-os regularmente para detectar bugs no início do processo de desenvolvimento.

Técnicas Avançadas do Cypress

Stubbing e Mocking

O Cypress permite que você simule requisições e respostas de rede, permitindo que você simule diferentes cenários e teste o tratamento de erros da sua aplicação. Isso é particularmente útil para testar recursos que dependem de APIs ou serviços externos.

Para simular uma requisição de rede, você pode usar o comando `cy.intercept()`. Por exemplo, o código abaixo simula uma requisição GET para `/api/users` e retorna uma resposta simulada:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

            

              
                Copy
              
            
          

Você pode então esperar pela requisição interceptada usando `cy.wait('@getUsers')` e verificar se sua aplicação manipula a resposta simulada corretamente.

Trabalhando com Local Storage e Cookies

O Cypress fornece comandos para interagir com o armazenamento local e cookies. Você pode usar esses comandos para definir, obter e limpar o armazenamento local e os cookies em seus testes.

Para definir um item de armazenamento local, você pode usar o comando `cy.window()` para acessar o objeto window e, em seguida, usar o método `localStorage.setItem()`. Por exemplo:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

            

              
                Copy
              
            
          

Para obter um item de armazenamento local, você pode usar o comando `cy.window()` e, em seguida, usar o método `localStorage.getItem()`. Por exemplo:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

            

              
                Copy
              
            
          

Para definir um cookie, você pode usar o comando `cy.setCookie()`. Por exemplo:

            
cy.setCookie('myCookie', 'myCookieValue')

            

              
                Copy
              
            
          

Para obter um cookie, você pode usar o comando `cy.getCookie()`. Por exemplo:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

            

              
                Copy
              
            
          

Manipulando Uploads de Arquivos

O Cypress fornece um plugin chamado `cypress-file-upload` que simplifica os uploads de arquivos em seus testes. Para instalar o plugin, execute o seguinte comando:

            npm install -D cypress-file-upload
            

              
                Copy
              
            
          

Em seguida, adicione a seguinte linha ao seu arquivo `cypress/support/commands.js`:

            
import 'cypress-file-upload';

            

              
                Copy
              
            
          

Você pode então usar o comando `cy.uploadFile()` para fazer upload de um arquivo. Por exemplo:

            
cy.get('input[type="file"]').attachFile('example.txt')

            

              
                Copy
              
            
          

Trabalhando com IFrames

Testar IFrames pode ser complicado, mas o Cypress fornece uma maneira de interagir com eles. Você pode usar o comando `cy.frameLoaded()` para esperar que um IFrame seja carregado e, em seguida, usar o comando `cy.iframe()` para obter o objeto document do IFrame.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

            

              
                Copy
              
            
          

Cypress e Integração Contínua/Entrega Contínua (CI/CD)

Integrar o Cypress no seu pipeline CI/CD é essencial para garantir a qualidade da sua aplicação. Você pode executar testes Cypress no modo headless no seu ambiente CI/CD. Veja como:

1. Instale o Cypress: Certifique-se de que o Cypress está instalado como uma dependência no seu projeto.
2. Configure o CI/CD: Configure seu pipeline CI/CD para executar testes Cypress após cada build.
3. Execute o Cypress Headlessly: Use o comando `cypress run` para executar testes Cypress no modo headless.

Exemplo de configuração CI/CD (usando GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

            

              
                Copy
              
            
          

Esta configuração executará os testes Cypress sempre que o código for enviado para a branch `main` ou um pull request for criado para a branch `main`. A ação `cypress-io/github-action` simplifica o processo de execução de testes Cypress no GitHub Actions.

Depurando Testes Cypress

O Cypress fornece excelentes ferramentas de depuração para ajudá-lo a identificar e corrigir problemas em seus testes. Aqui estão algumas dicas para depurar testes Cypress:

• Use o Cypress Test Runner: O Cypress Test Runner fornece uma interface visual para executar e depurar seus testes. Você pode percorrer seus testes um comando por vez, inspecionar o estado da aplicação e visualizar mensagens de erro detalhadas.
• Use o Comando `cy.pause()`: O comando `cy.pause()` pausa a execução do seu teste e permite que você inspecione o estado da aplicação nas ferramentas de desenvolvedor do navegador.
• Use o Comando `cy.debug()`: O comando `cy.debug()` imprime o elemento selecionado no console, permitindo que você inspecione suas propriedades e atributos.
• Use as Ferramentas de Desenvolvedor do Navegador: As ferramentas de desenvolvedor do navegador fornecem uma riqueza de informações sobre sua aplicação, incluindo o DOM, requisições de rede e logs do console.
• Leia as Mensagens de Erro com Atenção: O Cypress fornece mensagens de erro detalhadas que podem ajudá-lo a identificar a causa do erro. Preste atenção à mensagem de erro e ao stack trace.

Cypress vs. Outros Frameworks de Teste

Embora o Cypress seja um poderoso framework de testes end-to-end, é essencial entender como ele se compara a outras opções populares. Aqui está uma breve visão geral:

• Selenium: Selenium é um framework de teste de automação amplamente utilizado. Embora seja flexível e suporte vários idiomas, pode ser complexo de configurar e manter. O Cypress oferece uma experiência mais simples e amigável ao desenvolvedor, principalmente para aplicações baseadas em JavaScript.
• Puppeteer: Puppeteer é uma biblioteca Node que fornece uma API de alto nível para controlar o Chrome ou Chromium headless. É excelente para scraping e automação de tarefas do navegador, mas pode exigir mais configuração manual em comparação com o Cypress para testes end-to-end.
• Playwright: Playwright é outro framework de automação cross-browser desenvolvido pela Microsoft. Ele compartilha semelhanças com o Puppeteer, mas oferece suporte a navegadores mais amplo. O Cypress tem um debugger exclusivo de viagem no tempo e uma experiência de teste mais integrada.

A escolha do framework depende das necessidades e requisitos específicos do seu projeto. O Cypress é uma excelente escolha para aplicações web modernas que exigem testes end-to-end rápidos, confiáveis e amigáveis ao desenvolvedor.

Exemplos do Mundo Real do Cypress em Ação

Vamos explorar alguns exemplos do mundo real de como o Cypress pode ser usado para testar diferentes tipos de aplicações web:

Testando uma Aplicação de E-commerce

Você pode usar o Cypress para testar vários fluxos de usuário em uma aplicação de e-commerce, como:

• Pesquisar produtos
• Adicionar produtos ao carrinho
• Finalizar a compra e fazer um pedido
• Gerenciar configurações de conta

Aqui está um exemplo de um teste Cypress que verifica se um usuário pode adicionar um produto ao carrinho com sucesso:

            
it('Adiciona um produto ao carrinho', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

            

              
                Copy
              
            
          

Testando uma Aplicação de Mídia Social

Você pode usar o Cypress para testar as interações do usuário em uma aplicação de mídia social, como:

• Criar uma nova postagem
• Curtir uma postagem
• Comentar em uma postagem
• Seguir outros usuários

Aqui está um exemplo de um teste Cypress que verifica se um usuário pode criar uma nova postagem com sucesso:

            
it('Cria uma nova postagem', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Olá, mundo!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Olá, mundo!')
})

            

              
                Copy
              
            
          

Testando uma Aplicação Bancária

Para aplicações bancárias, o Cypress pode ser usado para testar funcionalidades críticas, como:

• Fazer login com segurança
• Verificar saldos de contas
• Transferir fundos
• Gerenciar beneficiários

Um teste para verificar uma transferência de fundos pode ser assim (com simulação apropriada para segurança):

            
it('Transfere fundos com sucesso', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

            

              
                Copy
              
            
          

Conclusão

Cypress é um framework de testes end-to-end poderoso e versátil que pode ajudá-lo a garantir a qualidade e a confiabilidade de suas aplicações web. Sua API amigável ao desenvolvedor, recursos poderosos e excelente desempenho o tornam uma escolha popular entre desenvolvedores e engenheiros de QA em todo o mundo. Seguindo as melhores práticas descritas neste guia, você pode escrever testes Cypress eficazes que o ajudarão a detectar bugs no início do processo de desenvolvimento e entregar software de alta qualidade aos seus usuários.

À medida que as aplicações web continuam a evoluir, a importância dos testes end-to-end só aumentará. Abraçar o Cypress e integrá-lo no seu fluxo de trabalho de desenvolvimento irá capacitá-lo a construir experiências web mais robustas, confiáveis e fáceis de usar.