Blog > Testes Regressivos Visuais – Parte III – Ferramenta: Applitools Eyes com WebDriver

26/mai

Continuando a série sobre testes regressivos visuais, veremos neste post como integrar o Selenium WebDriver com a ferramentas de testes regressivos visuais 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.

Fala galera!

Continuando nossa série sobre testes regressivos visuais, veremos como criar testes e executá-los com o Selenium WebDriver integrado ao Applitools Eyes.

O Applitools Eyes é uma ferramenta utilizada para testes regressivos visuais. Basicamente ela compara o visual da tela com uma imagem previamente gravada e mostra as diferenças encontradas.

Já o Selenium WebDriver é uma ferramenta utilizada para automação de testes. Com ela é possível simular ações do usuário navegando em uma aplicação web. Para compreensão deste post é necessário conhecer um pouco de WebDriver. Caso você esteja um pouco perdido em relação ao WebDriver, vale a pena dar uma lida nesse post aqui, criado pelo Elias Nogueira, um dos feras aqui da Qualister.

E então, simbora?

Lembrando que, na primeira parte desta série foi descrito o conceito e também um overview sobre algumas das ferramentas que viabilizam a implementação de testes regressivos visuais. Na segunda parte nós vimos como criar testes com a ferramenta Applitools Eyes sem escrever nenhuma linha de código. Sugiro fortemente estas leituras para facilitar a compreensão do restante deste post.

    1. Iniciando os trabalhos, vamos abrir o Eclipse e criar um projeto java (caso você queira utilizar um projeto já existente, fique a vontade). 

    2. Na sequência, iremos realizar login na ferramenta Applitools Eyes.  

 

    3. Agora vamos baixar a biblioteca do Eyes e incorporar ao nosso projeto. Para baixar, basta seguir o vídeo abaixo, ou então clicar diretamente neste link.

 

No "Step 4" desta página é informada a API Key. Anote essa informação pois precisaremos dela daqui a pouco.

    4. Depois de baixar o arquivo ZIP, basta descompactá-lo e importar todos os arquivos JAR para o projeto java além, é claro, das bibliotecas do WebDriver. Ao final, o projeto deve conter as seguintes bibliotecas:

  • aopalliance-repackaged-2.2.0.jar
  • commons-codec-1.6.jar
  • commons-logging-1.1.3.jar
  • eyes-sdk-java-2.4.jar
  • eyes-selenium-java-2.5.jar
  • hamcrest-core-1.3.jar
  • hk2-api-2.2.0.jar
  • hk2-locator-2.2.0.jar
  • hk2-utils-2.2.0.jar
  • httpclient-4.3.1.jar
  • httpcore-4.3.jar
  • jackson-annotations-2.1.2.jar
  • jackson-core-2.1.3.jar
  • jackson-databind-2.1.3.jar
  • javassist-3.18.1-GA.jar
  • javax.annotation-api-1.2.jar
  • javax.inject-2.2.0.jar
  • javax.ws.rs-api-2.0.jar
  • jersey-apache-connector-2.6.jar
  • jersey-client-2.6.jar
  • jersey-common-2.6.jar
  • jersey-guava-2.6.jar
  • junit-4.11.jar
  • osgi-resource-locator-1.0.1.jar
  • selenium-java-2.45.0.jar
  • selenium-server-standalone-2.45.0.jar

    5. Finalmente, vamos criar nosso teste. O código abaixo acessa a página da Qualister e faz a validação visual, em seguida acessa o menu "Serviços" e realiza uma nova validação visual. Então vamos lá! Crie uma classe e inclua o seguinte método de teste:

@Test

public void testeConsultaServicos() {

    WebDriver driver = new FirefoxDriver();

    Eyes eyes = new Eyes();

    eyes.setApiKey("XXX");

    try {

        driver = eyes.open(driver, "Qualister", "Visualização de serviços", new RectangleSize(1024, 768));

        driver.get("http://www.qualister.com.br");

        eyes.checkWindow("Pagina Principal");

        driver.findElement(By.cssSelector("#top > a.menu")).click();

        driver.findElement(By.linkText("SERVIÇOS")).click();

        eyes.checkWindow("Pagina Serviços");

        eyes.close();

    } catch (NoSuchElementException nsee) {

        throw nsee;

    } catch (Exception e) {

        e.printStackTrace();

    } finally {

        eyes.abortIfNotClosed();

        driver.quit();

    }

}

 

Substitua o valor XXX pela sua API Key, anotada agora a pouco, no passo 3.

    6. Pronto. Basta executar essa classe como teste unitário.

 

   7. Como visualizar o resultado de execução? Ao executar o teste, será apresentada a exceção "com.applitools.eyes.NewTestException: 'Visualização de serviços' of 'Qualister'". Não se desespere, isso vai acontecer sempre que você executar um teste pela primeira vez. Essa exceção foi lançada apenas para informar que este é um novo teste. Acesse o link https://eyes.applitools.com/app/sessions/ e aprove seu teste clicando em "Visualização de serviços" e depois em "Qualister". Depois clique em "Accept" e depois em "Save".

Repita o passo 6 para executar novamente o teste. Agora será lançada a exceção "com.applitools.eyes.TestFailedException: 'Visualização de serviços' of 'Qualister'.". Isso acontece porque algumas partes da tela estão diferentes do que foi aprovado no passo anterior. Acesse novamente o link https://eyes.applitools.com/app/sessions/, clique na seta circular para atualizar a lista de testes executados, selecione o seu teste que falhou e ajuste as regiões que não serão validadas. Caso você tenha dúvidas de como fazer isso, leia novamente a segunda parte desta série sobre Testes Regressivos Visuais.

Por enquanto é só galera.

POSTS RELACIONADOS

Workshop Gratuito de Testes Regressivos Visuais

Conheça as melhores práticas e ferramentas

AGENDA

CURSOS RELACIONADOS