Testes Automatizados — Cypress

Rafael Neves
3 min readNov 4, 2022

--

Fonte imagem: https://www.cypress.io/

Hey folks,

Hoje falaremos dessa maravilhosa ferramenta chamada Cypress, e afinal do que se trata essa criança?
O Cypress é um framework de teste com conceito de all-in-one, ou seja, todas as bibliotecas e ferramentas necessárias estão integradas de forma que só há necessidade de instalação do próprio Cypress.

Quem usa o Cypress?

Os usuários são geralmente devs aka desenvolvedores ou engenheiros de controle de qualidade aka QA enginners.
Cypress nos permite escrever vários tipos de testes como?
— e2e
— Testes de Integração
— Testes Unitários

Em suma pode testar qualquer coisa que rode em um browser.

Bora deixar papo e bora para o código.

Fonte gif: https://giphy.com/gifs/scaler-official-monday-computer-laptop-scZPhLqaVOM1qG4lT9

Iniciando um projeto do zero, crie um diretório e o abra no seu VS Code.
Execute os comandos abaixo em sequência:

Ao executar o quarto comando (npx cypress open), uma instância do browser irá abrir :

Basicamente to o setup do cypress o qual será iniciado em seu projeto.
Em sequência outra tela a qual pede que escolha um navegador para rodar os testes:

E então nesta já o dashboard do browser de testes, mas aqui temos a opção de iniciar alguns arquivos de testes genéricos para que possamos entender como funciona a coisa.

Selecione a primeira opção ( Scafold example specs):

E vouala, alguns testes foram criados:

Observe baixo como está seu projeto:

OK, com todas essas ações realizadas podemos testar ao menos o TODO fornecido pelo scafold da ferramenta:

Bom, esse se trata de um teste do próprio framework:
Vamos fazer algo mais introdutório para entender como funciona:

Em homenagem ao meu amigo Raul (referência ao Readme bonitão)…

Enfim, temos aqui um teste básico onde temos a sintaxe "cy" para acessar métodos do Cypress o qual iremos na tag ‘.gLFyf’ digitar na barra de pesquisa do Google 'superman é o mais forte de todos' e esperamos encontrar na página ('#rso' → tag css de toda página da google) o resultado → Superman é o super-herói mais poderoso de todos os tempos.
Caso tenha ficado confuso observe o teste abaixo:

Creio que este artigo introdutório esteja ficando muito grande e encerraremos por aqui. Caso desejem mais informações deixem nos comentários.
Cypress é uma ferramenta com grande potencial e podemos configurar diversas métricas, ele fornece JSON com resultados dos testes, dashboards de desempenho e muito mais.

Dêem um bisu na documentação: https://docs.cypress.io/guides/overview/why-cypress\

POC dos estudos no git: https://github.com/RafaelNevesdeOliveira/poc-cypress-e2e

Bom e é isso ai galera fico por aqui e que a força esteja com vocês.

--

--

Rafael Neves

Desenvolvedor de sistemas, apaixonado por tecnologia e novos aprendizados. Compartilhando insights no Medium.