Apresentando relatórios de testes automatizados com Protractor (NodeJS)

Sabe quando aquele gerente de projeto lhe cobra resultados de testes e você automatizou todos os cenários possíveis no projeto? Você não vai apresentar a telinha do CMD pra ele né? O que apresentar então?

Nesse artigo iremos aprender a fazer com o Protractor (automaticamente, claro! rsrs ) um relatório com gráficos, indicadores, timelines, etc, digno de uma apresentação ppt, usando o Jasmine-Allure-Reporter.

Começando pelo básico, o que precisamos no projeto?

  • NodeJS LTS instalado: https://nodejs.org/en/ (O site mostrará o download próprio para o SO pelo qual você está acessando);
  • Java 8 ou superior.

Após termos nosso ambiente local pronto para executar nossos scripts automatizados, vamos instalar nosso módulo de criação de relatórios:

  • Instalando o Jasmine-Allure-Reporter:
npm install jasmine-allure-reporter --save-dev

Dessa forma, instalamos o reporter como uma dependência de desenvolvimento do nosso projeto. O package manager irá inserir o módulo no nosso package.json:

  • Após isso, vamos configurar nosso reporter no arquivo de configuração do Protractor (protractor.conf.js):
(Insira a propriedade de configuração “onPrepare” dentro do “exports.config”)
  • Ok, já temos o reporter configurado. Tudo que precisamos fazer agora é executar nossos testes para criar os dados que vamos usar para gerar o relatório.

Vou usar um exemplo de suítes simples, em um site feito em Angular (sim, porque estou usando Protractor e gosto de usar seus “locators” únicos para Angular, rsrs):

(Tá sem page objects, não me julguem.. rsrs)

Rodando os testes…

Show de bola. Todos os nossos testes passaram. Vamos então criar um relatório para apresentar para a equipe?

Imagem relacionada

Mas antes…. Eu não sei vocês, mas mesmo sabendo que vamos criar relatórios melhores, eu particularmente não gosto de acompanhar meus testes automatizados no Jasmine com esses “pontinhos verdes” quando o teste passa e o “F vermelho” quando falha. Podemos melhorar essa visualização ainda no CMD.

[ BONUS TIME 🙌 ]

  • Vamos instalar um reporter chamado “jasmine-spec-reporter”:
npm install jasmine-spec-reporter --save-dev
  • Iremos configurar o reporter no arquivo de configuração do Protractor, assim como configuramos o Allure:
(Todas as suas configurações podem ser encontradas em: Jasmine-Spec-Reporter)

OBS: Lembrando que todas essas configurações são opcionais. Elas já tem padrões “true” ou “false” do próprio reporter. A imagem acima é só uma ilustração da capacidade do mesmo.

  • Para esse reporter, precisaremos adicionar uma função ao “jasmineNodeOpts” também no “protractor.conf.js”:
(Essa função retira os resultados nativos do Jasmine)

Rodando os testes…

Bem melhor, vocês não acham? 😅

  • Voltando para o relatório…

Após a execução dos testes, a pasta “allure-results” será criada e o XML do relatório será inserido nessa pasta.

OBS: Para gerar os relatórios através do “Allure”, precisamos instalar o módulo allure-commandline”:

npm install allure-commandline --save-dev
(Escreva “allure help” para ver a lista de comandos disponíveis)

Assim, habilitamos o “Allure” para linha de comando no nosso projeto.

Após isso, precisamos executar o comando para gerar o relatório HTML do Allure:

allure generate --clean

Esse comando irá gerar um novo relatório (e apagar qualquer antigo) na pasta (padrão) “allure-report” da raiz do seu projeto:

Após isso, vamos rodar o seguinte comando:

allure serve

O Allure irá abrir o server e automaticamente abrir o relatório HTML no seu navegador:

(Server criado..)
(Relatório visualizado no Chrome)

[ BONUS TIME 2 🙌 ]

“Mas Caio, preciso das screenshots dos resultados dos testes, o que faço? — João, QA Analyst”

Sem problemas, o Allure também faz isso. Para implementar, podemos criar uma classe chamada “Helper”, na qual construiremos uma função para tirar screenshots:

Dentro de cada suíte de teste, basta colocar um “afterEach” e chamar a função, assim após cada teste (independente de falha ou sucesso), o Allure irá tirar uma screenshot do navegador no chromedriver, mesmo se estiver em headless 😱.

Assim, após gerar o relatório e abrir o servidor do Allure, cada “test case” terá sua screenshot

Pronto. Agora temos um relatório completo com gráficos, tempos de execução, screenshots, etc. Tudo que precisamos pra fazer aquela apresentação espetacular para os gerentes.

Um abraço e até a próxima! 🏃🏻

(Chuck Norris approves..)
Quer saber mais sobre testes automatizados? Veja a área de treinamentos em: http://qaninja.io/treinamentos