agile brazil 2014 - visual regression testing com phantomcss

33
Visual Regression Testing com PhantomCSS Stefan Teixeira [email protected] / stefanteixeira.com.br

Upload: stefan-teixeira

Post on 27-Jun-2015

603 views

Category:

Technology


0 download

DESCRIPTION

Palestra apresentada no Agile Brazil 2014, no dia 05 de Novembro.

TRANSCRIPT

Page 1: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Visual Regression Testing com PhantomCSS

Stefan [email protected] / stefanteixeira.com.br

Page 2: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Sobre o palestranteStefan Teixeira

• QA/DevOps Engineer @ Rastreabilidade Brasil• Bacharel em Ciência da Computação pela UFRJ• Finalizando MBA em Garantia de Qualidade de Software pela Escola

Politécnica da UFRJ• Mantém um blog técnico sobre testes: stefanteixeira.com.br• Certificado CTAL-TM / TA pelo ISQTB e CPRE-FL pelo IREB

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

Page 3: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Visual Regression Testing

Page 4: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

TW Radar (Jan/2014)

Page 5: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

TW Radar (Jul/2014)

Page 6: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
Page 7: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

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

Page 8: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

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

Page 9: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Usos

• Comparar screenshots

• Validar design responsivo

• Validar valores de CSS

Page 10: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Tools

Page 11: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

PhantomCSS

Page 12: Agile Brazil 2014 - Visual Regression Testing com 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

Page 13: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

O que é?

• Módulo do CasperJS para Visual Regression Testing usando PhantomJS e Resemble.js

Page 14: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Resemble.js

• Biblioteca para análise e comparação de imagens, usando JavaScript e HTML5

• Criada por James Cryer, especialmente para o PhantomCSS (mas você pode baixar e utilizá-la individualmente :)

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

Page 15: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

PhantomJS• Headless Browser mais popular atualmente

• Utiliza engine gráfica WebKit, a mesma do Safari e do Chrome (até versão 27 - Abr/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

Page 16: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

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

Page 17: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Exemplo com CasperJS

Page 18: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Como o PhantomCSS funciona?

• Pega screenshots capturados pelo CasperJS

• Compara esses screenshots com uma baseline de imagens, usando o Resemble.js

• Caso ocorra algum erro, gera imagens com o diff entre as comparadas

Page 19: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Exemplo com PhantomCSS

Page 20: Agile Brazil 2014 - Visual Regression Testing 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 tela inteira, teste componentes da UI de forma individual

• Cuidado com dados dinâmicos➡ hideSelector➡ mismatchTolerance

Page 21: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Case

Page 22: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Descrição do Case• Aplicação Web com design responsivo (Bootstrap)

• Primeira release

• 8 telas

• 6 resoluções usadas para teste (6+ segundo W3C)

• Screenshots da tela inteira (desculpa!)

• 6 x 8 = 48 screenshots

Page 23: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS
Page 24: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Primeira execução

Tempo de execução: 111,7ms ~ pouco menos que 2 minutos

Page 25: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Segunda execução

Tempo de execução: 146,2ms ~ 2,5 minutos

Page 26: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Hands-on

Page 27: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Hands-on

• Setup e página de exemplo

• Rodando o primeiro teste para gerar screenshots

• Alterando o CSS e vendo o teste falhar

• Vendo as imagens de diff

• Projeto de exemplo no GitHub

• PhantomCSS + Jenkins + ChuckNorris Plugin

Page 28: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Veja também…

Page 29: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

Resurrectio

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

Page 30: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

CasperBox

http://casperbox.com

Page 31: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

PhantomFlow

https://github.com/Huddle/PhantomFlow

Page 32: Agile Brazil 2014 - Visual Regression Testing com PhantomCSS

CasperJS + Page Objects

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