VISUAL REGRESSION TESTING

Mais um tipo de teste para sua pipeline

@samantacicilia

Pipeline

Automate, automate, automate

Commit StageCompileUnit TestAnalysis

Build Installers

Automate Acceptance

TestingAutomate

Capacity Testing

Manual TestingShowcasesExploratory

TestingReleases

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

Dashboard: Builds

Dashboard: remover um class

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

Dashboard

Dashboard: problema de carregamento

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

Visual Review

Visual Review

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

LineUp

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

Visual Matcher: assert

Visual Matcher: fail

Visual Matcher: diff em caso de erro

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

Pipeline

Automate, automate, automate

Pipeline

- Testes a cada PR?- Smoke Tests?- Testes Pré-Prod?

Commit StageCompileUnit TestAnalysis

Build Installers

Automate Acceptance

TestingAutomate

Capacity Testing

Manual TestingShowcasesExploratory

TestingReleases

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

Referências

RailsConf 2016 - Continuous Visual Integration for Rails by Mike FotinakisPercy.ioLineUpApplitoolsVisualReviewMagnetonMobile Visual RegressionTalking About TestingRepositório de Exemplo

Agile Testers Conference Porto Alegre

São PauloRio de JaneiroBrasíliaRecifeBelo HorizonteFlorianópolisPorto Alegre - 19 de agostoSalvadorFortalezaManaus

http://conferencia.agiletesters.com.br/portoalegre.html

@samantaciciliasamycici@gmail.comhttps://www.linkedin.com/in/samantacici/http://agiletesters.com.br/https://github.com/samycici

Obrigada :)Avalie a Talk:  https://joind.in/talk/1fb8a

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