mtc - automatizando visual regression testing
TRANSCRIPT
Automatizando Visual Regression Testing
Agile TestersSão PauloRio de JaneiroBrasíliaRecifeBelo HorizonteFlorianópolisPorto Alegre - hoje \o/Salvador - 16 de setembroFortalezaManaus
http://conferencia.agiletesters.com.br/salvador.html
SherlockQA Test Manager
Demo: http://104.236.221.15/Código: https://github.com/leoGalani/sherlock
Pipeline
Automate, automate, automate
Commit StageCompileUnit TestAnalysis
Build Installers
Automate Acceptance
Testing
Automate Capacity Testing
Manual TestingShowcasesExploratory
Testing
Releases
The Deployment Pipeline
Estamos preocupados com:
- Funcionalidades- Performance- Disponibilidade- Boas Práticas de Desenvolvimento
Quadrantes de Testes Ágeis
Unit
Service
UI
Manual
Pirâmide | automação de testes
Mas…... e Visual?
Unit
Service
UI
Manual
Pirâmide | automação de testes
Visual
Regression
POKEDEX APP
Página 404
Página 404
Tiraram o class da div
Tiraram o class da img
Responsivo
Como você validaria?
Gráficos
Original
Ao clicar numa cor
Remover uma cor por engano
Como você validaria?
- - Problema- - Soluções
Problemas
Como testar:- Página de 404?- Responsivo?- Refactor onde a UI não pode mudar?- Gráficos?- Layout?
Manual é custoso, lento e complicado
Continuous Visual Regression
TOOLS
Dashboard X Asserts
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;
Dashboard: Builds
Dashboard: antes de colocar a espera
Dashboard: sem o diff
Dashboard: remover um class
Dashboard: responsivo
Dashboard: cuidado com as esperas
Applitools
- Pago - Free account: 25 execuções por semana- Dashboard- Suporte:
- Javascript
Dashboard
Dashboard: ignorar uma área
Visual Review
- Open Source- Dashboard local- Suporte:
- Javascript - Protractor- Testes passam, precisa do aceite manual
Visual Review
Visual Review
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
LineUp
Visual Matcher
- Open Source- Suporte:
- Ruby (Capybara)- Magneton gem- Executar uma vez e guardar o screen base- Cuidado com diferentes browsers e resoluções
Visual Matcher: assert
Visual Matcher: assert, fail
Visual Matcher: diff em caso de erro
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
Pipeline
Automate, automate, automate
Pipeline
- Testes a cada PR?- Smoke Tests?- Testes Pré-Prod?
Commit StageCompileUnit TestAnalysis
Build Installers
Automate Acceptance
Testing
Automate Capacity Testing
Manual TestingShowcasesExploratory
Testing
Releases
The Deployment Pipeline
Use com sabedoria
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
Show me the Code \o/
Referências
RailsConf 2016 - Continuous Visual Integration for Rails by Mike FotinakisPercy.ioLineUpApplitoolsVisualReviewMagnetonMobile Visual RegressionTalking About TestingRepositório de Exemplo
Contatos
@[email protected]://www.linkedin.com/in/samantacici/http://agiletesters.com.br/https://github.com/samycici
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