O BackstopJS (criado e mantido por Garris Shipon) automatiza os testes de regressão visual de uma interface web responsiva, por meio da comparação das capturas de tela.
Para utilizar o backstopJS basta clonar o repositório ou instalar via npm
npm install -g backstopjs
Acessar o arquivo backstop.json e realizar as configurações conforme desejado.
Em scenarios estarão os cenários de testes, sendo propriedades obrigatórias a label, que é um nome para a tela, e a url que será o endereço objeto do teste. As demais propriedades são opcionais.
OBS.: É possível alterar a estrutura para utilizar um arquivo de configuração .js, possibilitando separar em arquivos distintos as viewports e scenarios, por exemplo. Example jsBasedConfig | Viewports in separate files
backstop init- Inicializará a estrutura, criando os diretórios e arquivos de configuração (Necessário quando instalar via npm)
backstop test- Executa os testes
backstop approve- Aprova as imagens alteradas para que sejam consiradas como imagens de referência
backstop reference- Cria uma nova referência, descartando todas as imagens anteriormente capturadas
Todos os testes irão falhar ao utilizar o comando test pela primeira vez. O report será disponibilizado permitindo visualizar as imagens e validar se estão conforme esperado.
Após essa primeira validação e confirmação visual, será possível aprovar as imagens para que sejam consideradas como referência para as próximas execuções. Portanto, é necessário aprovar as imagens utilizando o comando approve.
Também é possível executar os testes em um container Docker.
backstop test --docker
Testes de regressão visual (Visual Regression Tests/VRT) são testes de alto nível que conseguem expor qualquer alteração visual de um sistema, seja em uma página específica ou em um determinado fluxo que o usuário irá percorrer. Em vez de apenas assegurar que algum elemento ou valor de texto está presente, o teste realmente abre a página e verifica se esse bloco específico aparece exatamente como é esperado que ele apareça. Para que isso seja feito, esse tipo de teste faz uma captura da página que está sendo testada e compara este screenshot com sua versão estável (baseline).
Teste de snapshot e teste de regressão visual são duas maneiras distintas de testar interfaces de usuário, ou UIs, e eles servem para finalidades diferentes. Ferramentas de teste de regressão visual tiram screenshots de páginas web e comparam as imagens resultantes pixel por pixel. Com testes de snapshot os valores são serializados, armazenados dentro de arquivos de texto e comparados usando um algoritmo de comparação.
-
Regressão Visual
- BackstopJS (Gratuito) - Open-source para testes de aplicações web.
- Percy (Uso gratuito limitado a 5.000 snapshots por mês)
-
Snapshot
- Jest (Gratuito)
- @cypress/snapshot