Baixado 24 vezes
Carregado porStefan Teixeira
TDC 2014 SP - Visual Regression Testing com PhantomCSS
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.
![[MTC 2021] Tests smells: aquele cheirinho de que algo não está bom no seu cód...](https://cdn.slidesharecdn.com/ss_thumbnails/testssmellsaquelecheirinhodequealgonoestbomnoseucdigodeteste-rafaelpeixotosilva-210804112832-thumbnail.jpg?width=640&height=640&fit=bounds)
TDC 2014 SP - Visual Regression Testing com PhantomCSS
- 1. Globalcode – Open4education VisualRegression Testing com PhantomCSS Stefan Teixeira stefanfk@gmail.com / stefanteixeira.com.br
- 2. Globalcode – Open4education Sobreo 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 VisualRegression Testing
- 4. Globalcode – Open4education TWRadar (Jan/2014)
- 5. Globalcode – Open4education TWRadar (Jul/2014)
- 6.
- 7. Globalcode – Open4education Motivação Diminuiresforç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 Compararscreenshots Validar design responsivo Validar valores de CSS
- 10.
- 11.
- 12. Globalcode – Open4education Oque é? 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 Oque é? Módulo do CasperJS para Visual Regression Testing usando PhantomJS e Resemble.js
- 14. Globalcode – Open4education Resemble.js Analisae 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 HeadlessBrowser 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 Ferramentaque 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 Exemplocom CasperJS
- 18. Globalcode – Open4education Comoo 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 Exemplocom PhantomCSS
- 20. Globalcode – Open4education Boasprá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.
- 22. Globalcode – Open4education Descriçãodo 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.
- 24. Globalcode – Open4education Hands-on Setup Testeinicial 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 Vejatambém...
- 26.
- 27.
- 28.
- 29. Globalcode – Open4education CasperJS+ PageObjects http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html
- 30. Globalcode – Open4education Comoaprender JavaScript?
- 31. Globalcode – Open4education Comoaprender 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! StefanTeixeira stefanfk@gmail.com stefanteixeira.com.br @stefan_teixeira