Conhecendo e melhorando locators para automação web
1. Introdução
Se você trabalha ou pensa em trabalhar com teste de software, saiba que a maioria das vagas pedem por um profissional com conhecimento em automação web, e esses profissionais recebem os maiores salários, de acordo com pesquisa realizada em 2023 pelo consultor Julio de Lima (ver referências).
Independentemente do framework de automação escolhido, todos tem um ponto em comum: precisam de locators para interagir com os elementos da tela. Neste artigo, vamos explorar o tema em alguns tópicos, explicando o que são, como encontrar e como tornar mais produtivo o uso de locators.
2. O que é um locator?
Para os novatos de plantão, um locator (localizador) é o nome que damos para um código que serve como endereço de um elemento na página web.
Através desse locator, conseguimos fazer com que um framework de automação web como Selenium, Cypress, Robot, etc., encontre determinado elemento da página.
Por exemplo: o botão ‘Pesquisa Google’:
Para fazer com que o framework de automação consiga encontrar e interagir com o botão, precisamos passar o endereço do mesmo.
É aí que entra um dos nosso colegas de trabalho, o developer tools (DevTools para os íntimos), que pode ser aberto com o botão direito do mouse + opção ‘Inspecionar’, apertando F12 ou Ctrl + Shift + C (funcional em todos os navegadores modernos. Capturas do artigo — Google Chrome).
Com o developer tools aberto, podemos ler o que está por trás dos panos. Temos acesso ao HTML — HyperText Markup Language (Linguagem de Marcação de HiperTexto) da página.
É aí que vamos encontrar o endereço do botão ‘Pesquisa Google’.
<input class="gNO89b" value="Pesquisa Google" aria-label="Pesquisa Google" name="btnK" role="button" tabindex="0" type="submit" data-ved="0ahUKEwjLxrftkvv-AhUOr5UCHbTLC-UQ4dUDCA4">3. Encontrando um elemento
Com o Developer Tools aberto, precisamos agora inspecionar o elemento desejado. Existem algumas formas de se inspecionar um elemento:
- Posicione o cursor do mouse sobre o elemento visual da página desejado, clique com o botão direito do mouse e selecione a opção ‘Inspecionar’.
- Pressione Ctrl + Shift + C e clique no elemento.
- Com o DevTools aberto, clique no icone de seta no topo do DevTools e clique no elemento.
Elemento inspecionado, veremos algo assim:
<input class="gNO89b" value="Pesquisa Google" aria-label="Pesquisa Google" name="btnK" role="button" tabindex="0" type="submit" data-ved="0ahUKEwjLxrftkvv-AhUOr5UCHbTLC-UQ4dUDCA4">O endereço acima (inspecionado e copiado do DevTools) nos mostra que o botão ‘Pesquisa Google’ é um elemento do tipo <input>. Esse tipo de elemento é utilizado quando queremos criar controles interativos como botões, checkboxes, campos de texto, etc. Para mais informações, acesse a documentação sobre HTML Elements.
Vemos também diferentes atributos: class value aria-label name role tabindex type e data-ved.
Atributos são valores adicionais que servem de configuração, ajustes de comportamento, auxilio informativo, etc. Para mais informações, acesse a documentação sobre HTML Attributes.
4. Escrevendo locators resilientes
Com base neste elemento e atributos, podemos criar nosso locator. Existem dois padrões de escrita para locators, os chamados seletores CSS e as expressões XPath. Em minha experiência de trabalho, os profissionais preferem escrever no padrão seletores CSS e, para alguns elementos exepcionais, localizá-los via expressões XPath.
Com base no botão ‘Pesquisa Google’, podemos criar os seguintes locators:
XPath expression:
//input[@name="btnK"]
//buscará no HTML todo.
inputé o tipo do elemento.
[@name=”btnK”]o atributo é declarado pelo@seguido do tipo de atributonamee cujo valor é”btnK”.
CSS selector:
input[name="btnK"]
inputé o tipo do elemento.
[name="btnK"]o atributo é do tiponamee cujo valor é"btnK".
Temos o nosso locator, agora devemos testá-lo. Com o DevTools aberto, pressione Ctrl + F e deverá ver uma barra de busca:
Escreva o seletor nessa barra de busca e veja se elementos são encontrados:
Localizamos 2 elementos. Temos um problema: como o framework de automação vai saber com qual dos 2 elementos ele deve interagir? Isso causará um erro.
Portanto, precisamos incrementar um pouco mais nosso locator ou reescrevê-lo completamente para que apenas 1 elemento seja encontrado na página.
Podemos passar como complemento de “endereço” outro elemento que também esteja ligado ao botão ‘Pesquisa Google’.
Como o elemento <div class> logo acima
XPath expression:
//div[@class="FPdoLc lJ9FBc"]//input[@name="btnK"]
//buscará no HTML todo.
divé o tipo do elemento.
[@class="FPdoLc lJ9FBc"]o atributo é declarado pelo@seguido do tipo de atributoclasse cujo valor é"FPdoLc lJ9FBc".
Dessa forma, estamos passando um endereço mais completo, mais exclusivo, algo como dizer “Na Rua class="FPdoLc lJ9FBc" deve existir uma casa name="btnK"”
CSS Selector:
.FPdoLc input[name="btnK"]
.é um caractere especial para seletores CSS que busca por atributos do tipoclass.
FPdoLcé o texto esperado dentro dessa classe.
Com nosso novo XPath ou seletor CSS, encontraremos apenas 1 elemento na página. O elemento ficará em destaque na tela e seu código ficará destacado em verde no DevTools.
Dicas para locators resilientes:
1. Dê preferência para atributos do tipo id, eles são únicos em toda a página:
2. Na falta de id dê preferência para os atributos nesta ordem: name > class > link text> outros. Pois são atributos com menores chances de mudança.
3. Ao criar locators de link text, utilize contains para não precisar escrever o link todo no locator. Algo como:
XPath:
//a[contains(@href, "account")]
CSS Selector:
[href*="account"]
3.1 A dica do contains em links serve também para outros atributos de texto longo ou dinâmicos
XPath:
//a[contains(@aria-label,'Gmail')]
CSS Selector:
[aria-label*='Gmail']
4. Busque criar locators curtos, que não dependam explicitamente de muitos níveis na árvore HTML. Neste ponto, CSS selectors acabam sendo mais dinâmicos e curtos.
5. Turbine sua produtividade com extensões
Agora que você já sabe escrever locators “na mão”, pode se beneficiar de extensões que aumentem a sua velocidade no reconhecimento e escrita de locators.
Uma que tenho utilizado e gostado é a extensão TruePath (disponível no Google Chrome e Firefox).
Após instalada, a extensão aparecerá em uma das abas do seu DevTools:
Inspecionando o botão ‘Pesquisa Google’, o TruePath nos mostra o absolute XPath do elemento:
Destaca os atributos interessantes de se usar num locator desse elemento:
E nos dá sugestões de locators e de cópia da sugestão (Copy Normal Format e Copy POM Format):
Buscando por um elemento da página que contenhaid, temos as seguintes sugestões:
🟩 A mão verde traz sugestões de locators sem id, href ou src.
🟨 A mão amarela traz sugestões de locators que contenham id, href ou src.
🟥 A mão vermelha traz sugestões de locators que contenham index[].
As cores não significam que os locators em determinada cor sejam melhores ou piores, são apenas a forma que o criador da extensão decidiu organizar as listas de sugestões.
Para expandir a lista de sugestões, basta clicar na seta próxima aos botões de copiar:
Também é possível realizar buscas de XPath pelo próprio TruePath, digitando ou selecionando um XPath da lista de sugestões e pressionando Enter:
A extensão possui também a funcionalidade de criação de lista de locators para exportação:
E análise de locators em arquivos:
No entanto, não percebi benefícios reais em utilizá-las e também não possuem documentação ou suporte adequados. Portanto, a funcionalidade integrada ao DevTools acaba sendo o melhor uso da extensão.
Por mais que algumas sugestões não sejam o locator final a ser utilizado na sua automação, é interessante pegar uma dessas sugestões e refiná-la.
6. Conclusão
Espero ter acrescentado um ou alguns tijolinhos em sua construção de conhecimento sobre qualidade e teste de software. Recomendo a leitura das documentações abaixo e a prática da criação de locators. Com o tempo, eles vão fazendo mais sentido e será cada vez mais natural a identificação e criação de locators para você.
Se gostou, clica no (//*[@aria-label=”clap”])[1] ️👏
Referências:
Pesquisa Média Salarial de Testadores de Software: https://youtu.be/iJQ83o9PXLg
