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.

1. Visual Regression Testing
com PhantomCSS
Stefan Teixeira
stefanfk@gmail.com / stefanteixeira.com.br

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

3. Visual Regression
Testing

4. TW Radar (Jan/2014)

5. TW Radar (Jul/2014)

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

8. Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)

9. Usos
• Comparar screenshots
• Validar design responsivo
• Validar valores de CSS

10. Tools

11. PhantomCSS

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

17. Exemplo com 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

19. Exemplo com PhantomCSS

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

21. Case

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

24. Primeira execução
Tempo de execução: 111,7ms ~ pouco menos
que 2 minutos

25. Segunda execução
Tempo de execução: 146,2ms ~ 2,5 minutos

26. Hands-on

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

28. Veja também…

29. Resurrectio
http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio

30. CasperBox
http://casperbox.com

31. PhantomFlow
https://github.com/Huddle/PhantomFlow

32. CasperJS + Page Objects
http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html

33. Obrigado!
Stefan Teixeira
stefanfk@gmail.com
stefanteixeira.com.br
@stefan_teixeira