Experiência na automação de testes visuais de regressão em Java + Selenium Webdriver + aShot

Olá.

Neste artigo, gostaria de falar sobre minha experiência na automação de testes de regressão visual.

1. Introdução

Decidi fazer a automação do teste visual depois que descobri acidentalmente um pequeno bug no layout. O projeto mudou o design de uma página e as alterações atingiram as páginas que não são de tarefas.

Tendo decidido que a verificação manual da aparência das páginas do site não era uma opção, iniciei a automação.

Precisávamos de uma solução simples com relatórios convenientes. Para poder escrever autotestes sem restrições, compare capturas de tela de páginas e elementos do site e use navegadores diferentes.

Após uma breve pesquisa por uma solução / estrutura pronta, foi decidido que seria mais fácil escrever sua própria solução com a funcionalidade e o formato necessários de relatórios. Das opções que vi, apenas o Framework Galen parecia adequado, mas eu o encontrei depois que escrevi minha solução.

Depois de implementar e testar os autotestes, decidi refinar os testes um pouco e criar um projeto separado, para poder usá-lo posteriormente em outros sites e projetos.

Sobre o projeto

VisualRegressionBoilerplate é um projeto relativamente simples com uma estrutura específica.

Algo como um modelo / projeto padrão para autotestes visuais.

O projeto é destinado a pequenos sites / projetos. Para quem precisa de uma solução simples, sem estruturas complexas.

As possibilidades

• Comparação de capturas de tela das páginas do site. Você pode especificar um ou mais itens ignorados.
• Comparação de capturas de tela dos elementos do site.
• Os testes podem ser executados com diferentes larguras de tela: celular - 360px, tablet - 768px, computador - 1920px
• Por padrão, dois navegadores estão disponíveis - chrome e firefox + os mesmos navegadores no modo sem cabeça .
• Gerador de relatórios - 4 capturas de tela são criadas para cada teste - atual, esperado, diferença, gif. Se não houver capturas de tela esperadas, as capturas de tela reais serão salvas como esperado.

Tecnologias usadas

• Java
• Testng
• Maven
• Chave de selênio
• aShot - uma biblioteca para comparar imagens

Como começar a trabalhar com um projeto

1. Instale java, maven, navegadores.
2. No construtor da classe DriverWrapper , você pode adicionar ou remover navegadores, se necessário
3. A classe TestConfig armazena todas as configurações do projeto - navegador, tamanho padrão da janela do navegador etc. Aqui você pode adicionar ou alterar configurações.
4. Na classe BasePage , defina o endereço do site testado. Você pode definir um endereço diferente para diferentes ambientes (dev, stage, prod). BasePage e o restante das classes no módulo de aplicativo são um exemplo do padrão de objeto da página . O uso é opcional.
5. Examine a classe de teste TestExample e crie suas próprias classes de teste como exemplo.
6. Adicione novas classes de teste ao testng.xml
7. Execute testes com os parâmetros necessários através do maven
8. Verificar relatório na pasta de relatório

No projeto README , tudo é descrito em mais detalhes.

Como escrever testes

Em geral, como você gosta. Não há restrições. Você pode usar o padrão de objeto da página ou outra coisa.

Tudo que você precisa é usar as seguintes funções para comparar capturas de tela:

Para páginas:

Comparação de capturas de tela da página:

comparePageScreenshots("index_page"); 

Comparação de capturas de tela da página ignorando um elemento:

 comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK); 

Comparação de capturas de tela da página com a ignorância de vários elementos:

  comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"}); 

Comparação de capturas de tela do elemento page - o elemento pode ser pesquisado pelo localizador css

 compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK); 

Ou você pode passar um objeto da classe WebElement

 compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge"))); 

Possíveis problemas

• Os testes podem falhar devido ao conteúdo dinâmico da página. O problema é resolvido ignorando elementos com conteúdo dinâmico.
• Os testes podem falhar devido a uma diferença de alguns pixels. Você pode corrigir isso editando a configuração - TestConfig.allowableDiffSize .
• Às vezes, todas as imagens ou alguns elementos do site não têm tempo para carregar. Para corrigir isso, escrevi a função preparePageForScreenshot () na qual, usando javaScript, a página rola para cima e para baixo. Mas isso nem sempre ajuda.

Sumário

No momento, o projeto possui cerca de 50 testes - páginas e diferentes elementos de página.
Por meio do script bash, são lançados autotestes e o site é testado imediatamente em três extensões (celular, tablet, computador).

Existem alguns problemas devido ao conteúdo dinâmico e ao fato de que alguns elementos do site nem sempre têm tempo para carregar no prazo, mas os autotestes podem lidar com sua tarefa.

Quaisquer alterações no layout são imediatamente visíveis.

Link para o repositório do projeto - VisualRegressionBoilerplate