O documento discute testes de regressão visual para validar interfaces gráficas, comparando ferramentas pagas e gratuitas que fornecem dashboards para aprovação de imagens capturadas. As ferramentas Percy, Applitools e Visual Review oferecem integração com plataformas de desenvolvimento, enquanto LineUp e Magneton são opções de código aberto para Ruby.

1. VISUAL REGRESSION
TESTING
Mais um tipo de teste para sua pipeline

2. @samantacicilia

3. Pipeline
Automate, automate, automate

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

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

6. Quadrantes de Testes Ágeis

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

8. Mas…
... e Visual?

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

10. POKEDEX APP
Página 404

11. Página 404

12. Tiraram o class da div

13. Tiraram o class da img

14. Responsivo

15. Como você validaria?

16. Gráficos

17. Original

18. Ao clicar numa cor

19. Remover uma cor por engano

20. Como você validaria?

21. - Problema
- Soluções

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

23. Manual é custoso, lento e complicado

24. Continuous Visual Regression

25. TOOLS

26. Dashboard X Asserts

27. Percy Ferramenta paga que possui um Dashboard para aprovação das imagens. Tem
integração com Github para aprovação de PR e suporte a JS, Ruby, Python e
Static Sites (CLI). Sempre compara a página completa e é possível configurar
diferentes resoluções.
Características

28. Dashboard: Builds

29. Dashboard: remover um class

30. Percy Ferramenta paga que possui um Dashboard para aprovação das imagens. Tem
integração com Github para aprovação de PR e suporte a JS, Ruby, Python e
Static Sites (CLI). Sempre compara a página completa e é possível configurar
diferentes resoluções.
Applitools É pago mas tem uma Free account que garante 25 execuções por semana.
Possui um Dashboard para aprovação das imagens e suporta JS
Características

31. Dashboard

32. Dashboard: problema de carregamento

33. Percy Ferramenta paga que possui um Dashboard para aprovação das imagens. Tem
integração com Github para aprovação de PR e suporte a JS, Ruby, Python e
Static Sites (CLI). Sempre compara a página completa e é possível configurar
diferentes resoluções.
Applitools É pago mas tem uma Free account que garante 25 execuções por semana.
Possui um Dashboard para aprovação das imagens e suporta JS
Visual Review Open Source que disponibiliza um Dashboard local. Suporta JS e testes com
Protractor
Características

34. Visual Review

35. Visual Review

36. Percy Ferramenta paga que possui um Dashboard para aprovação das imagens. Tem
integração com Github para aprovação de PR e suporte a JS, Ruby, Python e
Static Sites (CLI). Sempre compara a página completa e é possível configurar
diferentes resoluções.
Applitools É pago mas tem uma Free account que garante 25 execuções por semana.
Possui um Dashboard para aprovação das imagens e suporta JS
Visual Review Open Source que disponibiliza um Dashboard local. Suporta JS e testes com
Protractor
LineUp Open Source que suporta Ruby. Pode integrar nos testes com RSpec e
Capybara. Utiliza o phatomjs e permite a configuração de diferentes resoluções.
Características

37. LineUp

38. Percy Ferramenta paga que possui um Dashboard para aprovação das imagens. Tem
integração com Github para aprovação de PR e suporte a JS, Ruby, Python e
Static Sites (CLI). Sempre compara a página completa e é possível configurar
diferentes resoluções.
Applitools É pago mas tem uma Free account que garante 25 execuções por semana.
Possui um Dashboard para aprovação das imagens e suporta JS
Visual Review Open Source que disponibiliza um Dashboard local. Suporta JS e testes com
Protractor
LineUp Open Source que suporta Ruby. Pode integrar nos testes com RSpec e
Capybara. Utiliza o phatomjs e permite a configuração de diferentes resoluções.
Magneton É uma gem Ruby open source que compara um screen base e o screen atual.
Precisa de cuidados em relação a diferentes browser e resoluções.
Características

39. Visual Matcher: assert

40. Visual Matcher: fail

41. Visual Matcher: diff em caso de erro

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

43. Pipeline
Automate, automate, automate

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

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

46. Use com sabedoria

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

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

49. Agile Testers Conference Porto Alegre
São Paulo
Rio de Janeiro
Brasília
Recife
Belo Horizonte
Florianópolis
Porto Alegre - 19 de agosto
Salvador
Fortaleza
Manaus
http://conferencia.agiletesters.com.br/portoalegre.html

50. @samantacicilia
samycici@gmail.com
https://www.linkedin.com/in/samantacici/
http://agiletesters.com.br/
https://github.com/samycici
Obrigada :)

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