Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
-
Upload
stefan-teixeira -
Category
Technology
-
view
603 -
download
0
description
Transcript of Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
Visual Regression Testing com PhantomCSS
Stefan [email protected] / stefanteixeira.com.br
Sobre o palestranteStefan Teixeira
• QA/DevOps Engineer @ Rastreabilidade Brasil• Bacharel em Ciência da Computação pela UFRJ• Finalizando MBA em Garantia de Qualidade de Software pela Escola
Politécnica da UFRJ• Mantém um blog técnico sobre testes: stefanteixeira.com.br• Certificado CTAL-TM / TA pelo ISQTB e CPRE-FL pelo IREB
Contatos:
• E-mail: [email protected]• Twitter: twitter.com/stefan_teixeira• Facebook: facebook.com/stefan.teixeira• LinkedIn: linkedin.com/in/stefanteixeira• GitHub: github.com/stefanteixeira• SlideShare: slideshare.net/stefanteixeira
Visual Regression Testing
TW Radar (Jan/2014)
TW Radar (Jul/2014)
Motivação
• Diminuir esforço de testes manuais
• Tornar refactor de CSS mais simples
• Identificar, de forma fácil e rápida, defeitos que não seriam encontrados tão facilmente com testes manuais
Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)
Usos
• Comparar screenshots
• Validar design responsivo
• Validar valores de CSS
Tools
PhantomCSS
O que é?
• Módulo do CasperJS para Visual Regression Testing usando PhantomJS e Resemble.js
• Criado por James Cryer (Huddle)
• https://github.com/Huddle/PhantomCSS
O que é?
• Módulo do CasperJS para Visual Regression Testing usando PhantomJS e Resemble.js
Resemble.js
• Biblioteca para análise e comparação de imagens, usando JavaScript e HTML5
• Criada por James Cryer, especialmente para o PhantomCSS (mas você pode baixar e utilizá-la individualmente :)
• http://huddle.github.io/Resemble.js
PhantomJS• Headless Browser mais popular atualmente
• Utiliza engine gráfica WebKit, a mesma do Safari e do Chrome (até versão 27 - Abr/2013)
• Hoje, o Chrome usa sua própria engine (Blink), que é um fork do WebKit
• Criado por Ariya Hidayat
• phantomjs.org / github.com/ariya/phantomjs
CasperJS
• Ferramenta que provê recursos de navegação e testes para o PhantomJS (WebKit) e SlimerJS(Gecko)
• Criado por Nicolas Perriault
• casperjs.org / github.com/n1k0/casperjs
Exemplo com CasperJS
Como o PhantomCSS funciona?
• Pega screenshots capturados pelo CasperJS
• Compara esses screenshots com uma baseline de imagens, usando o Resemble.js
• Caso ocorra algum erro, gera imagens com o diff entre as comparadas
Exemplo com PhantomCSS
Boas práticas• Nomeie seus screenshots
• Evite usar seletores CSS3 muito complexos
• Não use o PhantomCSS para substituir testes funcionais
• Cuidado com screenshots da tela inteira, teste componentes da UI de forma individual
• Cuidado com dados dinâmicos➡ hideSelector➡ mismatchTolerance
Case
Descrição do Case• Aplicação Web com design responsivo (Bootstrap)
• Primeira release
• 8 telas
• 6 resoluções usadas para teste (6+ segundo W3C)
• Screenshots da tela inteira (desculpa!)
• 6 x 8 = 48 screenshots
Primeira execução
Tempo de execução: 111,7ms ~ pouco menos que 2 minutos
Segunda execução
Tempo de execução: 146,2ms ~ 2,5 minutos
Hands-on
Hands-on
• Setup e página de exemplo
• Rodando o primeiro teste para gerar screenshots
• Alterando o CSS e vendo o teste falhar
• Vendo as imagens de diff
• Projeto de exemplo no GitHub
• PhantomCSS + Jenkins + ChuckNorris Plugin
Veja também…
Resurrectio
http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio
CasperJS + Page Objects
http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html
Obrigado!
Stefan [email protected]@stefan_teixeira