O documento discute testes de regressão visual em ambientes na nuvem. Ele introduz o autor e suas credenciais, define testes de regressão visual e suas motivações, apresenta ferramentas como Kobold, e discute como testar na nuvem usando serviços como Sauce Labs e BrowserStack para executar testes em múltiplos navegadores e sistemas operacionais sem a necessidade de infraestrutura local. O documento também inclui um hands-on mostrando como configurar e executar testes de regressão visual usando essas ferramentas.

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

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

3. Visual Regression
Testing

4. TW Radar (Janeiro/2014)

5. TW Radar (Julho/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. https://saucelabs.com
Sauce Labs

18. https://www.browserstack.com
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. Em um futuro próximo…

23. Stefan Teixeira
stefanfk@gmail.com
stefanteixeira.com.br
@stefan_teixeira