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.

1. Automatizando Visual
Regression Testing

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

5. SherlockQA Test Manager
Demo: http://104.236.221.15/
Código: https://github.com/leoGalani/sherlock

6. Pipeline
Automate, automate, automate

7. Commit Stage
Compile
Unit Test
Analysis
Build Installers
Automate
Acceptance
Testing
Automate
Capacity Testing
Manual Testing
Showcases
Exploratory
Testing
Releases
The Deployment Pipeline

8. Estamos preocupados com:
- Funcionalidades
- Performance
- Disponibilidade
- Boas Práticas de Desenvolvimento

9. Quadrantes de Testes Ágeis

10. Unit
Service
UI
Manual
Pirâmide | automação de testes

11. Mas…
... e Visual?

12. Unit
Service
UI
Manual
Pirâmide | automação de testes
Visual
Regression

13. POKEDEX APP
Página 404

14. Página 404

15. Tiraram o class da div

16. Tiraram o class da img

17. Responsivo

18. Como você validaria?

19. Gráficos

20. Original

21. Ao clicar numa cor

22. Remover uma cor por engano

23. Como você validaria?

24. - - Problema
- - Soluções

25. Problemas
Como testar:
- Página de 404?
- Responsivo?
- Refactor onde a UI não pode mudar?
- Gráficos?
- Layout?

26. Manual é custoso, lento e complicado

27. Continuous Visual Regression

28. TOOLS

29. Dashboard X Asserts

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

31. Dashboard: Builds

32. Dashboard: antes de colocar a espera

33. Dashboard: sem o diff

34. Dashboard: remover um class

35. Dashboard: responsivo

36. Dashboard: cuidado com as esperas

37. Applitools
- Pago
- Free account: 25 execuções por semana
- Dashboard
- Suporte:
- Javascript

38. Dashboard

39. Dashboard: ignorar uma área

40. Visual Review
- Open Source
- Dashboard local
- Suporte:
- Javascript - Protractor
- Testes passam, precisa do aceite manual

41. Visual Review

42. Visual Review

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

44. LineUp

45. Visual Matcher
- Open Source
- Suporte:
- Ruby (Capybara)
- Magneton gem
- Executar uma vez e guardar o screen base
- Cuidado com diferentes browsers e resoluções

46. Visual Matcher: assert

47. Visual Matcher: assert, fail

48. Visual Matcher: diff em caso de erro

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

50. Pipeline
Automate, automate, automate

51. Pipeline
- Testes a cada PR?
- Smoke Tests?
- Testes Pré-Prod?

52. Commit Stage
Compile
Unit Test
Analysis
Build Installers
Automate
Acceptance
Testing
Automate
Capacity Testing
Manual Testing
Showcases
Exploratory
Testing
Releases
The Deployment Pipeline

53. Use com sabedoria

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

55. Show me the
Code o/

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

57. Contatos
@samantacicilia
samycici@gmail.com
https://www.linkedin.com/in/samantacici/
http://agiletesters.com.br/
https://github.com/samycici

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