Visual Regression Testing
em ambientes na nuvem
Stefan Teixeira
stefanteixeira.com.br / stefanfk@gmail.com
About me
Stefan Teixeira
• QA Engineer
• Bacharel em Ciência da Computação pela UFRJ
• MBA em Garantia de Qualidade de Sof...
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 test...
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ç...
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
...
Referências
➡ Projeto de exemplo do hands-on - https://
github.com/stefanteixeira/fav-organizer/tree/
master/test/visual
➡...
Em um futuro próximo…
Stefan Teixeira
stefanfk@gmail.com
stefanteixeira.com.br
@stefan_teixeira
Visual Regression Testing em ambientes na nuvem - Stefan Teixeira
Próximos SlideShares
Carregando em…5
×

Visual Regression Testing em ambientes na nuvem - Stefan Teixeira

193 visualizações

Publicada em

Já imaginou poder automatizar testes que validem a aparência, o CSS e o design responsivo da sua aplicação web? É sobre isso que se trata o conceito de Visual Regression Testing, que é suportado por diversas ferramentas atualmente. Nesta palestra, vou falar sobre como fazer Visual Regression Testing em ambientes na nuvem (SauceLabs/BrowserStack) usando bibliotecas Node.js (Kobold, Preceptor e Hodman), criadas pelo Marcel Erz, do Yahoo. Vamos também mostrar como integrar um projeto de exemplo com essas ferramentas em um pipeline de Integração Contínua (com Jenkins).

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
193
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
3
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Visual Regression Testing em ambientes na nuvem - Stefan Teixeira

  1. 1. Visual Regression Testing em ambientes na nuvem Stefan Teixeira stefanteixeira.com.br / stefanfk@gmail.com
  2. 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. 3. Visual Regression Testing
  4. 4. TW Radar (Janeiro/2014)
  5. 5. TW Radar (Julho/2014)
  6. 6. 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
  7. 7. Fonte: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777 (Simon Madine)
  8. 8. Usos ➡ Comparar screenshots de versões da sua aplicação ➡ Validar design responsivo ➡ Validar valores de CSS
  9. 9. Ferramentas
  10. 10. Kobold
  11. 11. O que é? ➡ Parte da solução de testes front-end com Node.js do Yahoo!, criada pelo Marcel Erz
  12. 12. http://yahooeng.tumblr.com/post/103124603756/simplified-fe-testing-with-selenium
  13. 13. Como funciona? ➡ Kobold compara screenshots usando o Blink-diff, também criado pelo Marcel Erz (Yahoo!)
  14. 14. Testes na nuvem
  15. 15. 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)
  16. 16. https://saucelabs.com Sauce Labs
  17. 17. https://www.browserstack.com BrowserStack
  18. 18. Hands-on
  19. 19. 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
  20. 20. 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
  21. 21. Em um futuro próximo…
  22. 22. Stefan Teixeira stefanfk@gmail.com stefanteixeira.com.br @stefan_teixeira

×