Entendendo testes de Regressão Visual com PhantomCSS

Imagine que você está desenvolvendo um layout, preocupando-se com cada detalhe para deixá-lo exatamente como o designer definiu. Depois de concluído e entregue, surge a necessidade de uma pequena alteração, adicionar um botão de cadastro no formulário de login, por ser uma tarefa simples outro desenvolvedor resolveu fazer e consequentemente teve que adicionar algumas linhas de CSS. Essa alteração acabou modificando o estilo de outros componentes da página, mas quem percebeu isso foi o cliente ao acessar o site na web, mesmo sendo uma pequena diferença ele ligou pedindo que a correção fosse feita.

Não é difícil acontecer esse tipo de situação. Para evitar isso podemos contar com testes automatizados que comparam pixel por pixel de uma página, deixando bem clara qualquer mudança.

Testes de regressão visual capturam a foto de um site ou parte dele e usam como base para comparar com as próximas versões, sempre que encontrar alguma diferença o teste irá falhar.

Existem diversas ferramentas para executar esse tipo de teste, mas nesse artigo vou falar especificamente de uma, o PhantomCSS.

O que é PhantomCSS?

PhantomCSS é a combinação de três ferramentas:

• PhantomJS ou SlimerJS são headless browsers que permitem o acesso as páginas web e a captura das fotos.
• CasperJS é uma ferramenta que permite navegar e interagir com as páginas renderizadas pelo browser. Com ele podemos simular cliques, preencher formulários e executar funções JavaScript.
• ResembleJS é uma biblioteca que compara imagens.

E a pratica, como se aplica?

Criei um repositório no GitHub onde é muito simples ver o funcionamento dos testes com PhantomCSS. Tudo que você precisa fazer é baixá-lo e executar os seguintes comandos:

• npm install para baixar as dependências do projeto;
• npm start para iniciar o servidor HTTP;
• npm test sempre que quiser executar os testes.

Após executar o teste você poderá ver que foi criada uma pasta screenshots, dentro dela está a foto da página, como não existia outra, essa será usada como base.

Primeira captura da página.

Agora que vimos o formulário de login pronto, podemos fazer a alteração de adicionar o botão de cadastro. Para facilitar já deixei os códigos HTML e CSS comentados, remova os comentários e execute o teste de novo. Com as alterações feitas podemos ver que o nosso teste falhou e a pasta failures foi criada, nela podemos ver exatamente as diferenças entre uma versão e outra.

Resultado do teste após as alterações.

As mudanças deveriam ter sido feitas apenas nos botões, mas está bem claro que o link de esqueci minha senha também sofreu alterações. Nesse caso identificamos rapidamente um comportamento inesperado com a ajuda do teste de regressão visual. Mas e se eu fizer uma mudança de propósito? Se for algo esperado como no caso dos botões?

Nesse caso eu posso executar o comando com um atributo adicional:

npm test -- --rebase

Agora ele usará a foto atual como base para os próximos testes.

Conclusão

Agora que conhecemos os testes de regressão visual podemos utiliza-los no desenvolvimento de nossas aplicações, criando e modificando componentes da interface sem medo de quebrar outros.