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:

Estrutura do projeto
Estrutura do projeto antes dos testes de regressão visual.

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.

Arquivo basicConfig.js já editado.
Arquivo basicConfig.js já editado.

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.

Arquivo package.josn editado com a seção de scripts.
Arquivo package.josn editado com a seção de scripts.

Agora a estrutura do projeto ficou assim:

Nova estrutura do projeto.
Nova estrutura do projeto.

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

Relatório de testes após a primeira execução
Relatório de testes após a primeira execução.

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.

Output da aprovação das screenshots como referências
Output da aprovação das screenshots como referências.

Agora, re-executando os testes tenho 9 testes passando (re-executei os testes com o comando ‘npm t’).

Relatório com todos os testes passando
Relatório com todos os testes passando.

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.

E bons testes!

Anúncios

18 comentários em “Lançamento do projeto backstop-config

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

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

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

    1. 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!

  3. ************************
    *** 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.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s