Fala pessoal! Nesse artigo quero debater sobre testes no Front-end, mais especificamente o Cypress. É muito comum em aplicações Back-end serem testadas de diversas formas diferentes, e consequentemente, terem um foco maior no “mundo” dos testes. Essa abordagem não é errada, afinal, na maioria dos casos é o back que vai conter regras de negócios, requisições para banco de dados, dentro outras coisas cruciais para o funcionamento do projeto. Porém, é importante lembrar também de testar a parte visual da aplicação, pois, é através dela que o cliente vai acessar as funcionalidades. No artigo de hoje, pretendo focar em testes automatizados para o front end, e focar no Cypress, o que acredito ser uma das bibliotecas mais famosas para testes no front-end.

O que é um teste automatizado?

Existem diversos tipos de testes, entre eles os testes de unidade, integração, funcionais, ponta a ponta (o famoso E2E), entre vários outros. Cada um deles, aplicados da forma certa, pode, literalmente, levar sua aplicação para outro nível, pois, os mesmo vão oferecer muito mais segurança para sua aplicação. Embora existam muitos tipo de testes, nem todos eles fazem sentido para todas as aplicações. Em aplicações front-end, por exemplo, é bem mais incomum de ver um teste de unidade do que no back-end. Isso acontece, uma vez que, as regras de negócio e funções relacionadas a elas vão estar no back-end (isso não é uma regra, e claro, pode mudar de projeto em projeto). Os testes automatizados, aplicados no front-end, priorizam “simular” um humano para validar determinadas funções dentro do software.

O Cypress

Com o Cypress, é possível testar tudo que “habita” o navegador, independente da tecnologia usada no desenvolvimento do projeto. Os desenvolvedores do mesmo, prometem facilitar a criação de testes automatizados, podendo levar até 60 segundos para criar seu primeiro teste. O Cypress consegue se comunicar e executar tarefas de forma constante. Por isso, o mesmo tem acesso ao front e ao back-end da aplicação, capacitando assim as respostas dos eventos em tempo real. Os criadores do Cypress não intitulam o mesmo como um framework de automação geral. Os mesmos afirmam que se especializaram em criar uma ótima experiência para escrever testes de ponta a ponta para sua aplicação web, visando principalmente a velocidade com que esses testes são executados.

Seu primeiro teste com o Cypress

Para começar a usar o Cypress na sua aplicação, é necessário seguir alguns passos relativamente simples. Vale lembrar que, dependendo do seu sistema operacional, a instalação muda um pouco. No caso de hoje, vou demonstrar instalando em uma maquina linux (Ubuntu 22.04). Primeiro, no caso do meu sistema, é necessário instalar algumas dependências usando o “apt”:

Você pode visitar a documentação do Cypress para conferir quais são elas, pois, elas podem mudar com o decorrer das atualizações do Cypress. Em seguida, já é possível instalar o Cypress no projeto. Nesse caso, testei com um projeto feito em Next.js com Typescript, e usando yarn como gerenciador de pacotes. Para isso, basta executar o comando:

Com ele já instalado, é viável criar um script de testes, para que o mesmo execute automaticamente o Cypress completo para executar os testes:

Agora, já é possivel executar os testes, com o seguinte comando:

Vocẽ vai perceber que nesse ponto, ele vai abrir um programa, feito em Electron, do proprio Cypress. Nessa tela, você vai selecionar a opção de “E2E”:

Logo após esse passo, se caso você não tenha nenhum teste criado, ele sugere para você fazer seu primeiro. Você apenas clicar em prosseguir, pois, uma vez que você criar ele além de fazer seu primeiro teste (usando um site deles mesmo), ele vai criar nos seus arquivos, seu primeiro teste:

Note que esse arquivo foi gerado pelo Cypress, nele você pode alterar e executar novamente que ele reconhece suas alterações.

Conclusão

O Cypress é uma ferramenta incrível para testes. Ele permite simular ações, que em teoria, um ser humano poderia fazer na sua aplicação, e assim, prevenir a mesma de falhas de design e até de segurança. O teste feito como exemplo, apenas verificou se era possível “visitar” a url escrita, porém, o Cypress consegue manipular praticamente tudo que envolve a geração da página, assim como, a dom. Como as funções e dependências mudam com o passar do tempo, sugiro você a visitar a documentação deles, pois, lá eles descrevem vários testes de exemplo que você também pode usar na sua aplicação, beleza?