tdc 2014 - visual regression testing com phantomcss
DESCRIPTION
Palestra ministrada na trilha de Testes do TDC 2014 São Paulo, no dia 08 de Agosto.TRANSCRIPT
Globalcode – Open4education
Visual Regression Testing com
PhantomCSSStefan Teixeira
[email protected] / stefanteixeira.com.br
Globalcode – Open4education
Sobre o palestrante
Stefan TeixeiraQA 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: [email protected]
Twitter: twitter.com/stefan_teixeira
Facebook: facebook.com/stefan.teixeira
LinkedIn: linkedin.com/in/stefanteixeira
GitHub: github.com/stefanteixeira
Slideshare: slideshare.net/stefanteixeira
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, de forma fácil e rápida, defeitos que
não seriam encontrados tão facilmente com testes
manuais
Globalcode – Open4education
Motivação
Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)
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
Criado por James Cryer (Huddle)
https://github.com/Huddle/PhantomCSS
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, especialmente
para o PhantomCSS
http://huddle.github.io/Resemble.js
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
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
Globalcode – Open4education
Exemplo com CasperJS
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
Globalcode – Open4education
Exemplo com PhantomCSS
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
Globalcode – Open4education
Case
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
Globalcode – Open4education
Hands-on
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
Globalcode – Open4education
Veja também...
Globalcode – Open4education
Resurrectio
http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio
Globalcode – Open4education
PhantomFlow
https://github.com/Huddle/PhantomFlow
Globalcode – Open4education
CasperJS + PageObjects
http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html
Globalcode – Open4education
Como aprender
JavaScript?
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
Globalcode – Open4education
Obrigado!
Stefan Teixeira
stefanteixeira.com.br
@stefan_teixeira