TDC 2014 São Paulo - Visual Regression Testing com PhantomCSS

Palestra apresentada na trilha de Testes do TDC 2014 SP, no dia 08/08.

Transcript

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