Mão na massa com Visual Review e Protractor

Conforme prometido no último post, hoje irei demonstrar passo-a-passo como integrar seus já existentes testes e2e escritos com Protractor com o Visual Review.

Para instalar o VisualReview-protractor, execute o seguinte comando:

npm install visualreview-protractor --save-dev

Após a instalação temos que adicionar algumas configurações. No arquivo protractor.conf.js, antes do exports.config, adicione as seguintes linhas:

const VisualReview = require('visualreview-protractor');
var vr = new VisualReview ({
  hostname: 'localhost',
  port: 7000
});

E então, dentro do exports.config, adicione as seguintes configurações (os nomes do projeto e da suite de testes podem ser alterados conforme sua necessidade):

beforeLaunch: function () {
  vr.initRun('Visual-Review-Sample-Project', 'visualReviewSuite');
},

afterLaunch: function (exitCode) {
  return vr.cleanup(exitCode);
},

params: {
  visualreview: vr
},

Com estas configurações, basta adicionar duas linhas de código nos testes (arquivos *.spec.js) para fazer o Visual Review funcionar. Segue um exemplo (atenção às linhas em negrito):

/**
* @file spec.js
*/

var vr = browser.params.visualreview;
var helper = require('../helper');

describe ('Home', function () {
  it ('title', function () {
    helper.verifyTitle('Demo application');
    vr.takeScreenshot('Choko-Demo-Home');
  });
});

Na linha 5 uma variável vr é definida para que o testes tenham acesso ao Visual Review, e então o teste simplesmente verifica o título da página (linha 10), com ajuda de um helper, e na linha 11 (vr.takeScreenshot(‘Choko-Demo-Home’);) é que o Visual Review entra em ação.

Além da instalação do VisualReview-protractor, antes da execução dos testes é necessário baixar e descompactar a última versão do Visual Review e então executar o seguinte comando a partir do diretório onde o Visual Review for descompactado, para inicializá-lo:

./start.sh

E então bastar rodar o protractor para executar os testes já integrados com o Visual Review.

Após a execução dos testes, acessando pelo navegador o endereço http://localhost:7000, você verá algo com o seguinte:

Acessando o link Visual-Review-Sample-Project, a seguinte tela é exibida:

Clicando no link visualReviewSuite você terá acesso a lista das últimas execuções dos testes:

E enfim, acessando o link da última execução dos testes você terá acesso a interface gráfica para aprovação ou rejeição das screenshots. Veja:

Na primeira execução dos testes, caso todas as screenshots estejam exibindo a aplicação conforme esperado, estas devem ser aprovadas, para serem utilizadas como base de comparação para as próximas execuções de testes, e a partir das próximas execuções, caso alguma diferença seja encontrada com relação a screenshot base e a screenshot tirada no momento da execução dos testes, esta então pode ser aprovada ou rejeitada.

Com isso, facilmente você pode incrementar o processo de testes de seus projetos de desenvolvimento de software que rodam testes com Protractor, para garantir ainda mais qualidade na aplicação entregue.

E aí, gostou? Deixa um comentário.