Testes E2E no JavaScript com Cypress.io
Tudo tranquilo galerinha? Em dezembro publiquei um artigo falando sobre testes E2E no PHP e, na ocasião, levantei alguns pontos que sempre devemos levar em consideração quando falamos de testes. Por esse motivo, vou trazer uma parte do conteúdo publicado lá:
Antes de continuar, é importante citar que esses testes devem ser utilizados com cuidado, pois esses testes são custosos e com o tempo podem surgir alguns problemas como: o custo de manutenção se torna alto, os testes demoram muito para rodar (aumentando tempo de build) e dar feedback sobre o sistema, muitos testes falham devido a falsos negativos, etc.
Para evitar esses problemas, algo que devemos levar em conta é a pirâmide de automação de testes.
Mike Cohn descreve o conceito da Pirâmide de Automação de Testes (Test Automation Pyramid) em seu livro Succeeding with Agile.
No livro Cohn diz que testes automatizados devem ser compostos de 3 níveis: Unidade, Serviço (Integração) e UI (Aceitação ou e2e). Ou seja, temos uma maior quantidade de testes unitários na base da pirâmide, pois são mais rápidos de serem executados e fáceis de manter. No centro, temos uma quantidade média de testes de serviço (Integração), que testam, basicamente, os serviços da aplicação “abaixo” da UI e evitamos criar exaustivamente testes de aceitação para validar regras de negócio. No topo, temos uma pequena quantidade de testes de aceitação, para evitar os problemas que citamos anteriormente. — [1] Testes de Aceitação com PHP
Com o contexto apresentado acima vamos continuar com a nossa introdução ao Cypress.io, uma ferramenta que eu tive a oportunidade de conhecer durante uma prova de conceito, ou PoC (sigla do inglês, Proof of Concept), que estava desenvolvendo no trabalho. Achei essa ferramenta muito interessante e completa, ela permite tirar screenshot, gravar a execução dos testes e muitas outras funcionalidades, tudo isso agregado ao fato de ter uma documentação bem completa, chamaram minha atenção e com isso, eu resolvi compartilhar essa experiência e conhecimento.
Vamos nessa!!!
Preparando o ambiente
Como base para os testes, eu utilizei o site do Traning Center e a API do Pokemon, portanto, não é preciso subir nenhuma aplicação, vamos apenas instalar o básico para rodar os testes.
Obs: devido ao fato de utilizarmos aplicações de terceiros, pode ser que alguns cenários dos testes parem de funcionar, caso isso aconteça, estarei sempre a disposição para atualizar o projeto, e todos podem se sentir a vontade para mandar PR (pull request) ajeitando possíveis erros ou até mesmo adicionando testes ao projeto. =)
- Instale o Node.js (esse artigo do Mateus Malaquias pode ajudar nesse processo).
- Instale o Git.
- Faça o download ou clone do repositório e2e-tests-js.
- Após o download terminar, acesse a pasta do projeto.
cd caminho/para/o/diretorio/e2e-tests-js
- Para instalar as dependências, basta executar o seguinte comando.
npm install
O Cypress.io e todas as suas dependências serão instaladas no projeto. Sim, nosso ambiente está pronto.
Como descrito na documentação “A complete end-to-end testing experience.” (Uma experiência completa de teste de ponta a ponta.), o Cypress diminui muito a complexidade de instalação que outras ferramentas possuem, apenas instalando ele como dependência, todo o ambiente estará pronto.
Caso queira instalar o Cypress em seu projeto, você pode rodar o comando a seguir:
npm install --save-dev cypressEstrutura do Cypress.io e os testes
Após terminar a instalação do cypress, uma pasta com o nome da ferramenta será criada bem como um arquivo chamado cypress.json. No arquivo cypress.json é aonde colocamos as configurações do mesmo, a seguir segue um exemplo desse arquivo:
No exemplo acima, eu utilizei as configurações responsáveis por gravar os teste e de tirar print quando o teste falha, ambas estão configuradas para não serem executadas.
Agora vamos ver a estrutura de pastas dentro da pasta cypress:
Para esse artigo, vamos nos preocupar apenas com a pasta integration/, é dentro desta pasta que os arquivos de teste serão criados, começaremos com o tc_spec.js, que será responsável por testar o site do Training Center.
O describe serve para escrever a os cenários de testes que serão realizados, no exemplo acima por exemplo, ele contem, no primeiro describe, o texto “Training Center — Site”, ou seja, o site do Training Center é o que está sendo testado. Um ponto bacana, é que um describe pode ser colocado dentro do outro, podendo criar sub descrições, como mostrado no exemplo acima no segundo describe, ele contem o texto “Title”, ou seja, esse cenário está testando o titulo.
O it é aonde a descrição do teste, e o próprio teste em si serão colocados. O primeiro parâmetro é a descrição do deste, como por exemplo no primeiro it, nele contém o texto “should assert that title is correct” (deve afirmar que o titulo esta correto) como primeiro parâmetro, e a função a seguir como segundo:
No exemplo acima o cy é a constante que possui todas as funções que o cypress oferece, primeiramente ele acessa o site do Training Center e depois verifica se dentro do elemento html com a classe main-content__title, possui o texto “Training Center”.
Os outro comandos podem ser verificados na documentação do Cypress.io que irei disponibilizar o link no final do artigo. =)
Para rodar os testes, rode o comando a seguir no terminal:
npm run cypress:run
O resultado dos testes acima é o seguinte:
Uma outra funcionalidade do Cypress pode ser visualizada rodando o comando a seguir no terminal:
npm run cypress:open
Com esse comando, uma tela com os arquivos dos testes será aberta:
Clicando no botão “Run All Tests”, você poderá ver os testes sendo executados no navegador, facilitando o debug dos testes.
O que achou do Cypress.io? Deixe sua opinião nos comentários, e feedbacks são sempre bem vindos para melhorar o conteúdo. =)
No próximo post, irei mostrar como realizar testes e2e em uma API.
Qualquer dúvida podem entrar em contato comigo pelo Twitter @lflimeira02, no Slack do Training Center ou no Slack do PHPSP com o username @lflimeira.
