Testando elementos que mudam de altura com Protractor

Esses dias tive que realizar testes em uma página a qual exibe uma primeira lista de itens e um botão para ver mais itens. Quando o botão é pressionado, então mais um conjunto de itens são exibidos na lista, aumentando a altura do elemento o qual contém os itens da lista.

Para fins de verificar que ao clicar no botão “ver mais” a altura do elemento que contém os itens da lista aumentava, demonstrando que o botão só é exibido quando realmente há mais itens para serem exibidos, e que a lista realmente aumenta, utilizei o método webdriver.WebElement.getSize, da API do Protractor 2.1.0.

Segue abaixo o exemplo de testes criado:

it('should check that see more button works correctly', function () {
  var seeMore = element(by.cssContainingText('#button', 'Ver mais'))
    , mainContainer = $('#container-content')
    , actualMainContainerSize = mainContainer.getSize();

  seeMore.click().then(function () {
    browser.driver.sleep(3000);
    var postMainContainerSize = mainContainer.getSize();
    expect(postMainContainerSize).not.toEqual(actualMainContainerSize);
  });
});

Veja que na linha 9 faço a verificação de que o tamanho do container principal após o clique no botão “ver mais” não é igual o tamanho do mesmo container antes do clique.

O mesmo pode ser feito para verificar que após uma ação o tamanho do elemento não mudou. Veja abaixo:

expect(postMainContainerSize).toEqual(actualMainContainerSize);

O método getSize retorna um JSON. Algo como:

{
  width : 1008,
  height : 1754
}

Ou seja, no exemplo do teste demonstrado acima, a comparação é feita com relação ao objeto com um todo (todos os atributos são comparados), mas visto que nesta situação só a altura (height) é alterada, a verificação pode ser assim mesmo.

Veja um exemplo de um teste que falhou, pois esperava que o objeto fosse igual, mas a altura mudou:

Expected { width : 1008, height : 1754 } to equal { width : 1008, height : 1401 }.

Espero que a dica seja útil para situações semelhantes a esta.

Caso tenha ficado com alguma dúvida, deixe um comentário ou entre em contato através do email talkingabouttesting@gmail.com