Vamos brincar com localizadores para testes automatizados de IU?

Adriano Wilbert
CWI Software
Published in
4 min readSep 14, 2020
Fonte: https://flike.com.br

Antes de começar a brincadeira, recomendo o artigo do Reinaldo Mateus Rossetti Junior, que apresenta uma lista dos 10 melhores sites para praticar a automação de testes. O artigo se encontra no link:

Dito isso, vamos iniciar.

Para o nosso entretenimento, selecionei o site de Treinamento Avançado, só por ser considerado o mais difícil pela comunidade. Link abaixo:

Acessando o site, vamos de imediato clicando no F12 e indo na aba “Elements”, porque é aqui que se encontra toda a diversão.

Neste ponto, já podemos pensar em procurar os “ID’s”, que, como sendo de valores únicos para cada elemento, são as melhores referências para localizadores, entretanto, se a página não for em Javascript puro ou JQuery, provavelmente eles não vão estar lá. Dificilmente um programador vai inserir esses valores quando usa React.js, Angular ou Vue.js, visto que, como o DEV não testa, os ID’s não são normalmente do seu uso.

Steps:

Inspecionando o campo de “Primeiro nome”, vemos que é um valor de input e que não existe um ID para ele.

Então, chegou a hora de identificar quais propriedades existem no nosso elemento, e tentar encontrar qual valor trará mais assertividade na hora da execução dos testes.

<input type=”text” placeholder=”Primeiro nome” class=”form-control ng-pristine ng-invalid ng-invalid-required ng-touched” ng-model=”FirstName” required=””>

Note que o nosso “type” é um tanto genérico, provavelmente algum outro campo de preenchimento terá “text” como nome. Já o nosso “placeholder” é mais amigável, visto que o seu valor é explícito para um campo apenas.

Para validar isso, precisamos clicar no atalho CTRL + F, o que nos apresentará um campo de busca.

Veja que é possível pesquisar por String, CSS ou XPath. Para o exemplo acima, iremos utilizar o CSS Selector. Para isso, devemos passar inicialmente o tipo do elemento, que como vimos antes é um “input”.

Então, vamos iniciar a nossa pesquisa por input. Em seguida, inserimos colchetes e, dentro dos colchetes, a propriedade que queremos.

Para esta pesquisa ficou assim: input[type=”text”]

Logo, essa busca identificou o nosso elemento, entretanto, ele não é um elemento único, o que indica que esta estratégia não é boa. Vamos testar com o “placeholder” e validar se ele é único e poderia ser usado.

Para esta pesquisa, ficou assim: input[placeholder=’Primeiro nome’], lembrando que, por conta da propriedade buscada conter espaços, ela deve ser colocada dentro de uma String, necessitando que esteja entre aspas simples.

Note que foi encontrado somente uma referência, o que demonstra que seria um ótimo valor de localizador.

Além disso, é possível utilizar expressões regulares para encontrar algum elemento que possa ser aplicado. Vejamos:

Para realizar uma busca afirmando que o elemento “contém” o valor, é necessário inserir um asterisco antes do igual, ficando deste modo: input[placeholder*=’Primeiro’]

Já para realizar uma busca afirmando que o valor “termina com”, é necessário inserir o dólar antes do igual, ficando deste modo: input[placeholder$=’nome’]

Perceba que foram encontrados dois valores de placeholder que terminam com “nome”, o que, mais uma vez, nos alerta para que esta não seja uma boa estratégia.

Por fim, para realizar uma busca afirmando que o valor “começa com”, é necessário inserir o caractere especial acento circunflexo antes do igual, ficando deste modo: input[placeholder^=’digite’]

Para este caso, foi encontrado somente uma referência, mas quando utilizar as expressões regulares, é necessário tomar muito cuidado com as ambiguidades. A probabilidade de campos possuírem valores iguais é grande.

Agora, olha que legal essa busca por um valor que parece não poder ser utilizado. Ao tentar capturar o campo de endereço, inspecionando o elemento, não existe valor de ID, name, type ou placeholder, mas ao realizar a busca utilizando valores conhecidos do elemento, é possível encontrá-lo e utilizar como localizador, ficando deste modo: textarea[ng-model=’Adress’]

Espero ter ajudado nessa incessante luta por localizadores assertivos para os seus testes de software. Qualquer dúvida, crítica ou sugestão, por favor entre em contato. Muito obrigado pela leitura.

--

--