Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MTC - Automatizando Visual Regression Testing

480 views

Published on

No meu último projeto me deparei com o desafio de automatizar testes para gráficos onde as cores, formatos e detalhes eram muito importantes para a funcionalidade. A solução foi aplicar Visual Regression Testing e garantir que esses aspectos visuais estavam de acordo com o esperado. Nessa palestra vamos ver o que é Visual Regression Testing e exemplos de como automatizar usando algumas ferramentas de mercado (Percy, Lineup, Visual Review, AppliTools, GalenFramework) e também que é possível implementar a sua própria.

Published in: Technology
  • Be the first to comment

MTC - Automatizando Visual Regression Testing

  1. 1. Automatizando Visual Regression Testing
  2. 2. Agile Testers São Paulo Rio de Janeiro Brasília Recife Belo Horizonte Florianópolis Porto Alegre - hoje o/ Salvador - 16 de setembro Fortaleza Manaus http://conferencia.agiletesters.com.br/salvador.html
  3. 3. SherlockQA Test Manager Demo: http://104.236.221.15/ Código: https://github.com/leoGalani/sherlock
  4. 4. Pipeline Automate, automate, automate
  5. 5. Commit Stage Compile Unit Test Analysis Build Installers Automate Acceptance Testing Automate Capacity Testing Manual Testing Showcases Exploratory Testing Releases The Deployment Pipeline
  6. 6. Estamos preocupados com: - Funcionalidades - Performance - Disponibilidade - Boas Práticas de Desenvolvimento
  7. 7. Quadrantes de Testes Ágeis
  8. 8. Unit Service UI Manual Pirâmide | automação de testes
  9. 9. Mas… ... e Visual?
  10. 10. Unit Service UI Manual Pirâmide | automação de testes Visual Regression
  11. 11. POKEDEX APP Página 404
  12. 12. Página 404
  13. 13. Tiraram o class da div
  14. 14. Tiraram o class da img
  15. 15. Responsivo
  16. 16. Como você validaria?
  17. 17. Gráficos
  18. 18. Original
  19. 19. Ao clicar numa cor
  20. 20. Remover uma cor por engano
  21. 21. Como você validaria?
  22. 22. - - Problema - - Soluções
  23. 23. Problemas Como testar: - Página de 404? - Responsivo? - Refactor onde a UI não pode mudar? - Gráficos? - Layout?
  24. 24. Manual é custoso, lento e complicado
  25. 25. Continuous Visual Regression
  26. 26. TOOLS
  27. 27. Dashboard X Asserts
  28. 28. Percy - Pago - Dashboard - Suporte: - JS - Ruby - Python - Static Sites (CLI) - Variáveis de ambiente pro Token e Projeto; - Integração com github para aprovar PR; - Página completa não importa a resolução;
  29. 29. Dashboard: Builds
  30. 30. Dashboard: antes de colocar a espera
  31. 31. Dashboard: sem o diff
  32. 32. Dashboard: remover um class
  33. 33. Dashboard: responsivo
  34. 34. Dashboard: cuidado com as esperas
  35. 35. Applitools - Pago - Free account: 25 execuções por semana - Dashboard - Suporte: - Javascript
  36. 36. Dashboard
  37. 37. Dashboard: ignorar uma área
  38. 38. Visual Review - Open Source - Dashboard local - Suporte: - Javascript - Protractor - Testes passam, precisa do aceite manual
  39. 39. Visual Review
  40. 40. Visual Review
  41. 41. LineUp - Open Source - Suporte: - Ruby - Imagens precisam ter o mesmo tamanho - Pode integrar nos testes com RSpec e Capybara - Diferentes resoluções - Usa o phatomjs
  42. 42. LineUp
  43. 43. Visual Matcher - Open Source - Suporte: - Ruby (Capybara) - Magneton gem - Executar uma vez e guardar o screen base - Cuidado com diferentes browsers e resoluções
  44. 44. Visual Matcher: assert
  45. 45. Visual Matcher: assert, fail
  46. 46. Visual Matcher: diff em caso de erro
  47. 47. Ferramentas Pago Open Source Dashboard Aprovação Automatizada Aprovação Manual Nuvem Local Diff Percy V X V X V V X V Applitools V X V X V V X V Visual Review X V V X V X V V LineUP X V X V V X V V Magneton X V X V V X V V Comparação
  48. 48. Pipeline Automate, automate, automate
  49. 49. Pipeline - Testes a cada PR? - Smoke Tests? - Testes Pré-Prod?
  50. 50. Commit Stage Compile Unit Test Analysis Build Installers Automate Acceptance Testing Automate Capacity Testing Manual Testing Showcases Exploratory Testing Releases The Deployment Pipeline
  51. 51. Use com sabedoria
  52. 52. Pontos de Atenção - Não crie Visual Tests para tudo - Priorize o que traz mais valor - Cuidado com resoluções X browsers - Cuidado com esperas
  53. 53. Show me the Code o/
  54. 54. Referências RailsConf 2016 - Continuous Visual Integration for Rails by Mike Fotinakis Percy.io LineUp Applitools VisualReview Magneton Mobile Visual Regression Talking About Testing Repositório de Exemplo
  55. 55. Contatos @samantacicilia samycici@gmail.com https://www.linkedin.com/in/samantacici/ http://agiletesters.com.br/ https://github.com/samycici
  56. 56. Centro Av. Presidente Wilson, 231 - 29º andar (21) 2240-2030 Cidade Monções Av. Nações Unidas, 11.541 - 3º andar (11) 4119-0449 Savassi Av. Getúlio Vargas, 671 Sala 800 - 8º andar (31) 3360-8900 www.concrete.com.br

×