Cypress com Cucumber nos testes e2e

Por acaso você conhece o Cypress? Já usou ou até leu a sua incrível documentação? Se a resposta for “não”, tenho apenas uma coisa a dizer: “Não perca mais tempo!” Vale cada segundo do seu tempo esta leitura: Conhecer Cypress.

Mas… por que o Cypress, Lucas?

Mantendo os pés no chão e sem querer assustar ou deixar os novos desenvolvedores e QAs ansiosos, o Cypress, realmente, veio simplificar todo o processo de instalação, configuração e gravação de nossos testes para aplicações web. Todos nós, meros QAs, já sofremos de alguma maneira para configurarmos o Selenium. São diversas etapas, muitas vezes confusas, nas quais precisamos de versões compatíveis do Java, drivers, browsers, do próprio Selenium etc… é bastante desgastante.

Com o Cypress isso se tornou super fácil. Costumo dizer que a maior dificuldade para quem já trabalhou com essas outras ferramentas é a de compreender como ele é realmente simples. Tanto para configurar, quanto usar.

“Ah, não é possível. É fácil demais para ser verdade.”

É comum tentarmos complicar os processos simples. Um exemplo real disso é passarmos por uma prova na qual está a singela pergunta “Quanto é 2 + 2?”.

Automaticamente, nós já imaginamos uma pegadinha: “Ah, 4 é muito óbvio!”

Então tentamos chegar à resposta fazendo contas mais complexas como a raiz cúbica + logaritmo + matriz * pii + delta da hipotenusa ao quadrado… não! Não dá mais para ignorar a resposta certa só por achá-la muito simples. Acho que já passamos dessa fase.

Moral da história: nem sempre o caminho mais fácil é o errado ou o pior.

Instalando e configurando o Cypress

Após criarmos um novo repositório e iniciarmos com $npm init, precisamos rodar o comando $npm install cypress –save-dev para salvar o Cypress localmente como uma devDependencies para o seu projeto (vide package.json).

Agora, para ficar ainda mais fácil do que já estava sendo, vamos rodar o Cypress com o comando $npm run cypress open (o comando precisa estar nos seus scripts do package.json), abrir o Test Runner no modo interativo e aceitar a estrutura inicial do framework. Sim. Acabou. 😉 Seu projeto já se encontra instalado, senhor(a).

Configurando o Cucumber

Foi criada uma lib para a integração do Cucumber com o Cypress, que foi baseada no gherkin-testcafe. O cucumber-preprocessor se encontra aqui, oh: cypress-cucumber-preprocessor.

A própria documentação do Cypress aceitou esse repositório como um Plugin para termos uma maneira de suportar e estender o comportamento do Cypress e, com isso, conseguirmos executar as nossas especificações do Cucumber.

Para instalar e configurar é tão simples quanto ao Cypress. Usamos o comando $npm install cypress-cucumber-preprocessor –save-dev, que, após instalado, vai ser visto no seu arquivo package.json. Agora vamos até o arquivo cypress/plugins/index.js para jogarmos o seguinte código:

Para finalizar, criamos um arquivo .feature na pasta cypress/integration/seu_arquivo.feature e mais um arquivo de steps em cypress/support/step_definitions/seu_arquivo_steps.js.

Prontinho! O Cypress com o Cucumber já está configurado, preparado e pronto para rodar seus testes web.

Conclusão

O Cypress é uma nova estrutura de testes e2e, de código aberto, que na minha opinião tem como diferencial:

• É de fácil instalação e configuração;
• Existe, quase como default, a geração de vídeos e screenshots;
• É mais rápido (às vezes até demais) por iterar diretamente seus testes ao navegador;
• Tem um depurador em tempo real incrível;
• Faz um ótimo controle das chamadas assíncronas e promises “sozinho”;
• Fácil de escrever por ter sintaxe idêntica a outros frameworks JS;
• O Listening XHR é impecável para aguardar comportamentos e afirmações;
• Tem uma API útil e simples de usar;
• Tem uma das melhores documentações entre frameworks de testes;
• Comunidade extremamente ativa.

Mas, como nada é perfeito, acredito que os seguintes pontos ainda precisam de uma certa evolução, mesmo sabendo que alguns deles já estão no roadmap:

• Não tem suporte a multibrowser;
• Como o paralalelismo é novo, ainda é necessário o uso de dashboard;
• Falta suporte para uploads de arquivos;
• A integração com a geração de steps automática do Cucumber precisa ser melhorada;
• Há uma limitação quanto tentamos visitar mais de um domínio.

De qualquer forma, como podem ver, os pontos que achei negativos são poucos e pequenos, então vale a pena dar uma chance ao Cypress. Espero que este post possa gerar curiosidade e debates a respeito do framework.

Então é isso, pessoal. Qualquer dúvida basta comentar aqui no post ou me procurar no GitHub. Até a próxima!

—

No capítulo de QA da Concrete nós nos importamos com o que criamos. Somos parte fundamental dos times de desenvolvimento, pois garantimos a qualidade de engenharia do produto final. Nosso papel é desenvolver e automatizar a suíte de testes de comportamento, criando e mantendo testes de aceitação, regressão e integração. Para isso, utilizamos tecnologias como Cucumber, Calabash e Ruby. Nosso DNA tem palavras como Agile Testing, Especificação por Exemplo e Automação de Testes.Trabalhe com os melhores! Acesse: concrete.com.br/vagas