Estratégia de validação de layout com a ferramenta BackstopJS e como utilizá-la para fazer teste de regressão visual.

2. Validando o layout de uma
aplicação web sem dor com
BackstopJS

3. Cristiane Souza
QA
@Concrete
Contatos
cristi.ssouza@gmail.com
https://www.linkedin.com/in/cristiane-souza-b5139a57/

4. Agenda
• Pirâmide de Testes
• Teste de Regressão Visual
• Estratégia de validação de layout
• BackstopJS

5. Pirâmide de Testes

6. “Teste de regressão visual permite-nos fazer comparações entre a versão
correta (base) do nosso site e a versão em desenvolvimento preste a ser
implantado (novo). O processo é nada mais que comparar a screenshot base
com a nova, procurando por diferenças nos pixels”
Golbolt, Micah
Fonte: Frontend Architecture for Design Systems: A Modern Blueprint for Scalable and Sustainable Websites,
2016
Teste de Regressão Visual
O que é?

7. ● Detectar mudanças que não é facilmente perceptível. Por exemplo, alteração
de pixels em uma imagem, alteração no tipo de fonte, etc.
● Diminui bugs visuais
Porque Fazer Teste de Regressão
Visual?

8. Estratégia de Validação de Layout
Implementação
Visual
Regression
Deploy Homol
Visual
Regression
Dev x Homol
Atualizar
Referências
Definir
estratégia
com designer

9. QA e Designer
● Aumenta a confiança no layout da aplicação entregue
● Antecipação a problemas
● Orienta decisões
● A troca de idéias ajuda na evolução da funcionalidade/
aplicação

10. Como Fazemos?
● Utilizar mocks (ex: Apiary.io)
● Utilizar vários arquivos de configuração (ex: Desktop e Mobile)
● Módulos reaproveitáveis
● Utilizar apenas o necessário nos arquivos de configuração

11. BackstopJS

12. Porque BackstopJS
●Fácil configuração
●Relatório dos testes bastante compreensíveis
●Relatório com diferentes resoluções
●Utiliza o DOM da página web para comparar as screenshots
●Renderiza a página com Chrome Headless, PhantomJS e Slimer
●Simula a interação do usuário com scripts Puppetter, ChromyJS e CasperJS

13. Configurando backstopJS
● Instalação
○ npm install –g backstopjs / npm install backstopjs --save-dev
○ Backstop init
● Principais comandos
○ backstop test
○ backstop approve
○ backstop reference
● Arquivo backstop.json
○ Arquivo de configuração onde é criado os cenários de testes e configurados as resoluções a serem testadas
● url x referenceUrl
○ Utilizado para fazer teste de regressão visual comparando diferentes ambientes. Ex: ambiente de dev x ambiente de homolog / prod
● Executando arquivos e cenários específicos
○ --filter=<scenarioLabelRegex>
○ --config=<configFilePathStr>

14. Backstop.json
{
"id": "backstop_default",
"viewports": [
{
"label": "phone",
"width": 320,
"height": 480
}
],
"scenarios": [
{
"label": "BackstopJS Homepage",
"url": "./magazine/index.html",
"referenceUrl": "",
"readySelector": "",
"delay": 0,
"readyEvent": "",
"removeSelectors": [],
"hoverSelector": "",
"clickSelector": "",
"selectors": [],
"requireSameDimensions": true
}
]
}

15. Mãos na massa o/ o/

16. Exemplo de relatório
criado pelo BackstopJS

17. BackstopJs e Puppeteer Engine
Puppeteer é uma biblioteca node que usa um alto nível de API para controlar o Chrome
e Chromium . Por padrão o Puppetter é headless, mas pode ser configurado para rodar
não headless Chrome e Chromium.

18. Problemas
● Bugs (ex: screenshots vem em branco em certas condições)
● Apenas chrome
● Flakiness

19. Conclusão
Teste de regressão visual é uma ferramenta poderosa e permite os
desenvolvedores verificar se o layout está quebrando quando estão
desenvolvendo uma nova feature . Também ajuda a reduzir a quantidade de
regressões quando muitas pessoas estão trabalhando em uma base de código
existente.

20. Perguntas?????

21. https://github.com/garris/BackstopJS
https://books.google.com.br/books?id=acV4CwAAQBAJ&pg=PT131&dq=visual+regression+testing&hl=en&sa=
X&ved=0ahUKEwjc_tHf1brbAhXHEJAKHbGPCZsQ6AEILTAB#v=onepage&q=visual%20regression%20testing&f
=false
https://books.google.com.br/books?id=Uf-
qCAAAQBAJ&pg=PA277&dq=visual+regression+testing&hl=en&sa=X&ved=0ahUKEwio1orW6bzbAhXJkJAKH
QbjAf4Q6AEILTAB#v=onepage&q=visual%20regression&f=false
https://visualregressiontesting.com/
https://github.com/cristissouza/visualRegressionbackstopJS
Referência bibliográfica

22. NÓS MOVEMOS O MUNDO.
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
Ilha do Leite
Rua Sen. José Henrique,
199
2º andar
(81) 3018-6299
WWW.CONCRETE.COM.BR