M

MLOG

Português

Um guia abrangente do Cypress, o poderoso framework de testes end-to-end, cobrindo instalação, escrita de testes, depuração, integração CI/CD e melhores práticas.

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

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:
    3. npm install cypress --save-dev
  3. Abra o Cypress: Após a conclusão da instalação, você pode abrir o Cypress Test Runner executando:
    4. npx cypress open

    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')
  })
})

Vamos detalhar este teste:

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:

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:

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:

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')

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')
})

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')
})

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


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

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


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

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

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


import 'cypress-file-upload';

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')

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()

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'

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:

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:

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:

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')
})

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:

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!')
})

Testando uma Aplicação Bancária

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

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')
})

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.