Manipulação de listas com Protractor

Você, como profissional de QA, já deve ter trabalhado com listas. Certo? Um exemplo clássico desse tipo de trabalho é uma tela de listagem de resultados que precisam ser validados, validação essa que é bastante trabalhosa. Uma das vantagens do Protractor (se você não sabe do que eu estou falando, clique aqui) são seus métodos de manipulação de listas do JavaScript, que facilitam muito quando temos esse tipo de cenário.

Vamos ver um exemplo? Veja a listagem abaixo:

Com a listagem em mãos, já podemos começar a trabalhar com esses dados. Para isso, vamos ver os principais métodos para manipulação de listas dos Protractor:

Filter

Bem, como o próprio nome sugere, com esse método é possível filtrarmos um resultado. Para utilizá-lo é bem simples, veja um exemplo:

O filter recebe dois parâmetros: o elemento (que nesse nosso exemplo serão as linhas da listagem, ou seja, as TRs da tabela) e o índice. Nesse exemplo ainda tem um detalhe interessante, um encadeamento de elementos, ou seja, fazemos uma “pesquisa” dentro de outro elemento.

A partir do elemento que recebemos como parâmetro (a TR) realizamos uma nova “pesquisa” para encontrarmos um elemento que tenha a diretiva ng-bind (que aprendemos como manipular neste post aqui). Em seguida, pegamos o valor deste elemento e comparamos com um resultado que esperamos. No fim, dentro do elemento encontrado, realizamos a ação de click.

Obs: Para deixar mais claro, deixei propositalmente um console.log do elemento que recebemos como parâmetro para entender o que está acontecendo. Nesse caso, o resultado desse log será o seguinte:

#1 Bulbasaur grama veneno

#6 Charizard fogo voador

#38 Ninetales fogo

#150 Mewtwo psiquico

#151 Mew psiquico

Get

O get é um método bem tranquilo de entender e provavelmente você já deve utilizá-lo. O get retorna um elemento pelo índice passado como parâmetro. Por exemplo:

Aqui estamos acessando o elemento na posição de número 4 da nossa listagem e em seguida utilizamos a técnica de encadeamento de elementos para encontrarmos o texto do nome do pokémon.

O resultado será Mewtwo

First

Similar ao get, mas retorna o primeiro item da lista.

O resultado será Bulbasaur

Last

Retorna o último item da lista.

O resultado será Mew

EACH

Esse método é utilizado quando queremos iterar em uma lista:

0 ‘Bulbasaur’

1 ‘Charizard’

2 ‘Ninetales’

3 ‘Mewtwo’

4 ‘Mew’

MAP

Com esse método podemos montar um objeto chave-valor, assim:

E poderíamos validar esse resultado no nosso teste dessa forma:

REDUCE

O reduce é utilizado quando queremos obter um valor acumulado ou fazer algum tipo de operação com todos os elementos, como concatenar os valores da lista. No exemplo, o reduce recebe como parâmetro uma função de callback com o valor acumulado e o elemento (que no nosso caso é a TR):

O resultado do console.log será o seguinte:

acc: Todos Pokemons: txt: Bulbasaur

acc: Todos Pokemons: , Bulbasaur txt: Charizard

acc: Todos Pokemons: , Bulbasaur, Charizard txt: Ninetales

acc: Todos Pokemons: , Bulbasaur, Charizard, Ninetales txt: Mewtwo

acc: Todos Pokemons: , Bulbasaur, Charizard, Ninetales, Mewtwo txt: Mew

O Protractor oferece muitas opções para manipular listas, como pudemos observar. Com ele, é possível economizar muito trabalho! Saber em que situação utilizar cada um desses métodos é muito importante e ajuda muito o dia-a-dia. Portanto, entenda bem quando e como podemos utilizá-lo, isso deve te poupar algumas dores de cabeça.

Até a próxima. 😉

—