Este documento apresenta o PhantomCSS, uma ferramenta para teste de regressão visual usando o CasperJS, PhantomJS e Resemble.js. O PhantomCSS captura screenshots de páginas web e compara com imagens de referência para identificar alterações visuais. Exemplos demonstram como configurar e executar testes de regressão visual com o PhantomCSS.
2. Sobre o palestrante
Stefan 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: stefanfk@gmail.com
• Twitter: twitter.com/stefan_teixeira
• Facebook: facebook.com/stefan.teixeira
• LinkedIn: linkedin.com/in/stefanteixeira
• GitHub: github.com/stefanteixeira
• SlideShare: slideshare.net/stefanteixeira
7. 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
12. 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
13. O que é?
• Módulo do CasperJS para Visual
Regression Testing usando PhantomJS e
Resemble.js
14. 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
15. 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
16. 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
18. 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
20. 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
22. 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
27. 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