visual regression testing: mais um tipo de teste pra sua pipeline
TRANSCRIPT
![Page 1: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/1.jpg)
VISUAL REGRESSION TESTING
Mais um tipo de teste para sua pipeline
![Page 2: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/2.jpg)
@samantacicilia
![Page 3: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/3.jpg)
Pipeline
Automate, automate, automate
![Page 4: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/4.jpg)
Commit StageCompileUnit TestAnalysis
Build Installers
Automate Acceptance
TestingAutomate
Capacity Testing
Manual TestingShowcasesExploratory
TestingReleases
The Deployment Pipeline
![Page 5: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/5.jpg)
Estamos preocupados com:
- Funcionalidades- Performance- Disponibilidade- Boas Práticas de Desenvolvimento
![Page 6: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/6.jpg)
Quadrantes de Testes Ágeis
![Page 7: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/7.jpg)
Unit
Service
UI
Manual
Pirâmide | automação de testes
![Page 8: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/8.jpg)
Mas…... e Visual?
![Page 9: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/9.jpg)
Unit
Service
UI
Manual
Pirâmide | automação de testes
Visual
Regression
![Page 10: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/10.jpg)
POKEDEX APP
Página 404
![Page 11: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/11.jpg)
Página 404
![Page 12: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/12.jpg)
Tiraram o class da div
![Page 13: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/13.jpg)
Tiraram o class da img
![Page 14: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/14.jpg)
Responsivo
![Page 15: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/15.jpg)
Como você validaria?
![Page 16: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/16.jpg)
Gráficos
![Page 17: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/17.jpg)
Original
![Page 18: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/18.jpg)
Ao clicar numa cor
![Page 19: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/19.jpg)
Remover uma cor por engano
![Page 20: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/20.jpg)
Como você validaria?
![Page 21: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/21.jpg)
- Problema- Soluções
![Page 22: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/22.jpg)
Problemas
Como testar:- Página de 404?- Responsivo?- Refactor onde a UI não pode mudar?- Gráficos?- Layout?
![Page 23: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/23.jpg)
Manual é custoso, lento e complicado
![Page 24: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/24.jpg)
Continuous Visual Regression
![Page 25: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/25.jpg)
TOOLS
![Page 26: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/26.jpg)
Dashboard X Asserts
![Page 27: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/27.jpg)
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
![Page 28: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/28.jpg)
Dashboard: Builds
![Page 29: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/29.jpg)
Dashboard: remover um class
![Page 30: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/30.jpg)
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
![Page 31: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/31.jpg)
Dashboard
![Page 32: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/32.jpg)
Dashboard: problema de carregamento
![Page 33: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/33.jpg)
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
![Page 34: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/34.jpg)
Visual Review
![Page 35: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/35.jpg)
Visual Review
![Page 36: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/36.jpg)
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
![Page 37: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/37.jpg)
LineUp
![Page 38: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/38.jpg)
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
![Page 39: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/39.jpg)
Visual Matcher: assert
![Page 40: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/40.jpg)
Visual Matcher: fail
![Page 41: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/41.jpg)
Visual Matcher: diff em caso de erro
![Page 42: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/42.jpg)
Ferramentas Pago Open Source Dashboard Aprovação Automatizada Aprovação Manual Nuvem Local DiffPercy V X V X V V X VApplitools V X V X V V X VVisual 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
![Page 43: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/43.jpg)
Pipeline
Automate, automate, automate
![Page 44: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/44.jpg)
Pipeline
- Testes a cada PR?- Smoke Tests?- Testes Pré-Prod?
![Page 45: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/45.jpg)
Commit StageCompileUnit TestAnalysis
Build Installers
Automate Acceptance
TestingAutomate
Capacity Testing
Manual TestingShowcasesExploratory
TestingReleases
The Deployment Pipeline
![Page 46: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/46.jpg)
Use com sabedoria
![Page 47: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/47.jpg)
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
![Page 48: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/48.jpg)
Referências
RailsConf 2016 - Continuous Visual Integration for Rails by Mike FotinakisPercy.ioLineUpApplitoolsVisualReviewMagnetonMobile Visual RegressionTalking About TestingRepositório de Exemplo
![Page 49: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/49.jpg)
Agile Testers Conference Porto Alegre
São PauloRio de JaneiroBrasíliaRecifeBelo HorizonteFlorianópolisPorto Alegre - 19 de agostoSalvadorFortalezaManaus
http://conferencia.agiletesters.com.br/portoalegre.html
![Page 50: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/50.jpg)
@[email protected]://www.linkedin.com/in/samantacici/http://agiletesters.com.br/https://github.com/samycici
Obrigada :)Avalie a Talk: https://joind.in/talk/1fb8a
![Page 51: Visual Regression Testing: mais um tipo de teste pra sua pipeline](https://reader031.vdocuments.mx/reader031/viewer/2022030318/5a6de3e97f8b9aab3a8b53cd/html5/thumbnails/51.jpg)
CentroAv. Presidente Wilson,231 - 29º andar(21) 2240-2030
Cidade MonçõesAv. Nações Unidas,11.541 - 3º andar(11) 4119-0449
SavassiAv. Getúlio Vargas, 671Sala 800 - 8º andar(31) 3360-8900
www.concrete.com.br