Minas Testing Conference 2015 - Visual Regression Testing em ambientes na nuvem

Palestra apresentada no Minas Testing Conference 2015, no dia 13/06.

Transcript

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