Testes de comparação de screenshots simplificados
O projeto backstop-config tem o propósito de simplificar a implementação de testes automatizados de comparação de screenshots, também conhecidos como testes de regressão visual, em websites estáticos com diversas URLs.
A idéia deste post é demonstrar os passos necessários para você começar ainda hoje a criar testes automatizados para seus projetos pessoais e/ou profissionais, com pouco esforço.
Para começar, recomendo dar uma lida na documentação do projeto, para ir se familiarizando.
Para usuários de sistema operacional Windows, recomendo também a leitura do seguinte arquivo.
Para facilitar a explição, vou utilizar o projeto do meu antigo website, visto que ele era um site completamente estático, onde cada página era um arquivo .html diferente.
O site possuia três páginas (home, consultoria e desenvolvimento), cada uma em três linguas (português, espanhol e inglês). Ou seja, nove páginas diferentes que poderiam quebrar visualmente.
A estrutura do projeto era mais ou menos assim:
Ok, seguindo a documentação do projeto backstop-config, o primeiro passo é fazer o clone do projeto no GitHub, porém, como meu antigo website já existe em meu computador, já está hospedado em um repositório remoto, e também já possui um arquivo package.json, vou simplesmente installar as dependências de desenvolvimento descritas no arquivo package.json (assumindo que tenho o Node.js instalado na versão 8.11.3). Para instalar as dependências irei executar o comando abaixo dentro da raiz do projeto, ou seja, onde o arquivo package.json localiza-se.
npm i ajv@6.5.2 backstopjs@3.5.2 react-dom@15.6.2 -D
Obs.: Caso você esteja fazendo o clone do projeto, basta executar o comando abaixo dentro do diretório onde o projeto foi clonado.
npm i
O próximo passo, chamado de tests’ setup, trata de atualizar um arquivo.
Como vou utilizar tais testes em um projeto já existente, em vez do projeto backstop-config recém clonado do GitHub, em vez de editar o arquivo, irei criar o diretório test na raiz do projeto já existente, e dentro dele vou criar os arquivos mainConfig.js e basicConfig.js, sem modificá-los.
Em seguida, vou alterar os valores do arquivo basicConfig.js conforme as instruções nos comentários deste arquivo. Ou seja, para a variável baseUrl, vou colocar “file:///Users/walmyr/www/walmyr-filho-personal-brand/src/html”, para a variável projectId, vou colocar “Walmyr Filho old website”, no array de URLs relativas (relativeUrls) vou colocar “/index.html”, “/es-index.html”, “/en-index.html”, “/consultoria.html”, “/es-consultoria.html”, “/consultancy.html”, “/desenvolvimento.html”, “/desarrollo.html”, “/development.html”, e por fim, no array de viewports vou deixar somente o viewport “desktop”, visto que este website não era responsivo.
Obs.2: Veja que para o valor da variável baseUrl estou apontando para um diretório em meu computador, visto que o site não está mais acessível na internet. No caso de um site acessível via internet, o valor da variável baseUrl deve ser preenchido com a URL do site, como por examplo http://example.com.
Obs.3: Se seu site é responsivo, recomendo deixar os viewports pré-configurados.
E por último, antes de poder executar os testes, irei adicionar a seção scripts no arquivo package.json já existente em meu projeto.
Obs.4: Este passo não é necessário se você clonou o projeto e está trabalhando dentro dele. No meu caso este passo é necessário pois estou copiando os arquivos do projeto no GitHub para um projeto já existente em meu computador.
Agora a estrutura do projeto ficou assim:
Tudo pronto! Hora de executar os testes com o comando abaixo:
npm t
Após a primeira exceção dos testes, tenho 9 testes falhando (veja abaixo).
Tais falhas ocorrem visto que ainda não existe nenhuma screenshot aprovada para ser usada como referência para comparação durante a execução dos testes, portanto, o próximo passo é exatamente aprovar as screenshots recém tiradas como referencias. Hora de executar o comando abaixo:
npm run backstop:approve
Após aprovar as screenshots como referência um output como o abaixo deve ser exibido.
Agora, re-executando os testes tenho 9 testes passando (re-executei os testes com o comando ‘npm t’).
E é isso, com poucos passos e sem a necessidade de muito código tenho testes de regressão visuais para todas as páginas de um website, sem esforço.
Agora é a sua vez.
Ficou interessado em aprender mais sobre testes de regressão visual? Confira meu curso de BackstopJS na Escola Talking About Testing.
Confira também o mini-curso gratúito de backstop-config!
Atá a próxima e bons testes!
TALKING ABOUT TESTING 
Achei muito boa a sua automação, contudo obtive um erro que me parece o caminho , mas ainda não consegui resolver.
C:\Automação Site\backstop-config-master\test
λ npm t
> backstop-configStelo@1.0.0 test C:\Automação Site\backstop-config-master
> npm run backstop:test
> backstop-configStelo@1.0.0 backstop:test C:\Automação Site\backstop-config-master
> source ./setup.sh && rm -rf test/backstop_data/bitmaps_test && backstop test –config=test/backstopSettings.js
‘source’ não é reconhecido como um comando interno
ou externo, um programa operável ou um arquivo em lotes.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! backstop-configStelo@1.0.0 backstop:test: `source ./setup.sh && rm -rf test/backstop_data/bitmaps_test && backstop test –config=test/backstopSettings.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the backstop-configStelo@1.0.0 backstop:test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Inmetrics.LP1439\AppData\Roaming\npm-cache\_logs\2018-08-02T14_09_09_946Z-debug.log
npm ERR! Test failed. See above for more details.
Hrm, good point!
Isto também é específico de sistemas operacionais baseados em Unix e não havia percebido.
Uma alternativa é definir tais variáveis de ambiente direto em seu computador e remover esta parte do npm script.
Vou investigar e atualizar a documentação em breve.
Valeu pela resposta. Só para add informações testamos
no Linux e no Windows
E não funcionou no Linux?
O mesmo erro ocorreu no Linux
Na verdade foi um subsistema Linux dentro do Windows
Vamos rodar na VM agora
De qualquer forma, tente simplesmente exportar tais variáveis de ambiente no sistema operacional rodando os testes, remova este passo do npm script, e deve funcionar.
Estou fazendo uma mudança no projeto onde o arquivo .sh não será mais necessário. Assim que estiver no ar aviso.
Vou atualizar este post também.
Projeto e blog post atualizados. Aguardo seu feedback se assim funciona. Na minha visão ficou mais simples. Espero estar certo. =p
C:\Automação Site\backstop-config-master\test
λ npm t
> backstop-config@1.0.0 test C:\Automação Site\backstop-config-master
> npm run backstop:test
> backstop-config@1.0.0 backstop:test C:\Automação Site\backstop-config-master
> rm -rf test/backstop_data/bitmaps_test && backstop test –config=test/backstopSettings.js
‘backstop’ não é reconhecido como um comando interno
ou externo, um programa operável ou um arquivo em lotes.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! backstop-config@1.0.0 backstop:test: `rm -rf test/backstop_data/bitmaps_test && backstop test –config=test/backstopSettings.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the backstop-config@1.0.0 backstop:test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Inmetrics.LP1439\AppData\Roaming\npm-cache\_logs\2018-08-02T16_54_49_423Z-debug.log
npm ERR! Test failed. See above for more details.
agora foi UUUHUUHH
No seu curso de “Testes de regressão visual com BackstopJS” voce ensina como fazer para a automação navegar entre as paginas do site?
Olá Julio,
Na seção ‘Currículo do curso’ você pode expandir cada item para ver o que é abordado no curso, mas brevemente respondendo sua pergunta, sim. Além disso, nos comentários das aulas também posto outros exemplos, tais como um script customizado para preencher elementos de input de texto.
Espero que goste do curso!
Aproveitando, atualizei o post e o projeto novamente. Procurei deixá-lo ainda mais simples.
Bom artigo, porém alguns errinhos de português: arquito, exeção, poranto e tirardas
Bom artigo, porém só alguns errinhos de português como: arquito, exeção, poranto e tirardas
Obrigado. Erros de Português corrigidos!
************************
*** ATUALIZAÇÃO ***
************************
O projeto foi atualizado e o que é descrito neste post está desatualizado. O post será atualizado em breve.
De qualquer forma, ficou ainda mais simples criar seus testes com o backstop-config. Agora basta editar um arquivo ao invés de dois.
A documentação no GitHub já está atualizada.
Post atualizado conforme a última versão do projeto.
Ola Walmyr, tudo bem?
Havia feito um comentário anterior, mas não consegui entender se o comentário de fato foi.
Primeiramente parabéns pelo post. Como sempre seus posts são de grande conteúdo e sempre me direcionam muito.
Tentei executar o projeto em minha máquina e estou com um erro no relatório que não consigo seguir. Estou usando o ubuntu e ao tentar executar, ele não consegue abrir o relatório. Talvez você tenha passado por isso e consegue me ajudar, se puder.
…..
report | Writing browser report
report | Resources copied
report | Copied configuration to: /home/smiranda/kong/Visual Regression/backstop-config/backstop-config/test/backstop_data/html_report/config.js
COMMAND | Executing core for “openReport”
openReport | Attempting to ping
openReport | Remote not found. Opening test/backstop_data/html_report/index.html
report | *** Mismatch errors found ***
COMMAND | Command “report” ended with an error after [0.275s]
COMMAND | Error: Mismatch errors found.
at /home/smiranda/kong/Visual Regression/backstop-config/backstop-config/node_modules/backstopjs/core/command/report.js:116:17
at process._tickCallback (internal/process/next_tick.js:68:7)
COMMAND | Command “test” ended with an error after [44.632s]
COMMAND | Error: Mismatch errors found.
at /home/smiranda/kong/Visual Regression/backstop-config/backstop-config/node_modules/backstopjs/core/command/report.js:116:17
at process._tickCallback (internal/process/next_tick.js:68:7)
Se puder me ajudar, será de grande ajuda.
Obrigada
Olá Sara, obrigado pelo feedback!
Não sei se isso vai resolver, mais tente mudar o nome da pasta ‘Visual Regression’ para ‘Visual-Regression’ e me atualize aqui.
tentei fazer dessa forma Walmyr, renomeei a pasta e baixei as dependências novamente, mas após rodar o npm t, ainda aparece o mesmo erro
Olá Sara,
Ocorre o mesmo problema seguindo os passos descritos no projeto no GitHub? https://github.com/wlsf82/backstop-config/blob/master/README.md
Oi Walmyr, obrigada por responder 🙂
Sim, acontece o mesmo problema.
Baixei também o projeto origem do Garris e no dele aconteceu a mesma coisa também. Em um dos fóruns antigos da ferramenta foi criado uma solução para este item, mas por estar com versão de OS desatualizada, no meu caso o problema continuou por esse motivo.
O que descobri é que a versão de SO que tenho, ignorou a correção realizada pelo Garris e com isso dá alguma falha ao tentar abrir o html automaticamente após a execução.
Ainda não achei uma solução definitiva, mas por hora, consegui contornar de uma forma mais simples. Como vi pelo log que o relatório é gerado corretamente o problema estava somente em abrir. Consegui contornar abrindo o relatorio manualmente: vou na pasta do relatório e clico pra abrir com o navegador que desejo e com isso, esta dando certo.
Tenho utilizado a ferramenta e tem dado certinho com meus testes. Meu próximo passo será integrar ela com uma ferramenta de e2e, para reduzir o que tenho feito manualmente.
Tem me ajudado demais seus posts e muito obrigada pela ajuda!
Legal Sara, obrigado pelo update!
Fico feliz em ajudar 😉