Visual Regression Testing

Testes de regressão visual com BackstopJS.

Quem trabalha com testes ou desenvolvimento, certamente já percebeu a importância de testes automatizados durante o desenvolvimento. Independentemente de sua experiência, essa percepção virá até você ao longo do tempo.
Este artigo não é uma visão geral sobre testes automatizados. Ele trata de um em particular, relativamente conhecido como teste de regressão visual.
Testes de regressão visual têm uma abordagem alternativa para páginas de teste da web. Em vez de apenas assegurar que algum elemento ou valor de texto está presente, o teste realmente abre a página e verifica se esse bloco específico aparece exatamente como você quer que ele apareça.
Para efetuar esse tipo de teste, existe uma série de ferramentas, mas hoje vou demonstrar uma forma bem simples e rápida de executar testes visuais, usando o BackstopJS.

O que é BackstopJS?

BackstopJS é um aplicativo para testes de regressão visual que envolve CasperJS, PhantomJS e ResembleJS, em um projeto de teste. Eles são bem fáceis de instalar e configurar para testar em várias URLs e diferentes tamanhos de tela.
O BackstopJS faz uma captura de tela que será armazenada como uma imagem de linha de base para futuras referências. Sempre que você muda algo no site e executa o BackstopJS novamente, ele faz uma nova captura de tela e a compara com a imagem original. Se não houver diferenças entre as imagens, o teste retornará “passed”, mas, caso as imagens não coincidam, o teste retornará “failed” e uma nova imagem será gerada, mostrando a diferença entre as duas imagens.
Esta é uma ferramenta perfeita para testar alterações em em ambientes de homologação e produção.
Os testes com BackstopJS são construídos em cima de vários componentes-chave, mas para este teste usaremos apenas dois:

BackstopJS e CasperJS

“Para conseguir executar os testes em sua máquina, é necessário que o NodeJS esteja instalado.”
Instalando o BackstopJS
De início temos de configurar um projeto de teste para ver como podemos usar esta ferramenta na prática. Instalar o BackstopJS é fácil. Tudo que você precisa fazer é adicionar algumas dependências para o seu projeto:

npm install -g backstopjs
npm install -g casperjs

“Recomendo a instalação global do BackstopJS e do CaserJS na sua máquina, o que tornará mais simples a execução dos testes.”

Criando um projeto de teste
Crie uma pasta My_Projetct com algum conteúdo de exemplo que anexei no Codepen, exporte a página como .zip para o seu computador e descompacte-a.
Link_Codepen: https://codepen.io/Vilariano/pen/BweJJq

Em seguida, para configurar o Backstop no seu projeto, você deve abrir sua pasta de projeto no Prompt de Comando e executar o seguinte comando:

Backstop init

Esse comando vai criar uma pasta chamada backstop_data e irá gerar um script backstop.json. É nele que vamos inserir os comandos para os testes.

Configurando package.json

Abra o arquivo Backstop.json no seu editor de preferência (no meu caso, eu vou usar o Sublime Text).
Primeiro vamos começar definindo as dimensões de nossas janelas de exibição dos testes, alterando Width e Height.
Substitua as seguintes definições em seu arquivo Backstop.json:

“viewports”: [
{
“label”: “Phone”,
“width”: 960,
“height”: 480
},
{
“label”: “Tablet_A”,
“width”: 660,
“height”: 480
},
{
“label”: “Tablet_B”,
“width”: 460,
“height”: 480
},
{
“label”: “Desktop”,
“width”: 1024,
“height”: 768
}
],

Depois vamos configurar o nosso cenário de teste. Nesta parte, vamos precisar de 5 definições para começar os testes, sedo elas:

“label”: “”, — Aqui eu dou uma descrição para o meu teste (no meu caso, eu uso Phone, Tablet the Desktop).
“url”: “”, — Aqui você define a “url” de destino (como nosso teste e local usaremos index.html).
“referenceUrl”: “”, — Aqui você define a “url” de referência (como nosso teste e local usaremos index.html).
“selectors”: [], — Aqui você deve fazer a seguinte definição: “selectors”: [“html”], .
Assim você informa ao Backstop que você quer que ele tire uma Screenshot de todo o “Html da página”. Você também pode definir que ele faça uma Screenshot apenas do Footer ou do Menu. Neste caso, queremos que ele capture a tela inteira. Então nosso cenário de teste ficará assim:
“scenarios”: [
{
“label”: “Phone, Tablet the Desktop”,
“cookiePath”:”backstop_data/engine_scripts/cookies.json”,
“url”: “index.html”,
“referenceUrl”: “index.html”,
“readyEvent”: “”,
“readySelector”: “”,
“delay”: 0,
“hideSelectors”: [],
“removeSelectors”: [],
“hoverSelector”: “”,
“clickSelector”: “”,
“postInteractionWait”: “”,
“selectors”: [“html”],
“selectorExpansion”: true,
“misMatchThreshold” : 0.1,
“requireSameDimensions”: true
}
],

Iniciando Testes.

Para efetuar o teste você vai precisar de 2 comandos apenas, sendo eles:
Backstop reference — Esse comando vai tirar Screenshot para usar como referência de comparação.
Backstop test — Esse comando executa o teste que configuramos no arquivo Backstop.json.
Executando o 1° comando (Backstop reference):

Seu resultado deve ser parecido com as telas acima!
Em seguida vamos executar o 2° comando (Backstop test). Esse comando vai efetuar o teste que você configurou no arquivo Backstop.json, ou seja, ele vai abrir a página index.html no browser, tirar uma Screenshot e comparar com os arquivos de referência que tiramos ao executar o comando Backstop reference. Quando o Backstop finalizar os testes, ele automaticamente vai gerar e abrir em seu navegador um arquivo chamado BackstopJS report, para mostrar a diferença. Vamos lá?

BackstopJS Report:

Prontinho, nosso teste passou lindamente.
Ele passou pois não fizemos nenhuma alteração na página para que houvesse uma diferença.
Então vamos fazer isso?
O que vamos fazer é simples.
Vamos alinhar à esquerda o nome “Agnaldo Vilariano” que está no topo, alinhar ao centro o nome “News Section” e alinhar à direita o nome “Agnaldo Vilariano” que está no footer.
Para isso, vamos é adicionar:
um text-align: left; à classe .top.
um text-align: center; dentro do H2 que está dentro da ID #row2.
um text-align: right; à classe .footer.

Agora que causamos uma falha, vamos testar outra vez?
Para isso e só executar novamente o comando Backstop test.

Desta vez o teste falhou!

Isso aconteceu porque fizemos alterações, ou seja, causamos falhas. E, quando ele fez a comparação com o arquivo de referência, encontrou as falhas que causamos, como mostrado no Report:

É isso, galera! O que fizemos foi um Visual Review, ou seja, um teste de regressão visual.
Existem muitas ferramentas para efetuar esse tipo de teste, mas eu uso o BackstopJS pois ele e bem simples e que os demais existentes no mercado, com ele eu não preciso de muitas integrações, basta apenas efetuar duas instalações e configurar meu arquivo “.Json” para que ele atenda seus testes e executar um comando no CMD, simplão.
Fique à vontade para tirar dúvidas comigo. Deixe seu comentário ou escreva para mim nas redes sociais.

Minhas fontes de pesquisa:

https://css-tricks.com/automating-css-regression-testing/
https://github.com/garris/BackstopJS
https://garris.github.io/BackstopJS/

Valeew!