Testes de regressão visual são scripts de teste que tiram screenshots de uma aplicação e comparam com screenshots previamente aprovados para identificar diferenças visuais introduzidas por mudanças no código. O documento discute como o BackstopJS pode ser usado para automatizar esses testes de forma rápida e confiável, executando os testes em diferentes momentos do ciclo de desenvolvimento.

1. Testes de
Regressão Visual
Dando um Upgrade em seus testes da
camada de UI

2. Hello!
Eu sou a Mari!
QA Engineer no P&D da Lenovo
Co-Organizer QA Ladies
FB: /mel.mariielisa
IN: /mariana-elisa-moises
Medium: @mari_elisa.m
Email: marielisa.moises@gmail.com
2

3. 3

4. “A inovação é o que distingue um líder de
um seguidor
- Steve Jobs
4

5. 1.
Teste de Regressão
É o teste repetido de um programa
que já foi testado, após sua
modificação, para descobrir
a existência de algum defeito
introduzido ou não coberto
originalmente como resultado da
mudança
CTFL Syllabus - BSTQB
5

6. Teste de Regressão
6

7. “Teste de Regressão Visual são scripts de
teste que navegam pela aplicação tirando
screenshots ao longo do percurso e
procurando por diferenças visuais baseada
em screenshots previamente aprovadas
7

8. A Pirâmide de Testes
Por se tratar de
comparação de imagens,
os Testes de Regressão
Visual acontecem na
camada de UI da Pirâmide
de Testes.
8

9. Diferenças:
Testes Funcionais
▧ Valida se o usuário
conseguiu efetuar login;
▧ Valida se os campos de um
formulário estão todos
preenchidos;
▧ Valida se o pedido foi
emitido com sucesso;
▧ Valida os principais fluxos
da aplicação
Testes Visuais
▧ Valida se a imagem tem as
mesmas medidas em pixels;
▧ Valida se um gráfico possui as
mesmas dimensões;
▧ Valida a cor de fundo de um
site;
▧ Valida a localização do elemento
em tela.
9

10. E quanto a
execução?
10

11. Manual
▧ É lento
▧ Sujeito a falhas
▧ Cansativo
▧ Depende de alguém pra ser
executado
Automatizada
▧ É rápido (executado em
headless normalmente)
▧ Permite execução em vários
momentos dentro da pipeline de
desenvolvimento
▧ É confiável
11
Execução:

12. Quando devo usar?
▧ Aparência e visual são fatores importantes
▧ Layout responsivo
▧ Aplicações em que o layout esteja estável
▧ Gráficos
▧ Imagens
12

13. E quanto ás ferramentas:
13

14. BackstopJS
14

15. Give me reasons?!
15
▧ Fácil de instalar e usar
▧ Sintaxe simples
▧ Relatórios do navegador com diferenças visuais
▧ Relatórios CLI
▧ Relatórios JUnit
▧ Roda bem com CI e controle de origem
▧ Executar globalmente ou localmente

16. 3 Comandos básicos:
backstop init
Seta uma nova instância do
BackstopJS
backstop test
Cria uma sequência de
screenshots de teste e
compara com as
referências.
backstop approve
Permite aprovar as
screenshots que irão servir
como baseline para
comparação.

17. Talk is Cheap,
Show me the CODE!
Demo time! ;)
17

18. Fonts:
▧ https://github.com/garris/BackstopJS
▧ http://shipit.resultadosdigitais.com.br/blog/testes-de-regressao-visual-
obtendo-olhos-a-prova-de-erros/
▧ https://talkingabouttesting.com/tag/testes-de-regressao-visuais/
▧ https://pt.slideshare.net/juliodelimas/qaninjaconf2017-testes-de-
regresso-visual-com-galen-framework
18

19. Thanks!
Any questions?
You can find me at:
FB: /mel.mariielisa
IN: /mariana-elisa-moises
Medium: @mari_elisa.m
Email: marielisa.moises@gmail.com go to my homepage
19