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:

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

visualreview-screen2

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

visualreview-screen3

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:

visualreview-screen5

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.

 

 

 

Anúncios

Um comentário em “Mão na massa com Visual Review e Protractor

  1. Até um tempo atras minha visão de testes era sempre aquela de testes manual, assim foram por 6 anos, mesmo trocando de empresa, continuei com essa de testes manuais, até “acordar” e ver o tempo que estava perdendo… Procurando por novidades e o que poderia fazer, me deparei com seus vídeos de protractor, onde estão me ajudando muito… Estou automatizando tudo (vai demorar para acabar, porque tem muita coisa e toda hora muda rs)…
    A econoimia de tempo será muito maior quando tudo estiver pronto….
    Agora com o Visual Review junto com o Protractor está ficando uma maravilha rs
    Valeu mesmo por tudo que tem postado, está sendo de uma enorme ajuda…..

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s