Iniciando em Testes Automatizados em JS/React - Cypress e Playwright [PT-BR]

Esse post é um relato/documentação de uma pesquisa envolvendo testes automatizados e todo o contexto de testes para React e JS num geral. Seu objetivo é instigar o leitor para o escopo de testes e TDD.

---

Contexto - Tipos de teste

Antes de começarmos, para testar uma aplicação de forma automatizada, existem alguns tipos de teste que podem ser realizados, entre eles temos:

Teste Unitário:

Testar as coisas a nível de código mesmo, ou seja , testar as coisas da forma mais "micro" possível.

Teste de integração:

Testar as coisas num nível um pouco maior que o unitário, verificando se a integração de duas ou mais coisas está funcionando.

Teste E2E:

Testa e simula todo o fluxo do usuário. É o teste mais custoso (em termos de tempo e processamento) da lista pois realmente simula a navegação do usuário. Deve ser executado quando o lançamento de novas features e alterações acaba alterando ou criando novas possibilidades para o fluxo de usuário.

Fonte da imagem

---

TDD - Test Driven Development

Uma das técnicas mais importantes em termos de desenvolvimento de software, o TDD consiste em inicialmente:

• Criar testes para o seu futuro código/feature/etc.
• Os testes obviamente não passam, já que o código/feature/etc não existe ainda
• Desenvolver o mínimo possível para os testes passarem
• Com os testes passando, refatorar o código, aperfeiçoando-o. Fonte da imagem

É uma técnica muito utilizada e bastante interessante pois acaba trazendo segurança no software desenvolvido. Como o desenvolvedor sempre inicia programando o teste e algo que passa no teste, todas as refatorações seguintes continuarão passando no teste inicial, trazendo muita robustez para o código.

A longo prazo, é uma técnica excelente de manutenção de código, visto que, os testes feitos inicialmente garantirão consistência nos futuros códigos inseridos.

---

Testes aplicados ao Front-End

Iniciei as pesquisas procurando por testes E2E usando react.

Foram encontradas as seguintes bibliotecas e tecnologias que podem ser utilizadas:

• Cypress
• Playwright
• Jest+Puppeteer

---

Minhas opiniões iniciais e implementações

Cypress → Robusto e poderoso, tem muita coisa interessante, porém é meio complicado com os detalhes. Ele tem uma infraestrutura de testes com métricas e análises que é opcional e paga, mas o framework em si é grátis. Possui uma opção de codegen que grava os movimentos e interações que você está fazendo, transcrevendo-os para código.

Playwright → Dos mesmos criadores do puppeteer, mais simples de configurar e até que entrega resultados interessantes. Ele é totalmente gratuito e possui uma opção interessante de codegen também!

Minhas primeiras implementações com Playwright:

Depois de testar e brincar um pouco com o Playwright, direcionei o foco para o Cypress. Aqui está um print da ferramenta:

Comecei desenvolvendo alguns testes simples, o primeiro, um teste para ver se o botão estava clicável e possuía texto:

import React from 'react';
import { mount } from '@cypress/react';
import App from './App';

it('Checks if theres a button with Click ME :D', () => {
  mount(<App />);
  cy.contains('Click ME :D').click();
});

Em sequência, fiz um código simples para verificar o texto da tela principal também:

import React from 'react';
import { mount } from '@cypress/react';
import App from './App';

it('Checks if theres a link with Learn React in it', () => {
  mount(<App />);
  cy.get('a').contains('Learn React');
});

É super simples começar com os testes nesse ponto, basta um it para descrever o que o teste irá realizar e logo em sequência, usar o cy para interagir com os elementos na tela. O Cypress tem algumas implementações para facilitar nosso trabalho com programação assíncrona, executando os comandos sempre que a página carregou e coisa do tipo, facilitando bastante no dia a dia com a ferramenta.

Além disso, o Cypress tem uma dinâmica muito interessante, gravando em arquivos .mp4 os testes realizados, além de abrir uma página também interativa, onde você pode fazer algo similar ao codegen do Playwright.

Nesse repositório, fiz os mesmos testes que foram realizados anteriormente. Em termos de código mesmo, a diferença é bem pequena, a maior diferença é de configuração mesmo.

Para além dos testes, o Cypress possui integração com o Slack:

E uma de suas principais features nessa integração é confirmar que testes chave passaram antes de lançamentos de produtos ou features novas.

Ele também possui integração com o GitHub, podendo rodar juntamente com o workflow do repositório o que facilita demais nas revisões e PRs do dia a dia.

---

Conclusão

Não cheguei a testar muito o Playwright, entretanto, o Cypress é uma ferramenta absurdamente interessante, conseguindo transformar testes assíncronos, com paralelismo e repetibilidade em coisas simples e quase triviais. Além disso, as gravações ajudam muito na hora de tentar entender o que está dando errado com algum teste.
Por fim, testes unitários, de integração e E2E são grandes passos que os desenvolvedores precisam tomar para avançar em suas jornadas. Este foi o meu primeiro passo.

Obrigado por ler até aqui e espero que tenha se interessado por testes.

---

EN: I'm looking forward to translante this document to English when I have spare time. Thanks for the patience!