Concrete Logo
Hamburger button

Integrando Protractor com CucumberJS

  • Blog
  • 1 de Fevereiro de 2018

Enquanto estamos automatizando testes, sabemos que uma boa prática dentro de um time ágil é realizar a escrita de cenários por N motivos, os quais não vou detalhar aqui, pois não é o objetivo desse post. Mas como, por padrão, o Protractor não vem configurado temos que fazer alguns ajustes no arquivo de configuração para conseguir tirar proveito de todas as vantagens que a escrita de cenários de testes nos dá, juntamente com o Cucumber.

Precisamos que o Cucumber esteja instalado na sua máquina.

A primeira configuração que precisamos fazer é ter a dependência do Cucumber no arquivo package.json. E para instalá-la, execute o comando abaixo dentro do diretório do seu projeto:

Vamos instalar também uma dependência para a geração do report:

Vamos adicionar as seguintes configurações dentro do arquivo protractor.conf.js.

  • Primeiro informamos que vamos utilizar um framework customizado:

Depois nformamos o caminho que vão ficar as nossas features:

  • O caminho onde vão ficar as implementações dos steps:

  • E ainda a geração do Report dos testes:

O arquivo de configuração completo pode ser encontrado aqui. Com isso feito já podemos iniciar nossos testes utilizando Cucumber e, para exemplicar, vamos utilizar uma aplicação simples de listagem de Pokémons. Você pode acessar a listagem aqui.

Agora vamos escrever nosso primeiro cenário.

Crie o features/busca.pokemon.feature:

Agora vamos executar o comando:

O Cucumber vai gerar os steps que precisam ser implementados:

Agora precisamos implementar esses steps em ações concretas, mas para isso é preciso criar um arquivo chamado busca.pokemon.step.js dentro de features/step_definitions/.  Dentro desse arquivo crie a seguinte função:

Dentro dela, cole os snippets gerados.

Veja abaixo o resultado final do arquivo busca.pokemon.step.js já com as implementações necessárias:

Inicialmente importamos os módulos do chai.js, biblioteca de assertions que lida de forma bem completa com a questão das Promises do Protractor. Fizemos também o import de nosso PageObject (veja o primeiro artigo no qual falo sobre a utilização de PageObject).

Alguns detalhes que são importantes:

  • Função de callback: Todos steps gerados possuem uma função de callback, que nada mais é do que um “link” para o próximo passo;
  • Timeout: Em algumas situações precisamos especificar um timeout para os steps. Nesse exemplo, especificamente, não foi necessário, mas para adicionar um, basta passarmos mais um parâmetro dentro do step. Fica dessa forma:

  • Promise: Todos os métodos do nosso PageObject precisam retornar algo para que possamos tirar proveito do encadeamento dos steps:

Esse then(callback); está informando que o próximo step só vai ser executado após o método visit do nosso PageObject ser finalizado. Caso contrário você vai ter uma dor de cabeça terrível, pois se não fizer isso, quando estiver rodando o teste em todos os passos, os  steps vão informar que já foram executados sem ainda terem sido, por causa da execução assíncrona.

  • Chai: Utilizar o Chai.js para fazer as validações é uma ótima escolha, pois ele é simples de ser utilizado e possui uma boa documentação com muita flexibilidade. Repare que em nosso Then utilizamos o expect:

Esse notify(callback) vai apenas informar que os testes terminaram.

Agora que aprendemos como utilizar o CucumberJS com o Protractor, recomendo que utilizem essa forma de documentação viva e todos seus benefícios. Dessa forma, o seu time – do PO aos Devs – vão ter um guia de utilização de cada funcionalidade, o que ajudará muito à todos no dia a dia.

Espero que tenham gostado e até a próxima!

Referências:

https://github.com/protractor-cucumber-framework/protractor-cucumber-frameworkhttps://semaphoreci.com/community/tutorials/getting-started-with-protractor-and-cucumber

Trabalha com QA e quer fazer parte do nosso time? Mande seu currículo para trabalheconosco@concrete.com.br.