Globalcode – Open4education
Visual Regression Testing com
PhantomCSS
Stefan Teixeira
stefanfk@gmail.com / stefanteixeira.c...
Globalcode – Open4education
Sobre o palestrante
Stefan Teixeira
QA Engineer @ Orga Systems
Bacharel em Ciência da Computaç...
Globalcode – Open4education
Visual Regression Testing
Globalcode – Open4education
TW Radar (Jan/2014)
Globalcode – Open4education
TW Radar (Jul/2014)
Globalcode – Open4education
Globalcode – Open4education
Motivação
Diminuir esforço de testes manuais
Tornar refactor de CSS mais simples
Identificar, ...
Globalcode – Open4education
Motivação
Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon...
Globalcode – Open4education
Usos
Comparar screenshots
Validar design responsivo
Validar valores de CSS
Globalcode – Open4education
Tools
Globalcode – Open4education
PhantomCSS
Globalcode – Open4education
O que é?
Módulo do CasperJS para Visual Regression Testing
usando PhantomJS e Resemble.js
Cria...
Globalcode – Open4education
O que é?
Módulo do CasperJS para Visual Regression Testing
usando PhantomJS e Resemble.js
Globalcode – Open4education
Resemble.js
Analisa e compara imagens usando JavaScript e
HTML5
Também criado por James Cryer,...
Globalcode – Open4education
PhantomJS
Headless Browser mais popular atualmente
Utiliza engine gráfica WebKit, a mesma do S...
Globalcode – Open4education
CasperJS
Ferramenta que provê recursos de navegação e
testes para o PhantomJS (WebKit) e Slime...
Globalcode – Open4education
Exemplo com CasperJS
Globalcode – Open4education
Como o PhantomCSS funciona?
O PhantomCSS:
Pega screenshots capturados pelo CasperJS
Compara es...
Globalcode – Open4education
Exemplo com PhantomCSS
Globalcode – Open4education
Boas práticas
Nomeie seus screenshots
Evite usar seletores CSS3 muito complexos
Não use o Phan...
Globalcode – Open4education
Case
Globalcode – Open4education
Descrição do Case
Aplicação Web com design responsivo (Bootstrap)
1ª release
8 telas
6 resoluç...
Globalcode – Open4education
Hands-on
Globalcode – Open4education
Hands-on
Setup
Teste inicial com página de exemplo
Alterando o CSS e vendo o teste falhar
Vend...
Globalcode – Open4education
Veja também...
Globalcode – Open4education
Resurrectio
http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio
Globalcode – Open4education
CasperBox
http://casperbox.com
Globalcode – Open4education
PhantomFlow
https://github.com/Huddle/PhantomFlow
Globalcode – Open4education
CasperJS + PageObjects
http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs...
Globalcode – Open4education
Como aprender
JavaScript?
Globalcode – Open4education
Como aprender JS?
Curso do Codecademy (gratuito):
http://www.codecademy.com/pt/tracks/javascri...
Globalcode – Open4education
Obrigado!
Stefan Teixeira
stefanfk@gmail.com
stefanteixeira.com.br
@stefan_teixeira
Próximos SlideShares
Carregando em…5
×

TDC 2014 SP - Visual Regression Testing com PhantomCSS

1.733 visualizações

Publicada em

Palestra ministrada na trilha de Testes do TDC 2014 São Paulo, no dia 08 de Agosto.

Publicada em: Tecnologia
1 comentário
7 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.733
No SlideShare
0
A partir de incorporações
0
Número de incorporações
21
Ações
Compartilhamentos
0
Downloads
24
Comentários
1
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

TDC 2014 SP - Visual Regression Testing com PhantomCSS

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

×