O documento apresenta uma palestra sobre Visual Regression Testing com PhantomCSS. O palestrante Stefan Teixeira explica o que é PhantomCSS e como ele funciona para comparar screenshots e identificar diferenças visuais que podem indicar erros de regressão. Algumas boas práticas para uso do PhantomCSS também são apresentadas, assim como um exemplo prático de teste visual regressivo com PhantomCSS.

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

2. Globalcode – Open4education
Sobre o palestrante
Stefan Teixeira
QA Engineer @ Orga Systems
Bacharel em Ciência da Computação pela UFRJ
Cursando MBA em Garantia de Qualidade de Software na Escola Politécnica da
UFRJ
Certificado CTAL-TA / CTAL-TM pelo ISTQB e CPRE-FL pelo IREB
Mantém um blog técnico sobre testes: stefanteixeira.com.br
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. Globalcode – Open4education
Visual Regression Testing

4. Globalcode – Open4education
TW Radar (Jan/2014)

5. Globalcode – Open4education
TW Radar (Jul/2014)

6. Globalcode – Open4education

7. Globalcode – Open4education
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. Globalcode – Open4education
Motivação
Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)

9. Globalcode – Open4education
Usos
Comparar screenshots
Validar design responsivo
Validar valores de CSS

10. Globalcode – Open4education
Tools

11. Globalcode – Open4education
PhantomCSS

12. Globalcode – Open4education
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. Globalcode – Open4education
O que é?
Módulo do CasperJS para Visual Regression Testing
usando PhantomJS e Resemble.js

14. Globalcode – Open4education
Resemble.js
Analisa e compara imagens usando JavaScript e
HTML5
Também criado por James Cryer, especialmente
para o PhantomCSS
http://huddle.github.io/Resemble.js

15. Globalcode – Open4education
PhantomJS
Headless Browser mais popular atualmente
Utiliza engine gráfica WebKit, a mesma do Safari e
do Chrome (até a versão 27 – Abril/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. Globalcode – Open4education
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. Globalcode – Open4education
Exemplo com CasperJS

18. Globalcode – Open4education
Como o PhantomCSS funciona?
O PhantomCSS:
Pega screenshots capturados pelo CasperJS
Compara esses screenshots com uma baseline de
imagens (usando Resemble.js)
Gera imagens com o diff entre as comparadas, caso
ocorra algum erro

19. Globalcode – Open4education
Exemplo com PhantomCSS

20. Globalcode – Open4education
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 página inteira

21. Globalcode – Open4education
Case

22. Globalcode – Open4education
Descrição do Case
Aplicação Web com design responsivo (Bootstrap)
1ª release
8 telas
6 resoluções usadas nos testes (6+ segundo W3C)
Screenshots da tela inteira
6 x 8 = 48 screenshots
Tempo de execução dos testes: 2 minutos

23. Globalcode – Open4education
Hands-on

24. Globalcode – Open4education
Hands-on
Setup
Teste inicial com página de exemplo
Alterando o CSS e vendo o teste falhar
Vendo as imagens de diff
Projeto de exemplo no GitHub
PhantomCSS + Jenkins

25. Globalcode – Open4education
Veja também...

26. Globalcode – Open4education
Resurrectio
http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio

27. Globalcode – Open4education
CasperBox
http://casperbox.com

28. Globalcode – Open4education
PhantomFlow
https://github.com/Huddle/PhantomFlow

29. Globalcode – Open4education
CasperJS + PageObjects
http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html

30. Globalcode – Open4education
Como aprender
JavaScript?

31. Globalcode – Open4education
Como aprender JS?
Curso do Codecademy (gratuito):
http://www.codecademy.com/pt/tracks/javascript
Cursos do Code School (gratuitos/pagos):
https://www.codeschool.com/paths/javascript
Livro JavaScript para Testadores
Tradução do livro JavaScript for Testers, de Carlos Ble, sendo feita
por Stefan Teixeira e Elias Nogueira
Será disponibilizado em breve no LeanPub:
https://leanpub.com/javascriptparatestadores

32. Globalcode – Open4education
Obrigado!
Stefan Teixeira
stefanfk@gmail.com
stefanteixeira.com.br
@stefan_teixeira