Blog > Testes Regressivos Visuais – Parte II – Ferramenta: Applitools Eyes

30/abr

Continuando a série sobre testes regressivos visuais, veremos neste post a ferramenta Applitools Eyes. Com ela é possível realizar a validação das telas de uma aplicação em diversas resoluções de tela, navegadores e dispositivos. Trataremos, neste momento, da instalação, gravação e execução de validações, assim como de alguns ajustes.

Olá pessoal!

Dando continuidade a nossa série sobre testes regressivos visuais, escrevo hoje sobre a ferramenta Applitools Eyes. Pra quem não se lembra ou não leu o post anterior, esta ferramenta fornece mecanismos de validação de todos os aspectos visuais da tela de uma aplicação, e pode ser executada em diversos dispositivos. Além disso, ela pode ser integrada com uma série de ferramentas de automação de testes, como o Selenium, Appium, QTP, entre outras. O ponto negativo é que a gravação dos scripts nos navegadores Firefox, Internet Explorer e Safari necessita de uma aplicação standalone instalada na máquina do automatizador (no caso do Chrome, basta um plugin instalado), porém a criação de plugins para estes navegadores está no Roadmap da empresa.

Caso você queira ler a primeira parte desta série, que trata da introdução aos testes regressivos visuais, basta  clicar aqui.


Continuando nosso papo sobre testes regressivos visuais com Applitools Eyes, vou descrever o passo a passo para utilizarmos a ferramenta.

Leitor(a): Deixa de blá blá blá e vamos logo para a ação!

Ok ok. Precisamos nos cadastrar, afinal esta aplicação é fornecida no modelo SaaS, Cloud Computing na veia (veia, e não véia ok?). Primeiramente, devemos acessar o seguinte endereço: https://applitools.com/ e em seguida vamos clicar no botão “Sign Up”, presente na parte superior direita da tela. Informaremos os dados pessoais “First Name” (Nome), “Last Name” (Sobrenome), “Email Address” (Email), “Choose Password” (Senha), “Verify Password” (Confirmação de Senha) e clicaremos no botão “Get Started”.

Leitor(a): Cadastro realizado, e agora?

Agora vamos instalar um plugin do Google Chrome.

Leitor(a): Como assim? Não era na nuvem?

Boa parte dos serviços é na nuvem, mas é necessário o plugin para realizar algumas pequenas coisas e facilitar ainda mais a utilização desta ferramenta. Vamos preparar nossa máquina para que possamos realizar a gravação de validações sem que seja necessário escrever nenhuma linha de código (uhuL !!!). Para isso, basta clicar no botão “Codeless Browser Tests” e, em seguida, clicar no ícone do Google Chrome, presente abaixo do texto “Step 1”. Na sequência, temos que instalar o plugin do Google Chrome, clicando em “Chrome Web Store”, abaixo do texto “Step 2”. Ao clicar neste link, será aberta uma nova aba apresentando o plugin do Applitools Eyes na webstore do Google. Vamos então clicar no botão “+ Add to Chrome” e, por ultimo, clicaremos em “Adicionar”, na popup que será apresentada. Pronto! Já podemos fechar esta aba da webstore do Google.

Ficou confuso? Também fiquei, e por isso gravei o vídeo abaixo para facilitar a explicação.

Com o plugin instalado, veremos agora como criar validações visuais sem escrever nenhuma linha de código!

Leitor(a): E agora? Finalmente vamos gravar algo?

Siiiim! A primeira coisa a fazer é acessar a aplicação que será testada. Vamos testar o site da Qualister! Esse mesmo que você está acessando, mas abra em uma nova aba pelo Google Chrome para poder ir lendo e fazendo, ok?

  1. Clique no ícone do Applitools Eyes, na parte superior direita do navegador Google Chrome. Com isso, serão apresentados alguns botões.
  2. Clique no botão “Group tests by session”, representado por uma pasta.
  3. Informe o nome da validação (Eu usei "Qualister_Principal") e clique em “Run visual tests by crawling pages in the website”, representado por duas câmeras fotográficas com o botão "play" no meio.
  4. Nesse momento a tela do navegador será redimencionada para a resolução informada, e em seguida, o número “1” será mostrado juntamente com o ícone do plugin Applitools Eyes. Quando o número “1” desaparecer significa que a execução já foi realizada e o log foi gravado no servidor.

Obs.: A ação descrita no passo 4 acontece porque o plugin já grava e executa a validação na tela, e o número “1” representa a quantidade de validações que estão sendo executadas.

Leitor(a): Não entendi direito como gravar.

Sem problemas, o vídeo abaixo pode te ajudar.

Leitor(a): Só isso? Simples assim?

Simples assim! Vamos gravar uma nova validação? Desta vez acessando a aba “Produtos” do site da Qualister.

  1. Clique na aba “Produtos” do site da Qualister.
  2. Clique no ícone do Applitools Eyes, na parte superior direita do navegador Google Chrome.
  3. Informe o nome da validação (Eu usei "Qualister_Produtos") e clique em “Run visual tests by crawling pages in the website”.

Pronto. Nossas validações foram gravadas.

Leitor(a): Gravei as validações, mas como faço para ver o log de execução?

No endereço https://eyes.applitools.com/ você vai encontrar os logs de exeução. Perceba que a validação“Qualister_Produtos” passou mas a validação “Qualister_Principal” falhou.

Leitor(a): Estou vendo que falhou, mas POR QUE falhou?

Veremos agora o motivo com estes dois passos:

  1. Clique em “Qualister_Principal”, e em seguida clique no botão “Failed”.
  2. Na parte central direita da tela existe um quadro chamado “View” onde existe o botão “Show the baseline and new images side by side (s)”. Clique neste ícone e você verá a tela gravada e a tela obtida na execução, ambas lado a lado.

Algumas partes da tela estão cobertas por quadros da cor rosa (rosa choque beeeem forte). Estes quadros representam as diferenças entre as telas, ou seja, o que está errado. O problema é que estes são falsos erros, pois representam partes dinâmicas do site e não devem ser validadas.

Caso prefira, veja este vídeo:

Leitor(a): E agora? Como desconsiderar partes dinâmicas da tela?

No quadro “Regions”, logo abaixo do quadro “View” descrito agora a pouco, existe o botão “Add a region inside witch differences should be ignored”. Basta clicar neste botão e desenhar os quadrados em torno do conteúdo dinâmico. Veja no vídeo abaixo como eu fiz.

Leitor(a): Caramba, não existe nenhum botão “Play” para que eu possa reexecutar o teste!!! Como eu faço?

Apenas acesse a tela que deseja testar novamente. No nosso caso teremos que acessar a página inicial do site da Qualister.

Vamos clicar novamente no ícone do plugin Applitools Eyes no navegador e em seguida clicar em “Run a visual test”.

Ao final da execução será aberta a tela de log com o novo status de execução. Pronto!

Concluindo...

O que fizemos neste post foi apenas o básico do que esta ferramenta fornece. Com ela é possível, por exemplo, escrever e executar testes com o Selenium, Appium, QTP, entre outros. Mas isso é assunto para outra publicação.

Espero que tenham gostado. No início deste post há um breve resumo do meu currículo e também meu email caso queiram entrar em contato conosco. Muito obrigado e por hoje é só  p-p-pessoal!

POSTS RELACIONADOS

Workshop Gratuito de Testes Regressivos Visuais

Conheça as melhores práticas e ferramentas

AGENDA

CURSOS RELACIONADOS