Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
5 gostaram1,431 visualizações
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.
Agile Brazil 2014 - Visual Regression Testing com 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
- 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
- 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
- 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…
- 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