Globalcode – Open4education

Visual Regression Testing em ambientes na nuvem

Stefan Teixeirastefanfk@gmail.com / stefanteixeira.com.br

About meStefan Teixeira

• QA / DevOps• Bacharel em Ciência da Computação pela UFRJ• MBA em Garantia de Qualidade de Software pela Escola Politécnica da

UFRJ• Mantém um blog técnico sobre testes: stefanteixeira.com.br• Entusiasta de Testes Automatizados, Agile Testing e da cultura DevOps

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

• Aumento do número de dispositivos, browsers e resoluções usadas para aplicações web

• 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

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

Usos

• Comparar screenshots de versões da sua aplicação

• Validar design responsivo

• Validar valores de CSS

Ferramentas

Kobold

O que é?

• Parte da solução de testes front-end com Node.js do Yahoo!, criada pelo Marcel Erz

http://yahooeng.tumblr.com/post/103124603756/simplified-fe-testing-with-selenium

Como funciona?• Kobold compara screenshots usando o Blink-diff, também criado pelo Marcel Erz (Yahoo!)

Testes na Nuvem

Por que testar na nuvem?

• Não precisa se preocupar com infra-estrutura de VMs para testes em múltiplos ambientes

• Serviços oferecem mais de 500 combinações de browser/OS

• Setup simples

• Execuções em paralelo dão feedback mais rápido (mas custam mais caro…)

Sauce Labs

BrowserStack

Hands-on

Hands-on

• Estrutura do projeto de exemplo

• Ver como as ferramentas se integram

• Alterando o CSS e vendo o teste falhar

• Vendo as imagens de diff (diretório highlight)

• Projeto de exemplo no GitHub

Referências• Projeto de exemplo do hands-on - https://github.com/

stefanteixeira/fav-organizer/tree/master/test/visual

• Projeto de exemplo criado pelo Marcel Erz - https://github.com/marcelerz/preceptor-todomvc

• Screencast da palestra do Marcel Erz no Selenium Meetup - https://vimeo.com/114172135

Globalcode – Open4education

Obrigado!

Stefan Teixeirastefanfk@gmail.comstefanteixeira.com.br@stefan_teixeira