Visual Regression Testing 
com PhantomCSS 
Stefan Teixeira 
stefanfk@gmail.com / stefanteixeira.com.br
Sobre o palestrante 
Stefan Teixeira 
• QA/DevOps Engineer @ Rastreabilidade Brasil 
• Bacharel em Ciência da Computação p...
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á...
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 (H...
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, espe...
PhantomJS 
• Headless Browser mais popular atualmente 
• Utiliza engine gráfica WebKit, a mesma do 
Safari e do Chrome (at...
CasperJS 
• Ferramenta que provê recursos de 
navegação e testes para o PhantomJS 
(WebKit) e SlimerJS(Gecko) 
• Criado po...
Exemplo com CasperJS
Como o PhantomCSS funciona? 
• Pega screenshots capturados pelo CasperJS 
• Compara esses screenshots com uma 
baseline de...
Exemplo com PhantomCSS
Boas práticas 
• Nomeie seus screenshots 
• Evite usar seletores CSS3 muito complexos 
• Não use o PhantomCSS para substit...
Case
Descrição do Case 
• Aplicação Web com design responsivo 
(Bootstrap) 
• Primeira release 
• 8 telas 
• 6 resoluções usada...
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 tes...
Veja também…
Resurrectio 
http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio
CasperBox 
http://casperbox.com
PhantomFlow 
https://github.com/Huddle/PhantomFlow
CasperJS + Page Objects 
http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html
Obrigado! 
Stefan Teixeira 
stefanfk@gmail.com 
stefanteixeira.com.br 
@stefan_teixeira
Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
Próximos SlideShares
Carregando em…5
×

Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

1.106 visualizações

Publicada em

Palestra apresentada no Agile Brazil 2014, no dia 05 de Novembro.

Publicada em: Tecnologia
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.106
No SlideShare
0
A partir de incorporações
0
Número de incorporações
44
Ações
Compartilhamentos
0
Downloads
9
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

  1. 1. Visual Regression Testing com PhantomCSS Stefan Teixeira stefanfk@gmail.com / stefanteixeira.com.br
  2. 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. 3. Visual Regression Testing
  4. 4. TW Radar (Jan/2014)
  5. 5. TW Radar (Jul/2014)
  6. 6. 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
  7. 7. Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)
  8. 8. Usos • Comparar screenshots • Validar design responsivo • Validar valores de CSS
  9. 9. Tools
  10. 10. PhantomCSS
  11. 11. 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
  12. 12. O que é? • Módulo do CasperJS para Visual Regression Testing usando PhantomJS e Resemble.js
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. Exemplo com CasperJS
  17. 17. 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
  18. 18. Exemplo com PhantomCSS
  19. 19. 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
  20. 20. Case
  21. 21. 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
  22. 22. Primeira execução Tempo de execução: 111,7ms ~ pouco menos que 2 minutos
  23. 23. Segunda execução Tempo de execução: 146,2ms ~ 2,5 minutos
  24. 24. Hands-on
  25. 25. 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
  26. 26. Veja também…
  27. 27. Resurrectio http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio
  28. 28. CasperBox http://casperbox.com
  29. 29. PhantomFlow https://github.com/Huddle/PhantomFlow
  30. 30. CasperJS + Page Objects http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html
  31. 31. Obrigado! Stefan Teixeira stefanfk@gmail.com stefanteixeira.com.br @stefan_teixeira

×