Localizadores em Selenium

O que são localizadores em Selenium?

Um localizador é um comando que direciona Selenium IDE ou Selenium O WebDriver interage com o elemento correto da interface gráfica do usuário (GUI), como uma caixa de texto, botão, link ou caixa de seleção, no qual uma ação deve ser executada. Identificar o elemento correto da GUI é um pré-requisito para criar qualquer script de automação confiável. No entanto, a identificação precisa é mais desafiadora do que parece. Às vezes, você pode acabar interagindo com o elemento errado ou com nenhum elemento. Para resolver isso, Selenium Oferece uma variedade de estratégias de localização que permitem o direcionamento preciso de elementos da interface gráfica do usuário.

Embora alguns comandos, como o comando “abrir”, não exijam um localizador, a maioria dos Selenium Os comandos dependem dos localizadores de elementos. A escolha do localizador depende em grande parte da sua Aplicação em Teste (AUT). Neste tutorial, alternaremos entre o Facebook e o Mercury Site de demonstração de tours (newtours.demoaut), com base nos localizadores que cada aplicativo suporta. Da mesma forma, no seu próprio. ensaio projeto, você selecionará um localizador de elementos em Selenium WebDriver baseado na estrutura da sua aplicação.

Localização por ID

Este é o método mais comum para localizar elementos, pois os IDs são projetados para serem únicos para cada elemento em uma página. Sempre que um atributo ID existir, ele deve ser sua primeira opção para scripts de teste rápidos, estáveis ​​e legíveis.

Target Formato: id=id do elemento

Para este exemplo, usaremos uma página de demonstração do Facebook porque Mercury O Tours não utiliza atributos de ID para os campos principais do formulário.

Passo 1) Use esta página de demonstração https://demo.guru99.com/test/facebook.html para testes. Inspecione a caixa de texto “E-mail ou Telefone” usando as Ferramentas de Desenvolvedor integradas do seu navegador (pressione F12 no Chrome, Edge ou Firefox) e anote seu ID. Neste caso, o ID é “email”.

Passo 2) Lançamento Selenium IDE e digite “id=email” no Target caixa. Clique no botão Localizar e observe que a caixa de texto “E-mail ou Telefone” está destacada em amarelo com uma borda verde, indicando que Selenium O IDE localizou o elemento corretamente.

Localizando por nome

Localizar elementos por nome é semelhante a localizá-los por ID, exceto que usamos o “nome=” Em vez disso, use o prefixo. Essa abordagem é útil quando os elementos não possuem um ID, mas têm um atributo de nome definido.

Target Formato: nome=nome do elemento

Para a demonstração a seguir, usaremos Mercury Tours porque todos os elementos de formulário significativos no site possuem um atributo de nome.

Passo 1) Acessar https://demo.guru99.com/test/newtours/ Utilize as Ferramentas de Desenvolvedor do navegador para inspecionar a caixa de texto "Nome de Usuário". Anote o atributo "name" dessa caixa.

Aqui, o nome do elemento é “userName”.

Passo 2) In Selenium IDE, digite “nome=nomedeusuário” no campo Target caixa e clique no botão Localizar. Selenium O IDE deve localizar a caixa de texto Nome de Usuário, destacando-a.

Como localizar o elemento por nome usando filtros

Os filtros são úteis quando vários elementos compartilham o mesmo atributo de nome. Os filtros são atributos adicionais usados ​​para distinguir elementos que compartilham o mesmo nome. Sem filtros, Selenium por padrão, seria utilizado apenas o primeiro elemento correspondente.

Target Formato: nome=nome_do_elemento filtro=valor_do_filtro

Vejamos um exemplo.

Passo 1) Faça logon para Mercury Passeios.

Entre para Mercury Para visitas guiadas que utilizam “tutorial” como nome de usuário e senha, a página do Localizador de Voos deverá aparecer, conforme mostrado abaixo.

Passo 2) Utilize as Ferramentas de Desenvolvedor para inspecionar os atributos VALUE.

Observe que os botões de opção Ida e Volta e Só Ida compartilham o mesmo nome, “tripType”. No entanto, eles possuem atributos VALUE diferentes, portanto, podemos usar cada valor como um filtro.

Passo 3) Clique na primeira linha do editor.

• Primeiro, vamos acessar a opção "Sentido Único". Clique na primeira linha do... Selenium Editor IDE.
• Na caixa de comando, digite o comando “clique”.
• De acordo com o relatório Target Na caixa, digite “name=tripType value=oneway”. A parte “value=oneway” serve como nosso filtro.

Passo 4) Clique no botão Localizar.

Observe que Selenium O IDE destaca o botão de opção "Sentido único" em verde, confirmando que o elemento foi acessado com sucesso por meio de seu atributo VALUE.

Passo 5) Selecione a opção "Sentido único".

Pressione a tecla “X” no seu teclado para executar o comando de clique. O botão de opção “Sentido único” agora está selecionado.

Você pode executar a mesma ação no botão de opção Ida e Volta, desta vez usando “name=tripType value=roundtrip” como seu alvo.

Localização por texto do link

Essa estratégia de localização se aplica somente a textos de hiperlinks. Acessamos o link prefixando o destino com “link=” seguido pelo texto visível do hiperlink. Esse método é altamente legível e funciona bem para testes de navegação.

Target Formato: link=link_texto

No exemplo a seguir, acessaremos o link “REGISTRAR” encontrado no Mercury Página inicial de passeios.

Passo 1)

• Primeiro, certifique-se de que você está desconectado(a) do Mercury Passeios.
• Navegue até a Mercury Página inicial de passeios.

Passo 2)

• Use as Ferramentas de Desenvolvedor para inspecionar o link “REGISTRAR”. O texto do link aparece entre as tags de âncora de abertura e fechamento.
• Neste caso, o texto do link é “REGISTRAR”. Copie o texto do link.

Passo 3) Copie o texto do link e cole-o no Selenium IDE Target caixa. Prefixe com “link=”.

Passo 4) Clique no botão Localizar. Selenium O IDE destacará corretamente o link REGISTER.

Passo 5) Para verificar melhor, digite “clickAndWait” na caixa de comando e execute-o. Selenium O IDE clicará com sucesso no link REGISTRAR e você será redirecionado para a página de registro mostrada abaixo.

Localização por DOM (Modelo de Objeto de Documento)

O Modelo de Objeto de Documento (DOM)Em termos simples, descreve como os elementos HTML são estruturados como uma árvore de nós. Selenium O IDE pode navegar por esta árvore para acessar os elementos da página. Ao usar este método, o Target A caixa sempre começa com “dom=documento…”. O prefixo “dom=” geralmente é omitido porque Selenium O IDE interpreta automaticamente qualquer valor que comece com “document” como um caminho DOM.

Existem quatro maneiras básicas de localizar um elemento através do DOM em Selenium:

• getElementById
• getElementsByName
• dom:name (aplica-se apenas a elementos dentro de um formulário nomeado)
• dom:índice

Localização por DOM – getElementById

Vamos primeiro explorar o método getElementById do DOM em SeleniumEste método retorna um único elemento, correspondendo ao seu atributo ID.

Sintaxe

document.getElementById("id of the element")

• O ID do elemento corresponde ao valor do atributo ID do elemento a ser acessado. Esse valor deve sempre estar entre aspas.

Passo 1) Use esta página de demonstração https://demo.guru99.com/test/facebook.htmlNavegue até ele e use as Ferramentas do Desenvolvedor para inspecionar a caixa de seleção "Manter-me conectado". Anote o ID dela.

O ID que devemos usar é “persist_box”.

Passo 2) Abra Selenium IDE e no Target na caixa insira document.getElementById(“persist_box”), depois clique em Localizar. Selenium O IDE localizará a caixa de seleção "Manter-me conectado". Embora não consiga destacar o interior da caixa de seleção, ele a envolve com uma borda verde brilhante, como mostrado abaixo.

Localização por DOM – getElementsByName

O método `getElementById` acessa apenas um elemento por vez, ou seja, o elemento com o ID especificado. O método `getElementsByName` se comporta de maneira diferente. Ele retorna um array de elementos que compartilham o nome especificado. Os elementos individuais são acessados ​​usando um índice numérico que começa em 0.

	getElementById Retorna apenas um elemento. Esse elemento possui o ID especificado dentro dos parênteses de getElementById().
	getElementsByName Retorna uma coleção de elementos cujos nomes são idênticos. Cada elemento é indexado por um número a partir de 0, como em um array. Você seleciona um elemento específico colocando seu índice dentro dos colchetes na sintaxe abaixo.

Sintaxe

document.getElementsByName("name")[index]

• nome = nome do elemento conforme definido pelo seu atributo 'nome'
• index = um inteiro que indica qual elemento do array getElementsByName será usado.

Passo 1) Navegue até a Mercury Acesse a página inicial de passeios e faça login usando “tutorial” como nome de usuário e senha. O navegador carregará a tela do Localizador de Voos.

Passo 2) Utilize as Ferramentas de Desenvolvedor para inspecionar os três botões de opção na parte inferior da página (Classe Econômica, Classe Executiva e Primeira Classe). Observe que todos compartilham o mesmo nome: “servClass”.

Passo 3) Primeiro, vamos acessar o botão de opção “Classe Econômica”. Dos três botões de opção, este elemento aparece primeiro, portanto seu índice é 0. Selenium IDE, digite document.getElementsByName(“servClass”)[0] e clique no botão Localizar. Selenium O IDE identificará corretamente a opção "Classe Econômica".

Passo 4) Altere o número do índice para 1, para que seu Target torna-se document.getElementsByName(“servClass”)[1]. Clique no botão Localizar e Selenium O IDE destacará o botão de opção “Classe empresarial”, conforme mostrado abaixo.

Localizando por DOM – dom:nome

Como mencionado anteriormente, esse método só se aplica se o elemento que você está acessando estiver contido em um formulário nomeado. O caminho do localizador começa no formulário e, em seguida, navega até o elemento de destino pelo nome.

Sintaxe

document.forms["name of the form"].elements["name of the element"]

• nome do formulário = o valor do atributo nome da tag de formulário que contém o elemento que você deseja acessar.
• nome do elemento = o valor do atributo nome do elemento que você deseja acessar

Passo 1) Acessar Mercury Página inicial dos passeios https://demo.guru99.com/test/newtours/ Utilize as Ferramentas de Desenvolvedor para inspecionar a caixa de texto Nome de Usuário. Observe que ela está contida em um formulário chamado “home”.

Passo 2) In Selenium No IDE, digite document.forms[“home”].elements[“userName”] e clique no botão Localizar. Selenium O IDE acessará o elemento com sucesso.

Localização por DOM – dom:index

Este método se aplica mesmo quando o elemento não está dentro de um formulário nomeado, pois utiliza o índice do formulário em vez do seu nome. Isso é útil para páginas legadas ou formulários gerados automaticamente onde a nomeação não está disponível.

Sintaxe

document.forms[index of the form].elements[index of the element]

• Índice do formulário = o número do índice (começando em 0) do formulário em relação à página inteira.
• índice do elemento = o número do índice (começando em 0) do elemento em relação ao formulário que o contém

Acessaremos a caixa de texto “Telefone” no Mercury Página de inscrição para excursões. O formulário nesta página não possui um atributo de nome nem de ID, sendo, portanto, um bom exemplo.

Passo 1) Navegue até a Mercury Na página de inscrição para excursões, examine a caixa de texto "Telefone". Observe que o formulário ao redor não possui atributos de ID nem de nome.

Passo 2) Insira document.forms[0].elements[3] no Selenium IDE Target caixa e clique no botão Localizar. Selenium O IDE acessará corretamente a caixa de texto Telefone.

Passo 3) Alternativamente, você pode usar o nome do elemento em vez do seu índice para obter o mesmo resultado. Digite document.forms[0].elements[“phone”] no Target A caixa de texto "Telefone" permanecerá selecionada.

Localizando por XPath

XPath é a linguagem de consulta usada para navegar em nós XML (Extensible Markup Language). Como o HTML pode ser considerado uma implementação de XML, XPath Também pode localizar elementos HTML. É uma das estratégias de localização mais poderosas em Selenium.

• Vantagem: Ele pode acessar praticamente qualquer elemento, incluindo aqueles sem atributos de classe, nome ou ID.
• Desvantagem: É a estratégia de localização mais complexa devido às suas inúmeras regras e variações de sintaxe.

As ferramentas de desenvolvedor dos navegadores modernos podem gerar expressões XPath automaticamente. No Chrome, Edge ou FirefoxPara isso, clique com o botão direito do mouse em um elemento no painel Elementos e escolha Copiar > Copiar XPath. No exemplo a seguir, acessaremos uma imagem que não pode ser localizada usando os métodos discutidos anteriormente.

Passo 1) Navegue até a Mercury Acesse a página inicial de visitas guiadas e use as Ferramentas do Desenvolvedor para inspecionar o retângulo laranja à direita da caixa amarela "Links", conforme mostrado abaixo.

Passo 2) Clique com o botão direito do mouse no código HTML do elemento e selecione a opção “Copiar XPath”.

Passo 3) In Selenium IDE, digite uma única barra invertida “/” no Target Na caixa, cole o XPath copiado na etapa anterior. A entrada no Target a caixa agora deve começar com duas barras “//”.

Passo 4) Clique no botão Localizar. Selenium O IDE destacará a caixa laranja, conforme mostrado abaixo.

Por que escolher o localizador certo é importante

Selecionar a estratégia de localização correta é uma das decisões mais influentes em Selenium A automação é crucial porque impacta diretamente a estabilidade do script, a velocidade de execução e o custo de manutenção a longo prazo. Um localizador mal escolhido pode causar testes instáveis, falsos positivos e retrabalho frequente sempre que a interface do usuário do aplicativo for alterada. A ordem de preferência recomendada por engenheiros de automação experientes é: primeiro o ID, depois o Nome, seguido pelo Seletor CSS, Texto do Link e, por último, XPath.

Localizadores baseados em ID são os mais rápidos porque a busca do navegador é otimizada para identificadores únicos. Localizadores baseados em nome são quase tão eficientes quando os nomes são únicos. Seletores CSS e XPath oferecem flexibilidade, mas tendem a ser mais lentos e mais frágeis quando os desenvolvedores refatoram o DOM. O texto do link é excelente para links de navegação, mas oferece reutilização limitada.

A automação estável também depende da colaboração com os desenvolvedores. Quando os testadores solicitam IDs ou atributos de dados consistentes e significativos durante as revisões de código, a durabilidade dos localizadores melhora consideravelmente. Evite depender de IDs gerados automaticamente (como os produzidos por frameworks), pois eles podem mudar entre versões. Ao priorizar localizadores legíveis e orientados à intenção, as equipes podem manter os conjuntos de testes sustentáveis ​​e reduzir a dívida técnica à medida que o aplicativo evolui.

Melhores Práticas para Escrever Localizadores Confiáveis

Localizadores confiáveis ​​são a base para um sistema de fácil manutenção. Selenium Conjunto de testes. As práticas a seguir ajudam a reduzir falhas de script, melhorar a legibilidade e tornar os testes resilientes a alterações na interface do usuário.

1. Prefira IDs únicos: Verifique sempre primeiro se existe um atributo ID. Os IDs são projetados para serem únicos dentro de uma página e são a opção com melhor desempenho.
2. Utilize atributos semânticos Name e data-*: Incentive os desenvolvedores a adicionar atributos de teste estáveis, como `data-testid` ou `data-qa`. Esses atributos permanecem consistentes mesmo quando as classes CSS são alteradas.
3. Evite XPath absoluto: Caminhos absolutos como /html/body/div[2]/div[3]/span quebram facilmente. Use expressões XPath relativas com atributos como //input[@name='userName'].
4. Combine atributos para obter precisão: Quando um único atributo não for exclusivo, combine vários atributos (por exemplo, //button[@type='submit' e @name='login']) para selecionar o elemento correto.
5. Use o texto com sabedoria: Os localizadores que dependem de texto visível podem apresentar problemas em diferentes idiomas. Use localizadores baseados em texto somente quando o conteúdo for estável e monolíngue.
6. Centralizar localizadores: Armazene os localizadores em uma classe do Modelo de Objeto de Página (POM) para que as atualizações possam ser feitas em um único local, em vez de em vários scripts de teste.
7. Validar nas Ferramentas de Desenvolvedor: Antes de adicionar um localizador a um script, teste-o no console do navegador usando $x(“//xpath”) para XPath ou document.querySelector para CSS para confirmar se ele retorna exatamente um elemento.
8. Evite, sempre que possível, localizadores baseados em índices: As posições do índice, como [3], dependem da ordem dos elementos. Mesmo pequenas alterações de layout podem deslocar o índice e quebrar o script.

Ao aplicar essas práticas de forma consistente, os engenheiros de automação criam conjuntos de testes que são escaláveis ​​para diversas equipes e resistem a atualizações frequentes da interface do usuário com manutenção mínima.

Perguntas Frequentes