Relatório de testes com Allure e Cypress

Exemplo do relatório de testes com Allure

Que o Cypress está na hype quando se fala em testes automatizados não é novidade para ninguém, mas para quem ainda não conhece, o Cypress de forma resumida, é uma ferramenta de testes de última geração para front-end criada para a web moderna utilizando a linguagem JavaScript. O Cypress permite que você escreva todos os tipos de testes que possa ser executada em um navegador, porém seu foco principal estão no seguintes tipos testes:

• Testes de ponta a ponta
• Testes de integração
• Testes unitários

Dado esse pequeno contexto sobre o Cypress, não adianta nada criar vários testes automatizados, escrever vários cenários de testes, validar vários contextos e funcionalidades do sistema e não conseguir comprovar e/ou acompanhar quais cenários foram validados, quais foram reprovados, quais foram executados com sucesso, qual foi o tempo de execução, qual browser foi utilizado, entre outros fatores.

E uma das formas de gerar esses relatórios é utilizando o Allure report, uma biblioteca muito utilizado pelos frameworks de testes(nesse caso vamos utilizar com o Cypress) para elaboração dos resultados dos testes.

Pré-requisitos:

Conhecimento: Nenhum 🙌

• IDE de Desenvolvimento (no caso estou utilizando o VSCode) ✅
• Node e NPM ✅

Iniciando um novo projeto

Com o terminal aberto, basta criarmos a pasta com o nome desejável do projeto, no meu caso:

mkdir Projetos/tests/allure

Acessar a pasta raiz do projeto:

cd Projetos/tests/allure/

Iniciar um novo projeto node:

npm init -y

👇 O output no terminal deve ser algo parecido com o código abaixo:

{
  "name": "consumer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\\"Error: no test specified\\\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Instalar o Cypress:

npm install cypress --save-dev

Abrir o o painel interativo do Cypress :

npx cypress open

👇 A seguinte tela será exibida:

Primeira tela de configuração do Cypress

☝️ Ao clicarmos em e2e Testing(end-to-end), a seguinte tela será exibida:

Segunda tela de configuração do Cypress

☝️ Basta clicarmos em “Continue” que a seguinte tela aparecerá:

Terceira tela de configuração do Cypress

☝️ Ao clicarmos em “Start E2E Testing em Chrome”, mas uma tela será exibida:

Quarta tela de configuração do Cypress

ℹ️ Como o objetivo aqui não é mostrar como criar testes usando o Cypress, mas sim como configurar o o relatório dos seus testes utilizando o Allure, vamos clicar em “Scaffold example specs” 👆.

👇 Confirmar clicando em “Okay, I got it!” que um monte de testes de exemplos será criado automaticamente.

Quinta tela de configuração do Cypress

Com isso temos nosso projeto base configurado com vários testes de exemplo para serem executados, agora só precisamos instalar, configurar e criar os scripts para executar os testes utilizando o Allure.

Agora podemos fechar o painel interativo do Cypress e voltar para o terminal, onde está na raiz do nosso projeto e instalar o Allure:

npm i -D @shelex/cypress-allure-plugin

Depois de instalar o Allure, precisamos configura-lo no nosso projeto, para isso precisamos abrir o projeto utilizando a IDE de desenvolvimento, no meu caso VS Code, portando, com o terminal aberto, ainda na pasta raiz executar:

code .

Primeiro precisamos configurar o plugin do Allure no projeto, dentro do arquivo cypress.config.js configurar conforme código abaixo:

const { defineConfig } = require("cypress");

const allureWriter = require('@shelex/cypress-allure-plugin/writer');
// import allureWriter from "@shelex/cypress-allure-plugin/writer";
module.exports = defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
            allureWriter(on, config);
            return config;
        }
    }
});

Depois importar o plugin para o projeto dentro do arquivo “support/e2e.js” quedeverá ficar da seguinte forma:

import './commands'
import '@shelex/cypress-allure-plugin';

Agora só faltar criar os scripts para executarmos os testes, para isso vamos criar 3 novos scripts dentro do arquivo package.json e são eles:

"e2e": "cypress run --env allure=true",

💡 Script responsável pelo Cypress executar os testes.

"report:allure": "allure generate allure-results --clean -o allure-report && allure open  allure-report",

💡 Script responsável pelo Allure gerar os relatórios de testes.

"test:allure": "npm run e2e && npm run report:allure"

💡 Script responsável por unir/juntar os dois comandos criados acima e executar todos os testes e gerar o relatório em um único comando.

Após finalizar a criação dos scripts, o arquivo package.json deve estar da seguinte maneira:

{
  "name": "allure",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "e2e": "cypress run --reporter mocha-allure-reporter",
    "report:allure": "allure generate allure-results --clean -o allure-report && allure open  allure-report",
    "test:allure": "npm run e2e && npm run report:allure"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@shelex/cypress-allure-plugin": "^2.35.2",
    "cypress": "^12.7.0"
  }
}

Com tudo pronto basta executarmos:

npm run test:allure

🪄 Que todos os testes serão executados, o relatório de testes sera criado e ao final de toda a execução o mesmo será exibido no navegador, conforme print abaixo, com várias informações valiosas, como, quantos testes falharam, quantos testes passaram, tempo médio dos testes, severidade entre outras informações.

Relatório de testes gerado com Allure

👌 Para ficar ainda mais interessante seria adicionar em uma pipeline de entrega contínua que expõe esses dados para todos os interessados, configurada com rollbacks automático caso algum cenário de alta severidade ou alguns cenários quebrem, porém isso é assunto para outro artigo.

Conclusão

É sempre importante apresentarmos os resultados das funcionalidades, seja ela nova ou defasada, para isso nada melhor do que utilizar uma ferramenta que gere status reports completos, com gráficos, tempos de execução, screenshots, mostrando o que melhorou, onde piorou, o que quebrou, tempo de resposta, quem executou, funcionalidades testadas, e etc..

Cheers! 🍻

Caso tenha alguma dúvida, sugestão de melhoria ou algum problema, deixe seu comentário. 👌

Caso tenha gostado ou tudo tenha ocorrido direitinho, me siga no Medium e deixa seu like. 😘

Referências:

JavaScript Web Testing and Component Testing Framework | cypress.io

GitHub - Shelex/cypress-allure-plugin: cypress plugin to use allure reporter api in tests