O documento discute testes de regressão visual em ambientes na nuvem, mencionando ferramentas como Kobold e Sauce Labs/BrowserStack. Ele explica como essas ferramentas podem comparar screenshots para validar design responsivo e valores de CSS, tornando os testes mais rápidos e abrangentes. Também fornece links para projetos de exemplo que demonstram como integrar essas ferramentas em testes automatizados.

1. Globalcode – Open4education
Visual Regression Testing em
ambientes na nuvem
Stefan Teixeira
stefanfk@gmail.com / stefanteixeira.com.br

2. About me
Stefan 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

3. Visual Regression
Testing

4. TW Radar (Jan/2014)

5. TW Radar (Jul/2014)

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

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

9. Usos
• Comparar screenshots de versões da sua
aplicação
• Validar design responsivo
• Validar valores de CSS

10. Ferramentas

11. Kobold

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

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

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

15. Testes na Nuvem

16. 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…)

17. Sauce Labs

18. BrowserStack

19. Hands-on

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

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

22. Globalcode – Open4education
Obrigado!
Stefan Teixeira
stefanfk@gmail.com
stefanteixeira.com.br
@stefan_teixeira