Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Palestra apresentada no Agile Brazil 2014, no dia 05/11.

Transcript

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