tdc 2014 - visual regression testing com phantomcss

Globalcode – Open4education

Visual Regression Testing com

PhantomCSSStefan Teixeira

[email protected] / stefanteixeira.com.br


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

http://stefanteixeira.com.br/

mailto:[email protected]

http://twitter.com/stefan_teixeira

http://www.facebook.com/stefan.teixeira

http://www.linkedin.com/in/stefanteixeira

http://github.com/stefanteixeira

http://pt.slideshare.net/stefanteixeira


Visual Regression Testing


TW Radar (Jan/2014)


TW Radar (Jul/2014)


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


Motivação

Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)

http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777


Usos

Comparar screenshots

Validar design responsivo

Validar valores de CSS


Tools


PhantomCSS


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

https://github.com/Huddle/PhantomCSS


O que é?

Módulo do CasperJS para Visual Regression Testing

usando PhantomJS e Resemble.js


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

http://huddle.github.io/Resemble.js/


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

http://phantomjs.org/

https://github.com/ariya/phantomjs


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

http://casperjs.org/

https://github.com/n1k0/casperjs


Exemplo com CasperJS


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


Exemplo com PhantomCSS


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


Case


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


Hands-on


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


Veja também...


Resurrectio

http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio

http://makina-corpus.com/blog/metier/2014/record-casperjs-tests-using-resurrectio


CasperBox

http://casperbox.com

http://casperbox.com/


PhantomFlow

https://github.com/Huddle/PhantomFlow

https://github.com/Huddle/PhantomFlow


CasperJS + PageObjects

http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html

http://jsebfranck.blogspot.fr/2014/03/page-object-pattern-with-casperjs.html


Como aprender

JavaScript?


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

http://www.codecademy.com/pt/tracks/javascript

https://www.codeschool.com/paths/javascript

https://leanpub.com/javascriptparatestadores


Obrigado!

Stefan Teixeira

[email protected]

stefanteixeira.com.br

@stefan_teixeira

mailto:[email protected]

http://stefanteixeira.com.br/

http://twitter.com/stefan_teixeira

tdc 2014 - visual regression testing com phantomcss

Technology