Testes de regressão visual com BackstopJS e GoCD

Como rodamos testes de regressão visual no appear.in durante o processo de entrega contínua

Alguns meses atrás o amigo e colega de profissão Agnaldo Vilariano me indicou o BackstopJS como uma alternativa para a execução de testes de regressão visual e eu resolvi investir um tempo para experimentar a ferramenta.

Após um experimento bem sucedido estou aqui para compartilhar como estamos executando testes de regressão visual pós implantações em produção de forma totalmente automatizada através do GoCD.

Temos um pipeline de implantação com 5 estágios, são eles:

• Testes de unidade: executados a partir do branch master antes da implantação em produção
• Implantação: executado manualmente caso o estágio anterior tenha passado. Este estágio realiza a implantação das mudanças no ambiente de produção
• Verificação funcional pós-implantação: executado automaticamente no caso de implantação bem sucedida. Este estágio executa testes funcionais automatizados contra o ambiente de produção para garantir que as novas mudanças recém implantadas não afetaram funcionalidades já existentes. Em caso de falha uma notificação é automaticamente enviada ao time de desenvolvimento.
• Verificação visual pós-implantação: executado automaticamente após a verificação funcional ser bem sucedida. Este estágio executa os testes de regressão visuais, também contra o ambiente de produção, utilizando a biblioteca BackstopJS. Em caso de falha uma notificação é automaticamente enviada ao time de desenvolvimento.
• Aprovação de novas screenshots base: executado manualmente, somente no caso de falhas visuais esperadas, ou seja, a aplicação mudou visualmente e as screenshots base precisam ser atualizadas para serem utilizadas como base para as próximas execuções dos mesmos testes.

Neste post o foco está nos dois últimos estágios do pipeline.

Alguns detalhes que gostaria de ressaltar sobre estes estágios são:

• Antes da verificação visual, recuperamos as screenshots base de um bucket no S3 da AWS. Isto é necessário devido a utilização de diversos agentes GoCD. Daí então a comparação visual é realizada utilizando tais screenshots base.
• No último estágio do pipeline (aprovação de novas screenshots) enviamos as screenshots tiradas no momento da execução do último testes como artefatos do GoCD (aqui basicamente enviamos tais artefatos de um estágio para o outro), e por fim publicamos tais screenshots no bucket no S3 da AWS para serem atualizadas e utilizadas na proxima execução dos testes

Um ponto interessante de ressaltar sobre a utilização de tal abordagem e ferramenta é o fato de que executamos os mesmos testes em diferentes viewports, ou seja, os mesmos testes são executados simulando a visão da aplicação na versão desktop e mobile, o que aumenta a cobertura dos testes.

E você? Já está realizando testes de regressão visual como parte do processo de integração e entraga contínua? Gostaria de aprender mais sobre o assunto? Conheça o Curso de Testes de Regressão Visual com BackstopJS da Escola Talking About Testing.

E bons testes!