TDC 2014 - Visual Regression Testing com PhantomCSS

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

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.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

[email protected]

stefanteixeira.com.br

@stefan_teixeira