Localizadores no Selenium IDE: Seletor CSS - DOM - XPath - EU IA

Índice:

Anonim

O que são localizadores?

Locator é um comando que informa ao Selenium IDE em quais elementos GUI (por exemplo, Caixa de texto, botões, caixas de seleção, etc.) ele precisa operar. A identificação dos elementos corretos da GUI é um pré-requisito para a criação de um script de automação. Mas a identificação precisa dos elementos da GUI é mais difícil do que parece. Às vezes, você acaba trabalhando com elementos incorretos da GUI ou nenhum elemento! Portanto, o Selenium fornece uma série de localizadores para localizar com precisão um elemento GUI

Os diferentes tipos de localizador CSS no Selenium IDE

Existem comandos que não precisam de um localizador (como o comando "abrir"). No entanto, a maioria deles precisa de localizadores de elemento no webdriver Selenium.

A escolha do localizador depende muito do seu aplicativo em teste . Neste tutorial, alternaremos entre o Facebook, novo tours.demoaut com base nos localizadores que esses aplicativos suportam. Da mesma forma, em seu projeto de teste, você selecionará qualquer um dos localizadores de elementos listados acima no webdriver Selenium, com base no suporte de seu aplicativo.

Localização por ID

Essa é a maneira mais comum de localizar elementos, pois os IDs devem ser exclusivos para cada elemento.

Formato de destino: id = id do elemento

Para este exemplo, usaremos o Facebook como nosso aplicativo de teste porque o Mercury Tours não usa atributos de ID.

Etapa 1. Desde que este tutorial foi criado, o Facebook mudou seu design de página de login. Use esta página de demonstração http://demo.guru99.com/test/facebook.html para teste. Inspecione a caixa de texto "E-mail ou telefone" usando o Firebug e anote seu ID. Nesse caso, o ID é "e-mail".

Etapa 2. Inicie o Selenium IDE e digite "id = email" na caixa Destino. Clique no botão Localizar e observe que a caixa de texto "E-mail ou telefone" fica destacada em amarelo e delimitada por verde, o que significa que o Selenium IDE foi capaz de localizar esse elemento corretamente.

Localização por nome

A localização de elementos por nome é muito semelhante à localização por ID, exceto que usamos o prefixo "name =" .

Formato de destino: nome = nome do elemento

Na demonstração a seguir, usaremos agora Mercury Tours porque todos os elementos significativos têm nomes.

Etapa 1. Navegue para http://demo.guru99.com/test/newtours/ e use o Firebug para inspecionar a caixa de texto "Nome do usuário". Observe seu atributo de nome.

Aqui, vemos que o nome do elemento é "userName".

Etapa 2. No Selenium IDE, digite "name = userName" na caixa Destino e clique no botão Localizar. O Selenium IDE deve ser capaz de localizar a caixa de texto Nome do usuário realçando-a.

Localização por nome usando filtros

Os filtros podem ser usados ​​quando vários elementos têm o mesmo nome. Filtros são atributos adicionais usados ​​para distinguir elementos com o mesmo nome.

Formato de destino : name = name_of_the_element filter = value_of_filter

Vamos ver um exemplo -

Etapa 1 . Faça logon no Mercury Tours usando "tutorial" como nome de usuário e senha. Ele deve levá-lo à página Flight Finder mostrada abaixo.

Etapa 2. Usando o Firebug, observe que os botões de opção Round Trip e One Way têm o mesmo nome "tripType". No entanto, eles têm atributos VALUE diferentes, então podemos usar cada um deles como nosso filtro.

Etapa 3.

  • Iremos acessar o botão de opção One Way primeiro. Clique na primeira linha do Editor.
  • Na caixa Comando do Selenium IDE, insira o comando "clique".
  • Na caixa Destino, digite "name = tripType value = oneway". A parte "value = oneway" é o nosso filtro.

Etapa 4 . Clique no botão Localizar e observe que o Selenium IDE pode destacar o botão de opção One Way com verde - o que significa que podemos acessar o elemento com sucesso usando seu atributo VALUE.

Etapa 5. Pressione a tecla "X" no teclado para executar este comando de clique. Observe que o botão de opção One Way foi selecionado.

Você pode fazer exatamente a mesma coisa com o botão de opção Round Trip, desta vez, usando "name = tripType value = roundtrip" como seu destino.

Localização por texto de link

Este tipo de localizador CSS no Selenium se aplica apenas a textos de hiperlinks. Acessamos o link prefixando nosso destino com "link =" e, em seguida, seguido pelo texto do hiperlink.

Formato de destino : link = link_text

Neste exemplo, acessaremos o link "CADASTRE-SE" encontrado na página inicial da Mercury Tours.

Passo 1.

  • Primeiro, certifique-se de que você está desconectado da Mercury Tours.
  • Vá para a página inicial da Mercury Tours.

Etapa 2 .

  • Usando o Firebug, inspecione o link "REGISTAR". O texto do link é encontrado entre as tags e.
  • Neste caso, o texto do nosso link é "CADASTRE-SE". Copie o texto do link.

Etapa 3 . Copie o texto do link no Firebug e cole-o na caixa Destino do Selenium IDE. Coloque o prefixo "link =".

Etapa 4. Clique no botão Find e observe que o Selenium IDE foi capaz de destacar o link REGISTER corretamente.

Etapa 5. Para verificar mais detalhes, digite "clickAndWait" na caixa Comando e execute-o. O Selenium IDE deve ser capaz de clicar no link REGISTAR com sucesso e levá-lo à página de registro mostrada abaixo.

Localização por seletor CSS

Os seletores CSS no Selenium são padrões de string usados ​​para identificar um elemento com base em uma combinação de tag HTML, id, classe e atributos. Localizar por seletores CSS no Selenium é mais complicado do que os métodos anteriores, mas é a estratégia de localização mais comum de usuários avançados do Selenium porque pode acessar até mesmo aqueles elementos que não têm ID ou nome.

Os seletores CSS no Selenium têm muitos formatos, mas vamos nos concentrar apenas nos mais comuns.

  • Tag e ID
  • Tag e classe
  • Tag e atributo
  • Tag, classe e atributo
  • Texto interno

Ao usar essa estratégia, sempre prefixamos a caixa de destino com "css =", como será mostrado nos exemplos a seguir.

Localização por seletor CSS - Tag e ID

Novamente, usaremos a caixa de texto Email do Facebook neste exemplo. Como você deve se lembrar, ele possui um ID de "email", e já o acessamos na seção "Localizando por ID". Desta vez, usaremos um Selenium CSS Selector com ID para acessar esse mesmo elemento.

Sintaxe

Descrição

css = tag # id
  • tag = a tag HTML do elemento que está sendo acessado
  • # = o sinal de hash. Isso deve estar sempre presente ao usar um seletor Selenium CSS com ID
  • id = o ID do elemento que está sendo acessado

Lembre-se de que o ID é sempre precedido por uma cerquilha (#).

Etapa 1. Navegue até www.facebook.com. Usando o Firebug, examine a caixa de texto "E-mail ou telefone".

Neste ponto, observe que a tag HTML é "entrada" e seu ID é "email". Portanto, nossa sintaxe será "css = input # email".

Etapa 2. Digite "css = input # email" na caixa Destino do Selenium IDE e clique no botão Localizar. O Selenium IDE deve ser capaz de destacar esse elemento.

Localização por seletor CSS - tag e classe

Localizar pelo seletor CSS no Selenium usando uma tag HTML e um nome de classe é semelhante a usar uma tag e ID, mas neste caso, um ponto (.) É usado em vez de um sinal de hash.

Sintaxe

Descrição

css = tag. aula
  • tag = a tag HTML do elemento que está sendo acessado
  • . = o sinal de ponto. Isso deve estar sempre presente ao usar um Seletor CSS com classe
  • class = a classe do elemento que está sendo acessado

Etapa 1. Vá para a página de demonstração http://demo.guru99.com/test/facebook.html e use o Firebug para inspecionar a caixa de texto "E-mail ou telefone". Observe que sua tag HTML é "input" e sua classe é "inputtext."

Etapa 2. No Selenium IDE, digite "css = input.inputtext" na caixa Destino e clique em Localizar. O Selenium IDE deve ser capaz de reconhecer a caixa de texto Email ou Telefone.

Observe que quando vários elementos têm a mesma tag HTML e nome, apenas o primeiro elemento no código-fonte será reconhecido . Usando o Firebug, inspecione a caixa de texto Senha no Facebook e observe que ela tem o mesmo nome da caixa de texto E-mail ou Telefone.

O motivo pelo qual apenas a caixa de texto E-mail ou Telefone foi destacada na ilustração anterior é que ela vem primeiro na fonte da página do Facebook.

Localização por Seletor CSS - Tag e Atributo

Essa estratégia usa a tag HTML e um atributo específico do elemento a ser acessado.

Sintaxe

Descrição

css = tag [attribute = value]
  • tag = a tag HTML do elemento que está sendo acessado
  • [e] = colchetes dentro dos quais um atributo específico e seu valor correspondente serão colocados
  • attribute = o atributo a ser usado. É aconselhável usar um atributo exclusivo do elemento, como um nome ou ID.
  • valor = o valor correspondente do atributo escolhido.

Etapa 1. Navegue até a página de registro da Mercury Tours (http://demo.guru99.com/test/newtours/register.php) e inspecione a caixa de texto "Sobrenome". Anote sua tag HTML ("input" neste caso) e seu nome ("lastName").

Etapa 2. No Selenium IDE, digite "css = input [name = lastName]" na caixa Destino e clique em Localizar. O Selenium IDE deve ser capaz de acessar a caixa Sobrenome com sucesso.

Quando vários elementos têm a mesma tag e atributo HTML, apenas o primeiro será reconhecido . Esse comportamento é semelhante à localização de elementos usando seletores CSS com a mesma tag e classe.

Localização por seletor CSS - tag, classe e atributo

Sintaxe Descrição
css = tag.class [attribute = value]
  • tag = a tag HTML do elemento que está sendo acessado
  • . = o sinal de ponto. Isso deve estar sempre presente ao usar um Seletor CSS com classe
  • class = a classe do elemento que está sendo acessado
  • [e] = colchetes dentro dos quais um atributo específico e seu valor correspondente serão colocados
  • attribute = o atributo a ser usado. É aconselhável usar um atributo exclusivo do elemento, como um nome ou ID.
  • valor = o valor correspondente do atributo escolhido.

Etapa 1. Vá para a página de demonstração http://demo.guru99.com/test/facebook.html e use o Firebug para inspecionar as caixas de entrada 'E-mail ou telefone' e 'Senha'. Anote sua tag, classe e atributos HTML. Para este exemplo, selecionaremos seus atributos 'tabindex'.

Etapa 2. Iremos acessar a caixa de texto 'E-mail ou telefone' primeiro. Portanto, usaremos um valor tabindex de 1. Digite "css = input.inputtext [tabindex = 1]" na caixa Destino do IDE do Selenium e clique em Localizar. A caixa de entrada 'E-mail ou telefone' deve ser destacada.

Etapa 3. Para acessar a caixa de entrada Senha, basta substituir o valor do atributo tabindex. Digite "css = input.inputtext [tabindex = 2]" na caixa Destino e clique no botão Localizar. O Selenium IDE deve ser capaz de identificar a caixa de texto Senha com sucesso.

Localização por seletor CSS - texto interno

Como você deve ter notado, os rótulos HTML raramente recebem id, nome ou atributos de classe. Então, como podemos acessá-los? A resposta é através do uso de seus textos internos. Os textos internos são os padrões de string reais que o rótulo HTML mostra na página.

Sintaxe

Descrição

css = tag: contém ("texto interno")
  • tag = a tag HTML do elemento que está sendo acessado
  • texto interno = o texto interno do elemento

Etapa 1. Navegue até a página inicial da Mercury Tours (http://demo.guru99.com/test/newtours/) e use o Firebug para investigar o rótulo "Senha". Observe sua tag HTML (que é "fonte" neste caso) e observe que ela não possui atributos de classe, id ou nome.

Etapa 2. Digite css = font: contains ("Password:") na caixa Target do Selenium IDE e clique em Find. O Selenium IDE deve ser capaz de acessar o rótulo da senha, conforme mostrado na imagem abaixo.

Etapa 3. Desta vez, substitua o texto interno por "Boston" para que seu destino agora se torne "css = font: contains (" Boston ")". Clique em Encontrar. Você deve notar que o rótulo "Boston to San Francisco" fica destacado. Isso mostra que o Selenium IDE pode acessar um rótulo longo, mesmo se você apenas indicou a primeira palavra de seu texto interno.

Localização por DOM (Document Object Model)

O Document Object Model (DOM), em termos simples, é a maneira pela qual os elementos HTML são estruturados. Selenium IDE é capaz de usar o DOM para acessar os elementos da página. Se usarmos este método, nossa caixa de destino sempre começará com "dom = document…"; entretanto, o prefixo "dom =" normalmente é removido porque o Selenium IDE é capaz de interpretar automaticamente qualquer coisa que comece com a palavra-chave "documento" como um caminho dentro do DOM no Selenium de qualquer maneira.

Existem quatro maneiras básicas de localizar um elemento por meio do DOM no Selenium:

  • getElementById
  • getElementsByName
  • dom: nome (aplica-se apenas a elementos em um formulário nomeado)
  • dom: index

Localizando por DOM - getElementById

Vamos nos concentrar no primeiro método - usando o método getElementById do DOM no Selenium. A sintaxe seria:

Sintaxe

Descrição

document.getElementById ("id do elemento")

id do elemento = este é o valor do atributo ID do elemento a ser acessado. Este valor deve sempre ser colocado entre parênteses ("").

Etapa 1. Use esta página de demonstração http://demo.guru99.com/test/facebook.html Navegue até ela e use o Firebug para inspecionar a caixa de seleção "Mantenha-me conectado". Anote seu ID.

Podemos ver que o ID que devemos usar é "persist_box".

Etapa 2. Abra o Selenium IDE e na caixa Destino, insira "document.getElementById (" persist_box ")" e clique em Localizar. O Selenium IDE deve ser capaz de localizar a caixa de seleção "Mantenha-me conectado". Embora não possa destacar o interior da caixa de seleção, o Selenium IDE ainda pode circundar o elemento com uma borda verde brilhante, conforme mostrado abaixo.

Localizando por DOM - getElementsByName

O método getElementById pode acessar apenas um elemento por vez, e esse é o elemento com o ID que você especificou. O método getElementsByName é diferente. Ele coleta uma matriz de elementos que possuem o nome que você especificou. Você acessa os elementos individuais usando um índice que começa em 0.

getElementById

  • Receberá apenas um elemento para você.
  • Esse elemento possui o ID que você especificou entre os parênteses de getElementById ().

getElementsByName

  • Ele obterá uma coleção de elementos cujos nomes são todos iguais.
  • Cada elemento é indexado com um número começando em 0, assim como uma matriz
  • Você especifica qual elemento deseja acessar colocando seu número de índice entre colchetes na sintaxe de getElementsByName abaixo.

Sintaxe

Descrição

document.getElementsByName ("nome") [índice]
  • nome = nome do elemento conforme definido por seu atributo 'nome'
  • index = um inteiro que indica qual elemento da matriz getElementsByName será usado.

Etapa 1. Navegue até a página inicial da Mercury Tours e faça o login usando "tutorial" como nome de usuário e senha. O Firefox deve levá-lo para a tela Flight Finder.

Etapa 2. Usando o Firebug, inspecione os três botões de opção na parte inferior da página (botões de opção de classe econômica, classe executiva e primeira classe). Observe que todos eles têm o mesmo nome, que é "servClass".

Etapa 3. Primeiro, vamos acessar o botão de opção "Classe econômica". De todos esses três botões de opção, esse elemento vem primeiro, portanto, tem um índice de 0. No Selenium IDE, digite "document.getElementsByName (" servClass ") [0]" e clique no botão Localizar. O Selenium IDE deve ser capaz de identificar o botão de opção da classe econômica corretamente.

Etapa 4. Altere o número do índice para 1 para que seu destino agora se torne document.getElementsByName ("servClass") [1]. Clique no botão Localizar e o Selenium IDE deve ser capaz de destacar o botão de opção "Classe de negócios", conforme mostrado abaixo.

Localizando por DOM - dom: nome

Conforme mencionado anteriormente, esse método só se aplicará se o elemento que você está acessando estiver contido em um formulário nomeado.

Sintaxe

Descrição

document.forms ["nome do formulário"] .elements ["nome do elemento"]
  • nome do formulário = o valor do atributo name da tag do formulário que contém o elemento que você deseja acessar
  • nome do elemento = o valor do atributo name do elemento que você deseja acessar

Etapa 1. Navegue até a página inicial da Mercury Tours (http://demo.guru99.com/test/newtours/) e use o Firebug para inspecionar a caixa de texto Nome do usuário. Observe que ele está contido em um formulário denominado "casa".

Etapa 2. No Selenium IDE, digite "document.forms [" home "]. Elements [" userName "]" e clique no botão Localizar. O Selenium IDE deve ser capaz de acessar o elemento com sucesso.

Localizando por DOM - dom: index

Este método se aplica mesmo quando o elemento não está dentro de um formulário nomeado porque ele usa o índice do formulário e não seu nome.

Sintaxe

Descrição

document.forms [índice do formulário] .elements [índice do elemento]
  • í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 a todo o formulário que o contém

Devemos acessar a caixa de texto "Telefone" na página de registro da Mercury Tours. O formulário nessa página não tem atributo de nome e ID, então este será um bom exemplo.

Etapa 1. Navegue até a página de registro da Mercury Tours e inspecione a caixa de texto Telefone. Observe que o formulário que o contém não possui atributos de ID e nome.

Etapa 2. Insira "document.forms [0] .elements [3]" na caixa Destino do Selenium IDE e clique no botão Localizar. O Selenium IDE deve ser capaz de acessar a caixa de texto Telefone corretamente.

Etapa 3. Como alternativa, você pode usar o nome do elemento em vez de seu índice e obter o mesmo resultado. Digite "document.forms [0] .elements [" phone "]" na caixa de destino do Selenium IDE. A caixa de texto Telefone ainda deve ficar realçada.

Localizando por XPath

XPath é a linguagem usada ao localizar nós XML (Extensible Markup Language). Como o HTML pode ser considerado uma implementação de XML, também podemos usar XPath para localizar elementos HTML.

Vantagem: pode acessar quase qualquer elemento, mesmo aqueles sem atributos de classe, nome ou id.

Desvantagem: é o método mais complicado de identificar elementos devido a muitas regras e considerações diferentes.

Felizmente, o Firebug pode gerar localizadores XPath Selenium automaticamente. No exemplo a seguir, acessaremos uma imagem que não pode ser acessada por meio dos métodos que discutimos anteriormente.

Etapa 1. Navegue até a página inicial do Mercury Tours e use o Firebug para inspecionar o retângulo laranja à direita da caixa amarela "Links". Consulte a imagem abaixo.

Etapa 2 . Clique com o botão direito do mouse no código HTML do elemento e selecione a opção "Copiar XPath".

Etapa 3. No Selenium IDE, digite uma barra "/" na caixa Destino e cole o XPath que copiamos na etapa anterior. A entrada em sua caixa de destino agora deve começar com duas barras "//".

Etapa 4 . Clique no botão Encontrar. O Selenium IDE deve ser capaz de destacar a caixa laranja conforme mostrado abaixo.

Resumo

Sintaxe para uso do localizador

Método

Sintaxe de destino

Exemplo
Por ID id = id_of_the_element id = email
Por nome name = name_of_the_element name = userName
Por nome usando filtros name = name_of_the_element filter = value_of_filter name = tripType value = oneway
Por Texto de Link link = link_text link = CADASTRE-SE
Tag e ID css = tag # id css = input # email
Tag e classe css = tag. aula css = input.inputtext
Tag e atributo css = tag [attribute = value] css = input [name = lastName]
Tag, classe e atributo css = tag. classe [atributo = valor] css = input.inputtext [tabindex = 1]