Visual Review + Protractor

VisualReview

Durante o desenvolvimento de software, mesmo automatizando testes, ainda são necessárias verificações manuais, tais como testes exploratórios e testes para verificar questões relacionadas ao estilo, tais como alterações de CSS, que podem quebrar a aplicação visualmente.

Há pouco mais de um ano estou trabalhando com testes automatizados end to end com Protractor, e há pouco menos de 6 meses comecei a ouvir falar e estudar sobre Visual Regression Testing.

Na semana passada, descobri o VisualReview-protractor, API do VisualReview, que tem o objetivo de fornecer um fluxo de trabalho produtivo e amigável para testes e revisões de layout de aplicações web para qualquer teste de regressão.

A ideia é a seguinte: com base em testes de regressão e2e já existentes, adicionar passos para tirar screenshots de cada tela acessada, para posterior revisão visual, com a facilidade de uma interface que ajuda neste fluxo do trabalho.

O Visual Review trabalha com um conceito de screenshots que já foram revisadas previamente, as quais são utilizadas como base para comparação das screenshots tiradas no momento dos testes de regressão e2e. Caso alguma diferença seja encontrada com relação às screenshots base e as screenshots do momento dos testes, esta diferença é exibida através de uma interface gráfica, possibilitando a quem for fazer a revisão visual, aprovar ou rejeitar tal screenshot. Quando uma screenshot é aprovada, ela é então substituída pela screenshot base, e quando rejeitada, continua valendo a screenshot base, e neste caso, provavelmente um bug visual foi encontrado, necessitando de uma ação para sua correção.

Em um próximo post irei demonstrar passo a passo como integrar testes e2e já existentes, escritos com Protractor, com o Visual Review, para adição da revisão visual de screenshots de forma simplificada ao fluxo de trabalho durante o desenvolvimento de software.

The testing revolution has started!

Anúncios

Um comentário em “Visual Review + Protractor

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