TDC 2014 - Visual Regression Testing com PhantomCSS

transcript

Globalcode – Open4education

Visual Regression Testing com

PhantomCSSStefan Teixeira

stefanfk@gmail.com / 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

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

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)

Comparar screenshots

Validar design responsivo

Validar valores de CSS

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

O que é?

Módulo do CasperJS para Visual Regression Testing

usando PhantomJS e Resemble.js

Resemble.js

Analisa e compara imagens usando JavaScript e

Também criado por James Cryer, especialmente

para o PhantomCSS

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

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

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

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

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

CasperBox

http://casperbox.com

PhantomFlow

https://github.com/Huddle/PhantomFlow

CasperJS + PageObjects

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

Obrigado!

Stefan Teixeira

stefanfk@gmail.com

stefanteixeira.com.br

@stefan_teixeira

TDC 2014 - Visual Regression Testing com PhantomCSS

Technology