Visual Regression Testing em ambientes na nuvem

Stefan Teixeirastefanteixeira.com.br / stefanfk@gmail.com

About meStefan Teixeira

• QA Engineer

• 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 (Janeiro/2014)

TW Radar (Julho/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)

https://saucelabs.com

Sauce Labs

https://www.browserstack.com

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

Em um futuro próximo…

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