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

@samantaciciliasamycici@gmail.comhttps://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