Ultimate XPath Writing Cheat Sheet Tutorial com sintaxe e exemplos

ultimate xpath writing cheat sheet tutorial with syntax

20 maneiras principais de escrever XPATH definitivo para QUALQUER tipo de elemento da Web (XPATH nunca será inválido):

Um aplicativo da web é composto de diferentes tipos de elementos da web, como elemento da web para um botão clicar, elemento da web de entrada para digitar texto, lista suspensa, botões de rádio, etc.

Esses elementos da web também são chamados de tags ou nós.

Quando se trata de automatizar aplicativos da web, começa escrevendo um script de automação que encontrará o elemento da web, realizar uma ação nele, como clicar em um botão, inserir texto na caixa de entrada, selecionar uma caixa de seleção, selecionar um botão de rádio, role para cima ou para baixo e, finalmente, verifique o comportamento esperado durante a ação.

O que você aprenderá:

• O que é XPath e como ele se parece?
• 20 maneiras principais de escrever XPath para qualquer elemento da Web
  • # 1) Pesquisa reversa
  • # 2) Uso de variáveis ​​e valores personalizados
  • # 3) Usando tags “XML”, “AND” etc
  • # 4) Usando atributos e tabela XPATH
  • # 5) Usando atributos, tabelas e texto
  • # 6) Gerando XPATH usando atributos aninhados
  • # 7) Geração XPath combinando atributos, Divs e botão
  • # 8) Gerando XPATH usando CONTAINS, REVERSE LOOKUP, etc.
  • # 9) Geração XPath usando Relative, CONTAINS, REVERSE, FOLLOWING SIBLING, etc.
  • # 10) Geração XPath usando atributos, contém, reverso, irmão precedente, divs e intervalo
  • # 11) Usando atributos, tags XML etc.
  • # 12) Geração XPath não olhando para a página inteira, mas olhando para todos os links em vez disso e contém
  • # 13) Usando Contém e Atributos
  • # 14) Usando atributos, seguindo irmãos e descendentes
  • # 15) Usando Atributos, Irmãos Seguintes, Descendente e Texto
  • # 16) Usando cabeçalho e texto
  • # 17) Usar o texto do cabeçalho, seguir irmãos, caminho, etc.
  • # 18) Usando atributos, contém e irmãos precedentes
  • # 19) Procurando a lista suspensa usando o atributo Id, algum texto específico e pesquisa reversa
  • # 20) Combinando o atributo “id” e procurando um link com texto específico
  • Conclusão
  • Leitura recomendada

O que é XPath e como ele se parece?

Encontrar um elemento é como encontrar a casa de alguém no mapa. A única maneira de encontrarmos a casa de um amigo sem qualquer ajuda externa é ter um mapa e saber o que encontrar (casa).

Para colocar essa analogia em nosso caso, o mapa será usado como DOM (tags HTML, JavaScript, etc.) onde todos os elementos da web existem, junto com o elemento da web específico que queremos encontrar.

Assim que o endereço ou caminho exclusivo de um elemento for encontrado, o script de automação executará algumas ações nele com base no cenário de teste. Por exemplo, você deseja verificar o URL da página que abre depois de clicar em um botão.

No entanto, não é fácil encontrar um endereço / caminho exclusivo de um elemento da web, pois pode haver tags semelhantes, mesmos valores de atributos, caminhos idênticos, tornando difícil criar um endereço exclusivo exato para um elemento da web chamado “XPATH”.

Aqui, vamos nos aprofundar em algumas técnicas excelentes e eficazes para gerar XPATH válido e exclusivo para qualquer tipo de elemento da web.

Leitura recomendada => Identificar elementos da web usando XPath no Selenium

Às vezes, você pode criar facilmente XPaths usando extensões de navegador, mas no meu teste de automação carreira, já enfrentei inúmeras situações em que as extensões de navegador tradicionais não funcionam e você deve criar seus próprios XPaths personalizados usando sua própria criatividade. Tenho certeza que você já passou ou enfrentará situações semelhantes.

Neste tutorial, daremos uma olhada nas 20 melhores maneiras de criar XPath final para um elemento da web, de forma que mesmo quando seu código for alterado, seu XPath permanecerá válido o tempo todo (a menos que o desenvolvedor reescreva todo o recurso / módulo).

Conhecendo todas essas técnicas, você se tornará um mestre em escrever seu próprio XPath e será capaz de escrever XPaths matadores com muito poucas chances de se tornar inválido.

Primeiro, vamos começar entendendo a sintaxe XPath e definir cada uma de suas partes.

A imagem abaixo mostrará como será o XPath, juntamente com uma descrição de cada parte:

• //: Selecione o nó atual, como entrada, div etc.
• Tagname: Tagname do elemento / nó da web
• @: Selecione o atributo
• Atributo: Nome do atributo do nó / elemento da web específico
• Valor: Valor do atributo

Só quero compartilhar algumas dicas aqui que 80% das vezes meu script de teste de automação falhou por causa do XPath. Isso é causado por haver vários elementos da web para o XPath fornecido ou o XPath não é válido ou a página ainda não foi carregada.

Portanto, sempre que seu caso de teste falhar:

1. Copie seu XPath.
2. Pesquise no Navegador (F12 ou janela da ferramenta do desenvolvedor) no DOM para verificar se é válido ou não (veja a imagem abaixo).

Pro Tipo 1: Certifique-se de que seja único e de que nenhum outro elemento da web apareça ao pesquisar duas vezes no DOM.

Pro tipo 2: Às vezes, há um problema de tempo, o que significa que seu elemento / página da web ainda não foi carregado enquanto o script estava procurando por ele, portanto, adicione algum tempo de espera e teste novamente.

Pro Tipo 3: Tente imprimir todo o DOM antes de pesquisar o elemento da web. Desta forma, você pode dizer olhando no Console se o seu elemento da web existe no DOM ou não.

Antes de nos aprofundarmos na pesquisa XPath, uma coisa importante que quero compartilhar é que se você tiver acesso direto à equipe de desenvolvimento ou se sua equipe estiver localizada onde você está, peça à sua equipe de desenvolvimento que forneça IDs exclusivos em cada elemento da web ou pelo menos aqueles que você deseja usar para automação e isso vai economizar muito do seu tempo.

Se essa não for a possibilidade, talvez você precise usar sua criatividade e criar seus próprios XPaths personalizados e é isso que vamos aprender agora.

20 maneiras principais de escrever XPath para qualquer elemento da Web

Vamos mergulhar fundo na criação das 20 melhores maneiras de um XPath matador.

# 1) Pesquisa reversa

Digamos que você deseja clicar em um botão e há um botão semelhante. Ambos os botões têm atributos de id, mas são dinâmicos e nenhum dos atributos é exclusivo em ambos os elementos do botão.

No cenário abaixo, queremos clicar no botão “Setting” do “Test Interactive”.

Código

Se você olhar os botões “Setting”, ambos os códigos são semelhantes. Usando formas tradicionais, como id, nome, valor, contém, etc., nenhum deles funcionará, por exemplo.

// * (contains (text (), ‘Setting’)), Isso resultará em dois elementos da web. Portanto, não é único.

Então aqui está a estratégia final,

>> Primeiro, encontre a tag mais próxima que seja única e, neste caso, é

>> Em segundo lugar, encontre o elemento da web mais próximo ao elemento da web pretendido que, neste caso, contém (text (), ‘TEST Interactive’). Agora estamos no mesmo lugar onde o botão ‘Configuração’ existe, mas para clicar nele, primeiro precisamos ir para o principal usando pontos duplos, conforme mostrado abaixo.

>> Como você pode ver, estamos no nível que tem o segundo elemento da web como o botão ‘Configuração’. Isso tem dois botões e queremos ir para o segundo botão, que é o botão ‘Configuração’. Adicionando ‘/ botão (2)’ no final, podemos obter nosso XPATH exclusivo para o botão ‘Configuração’ conforme mostrado abaixo.

XPATH final:

Esta é outra maneira de gerar se você acha que eles podem alterar o tipo de elemento da web de “botão” para outro.

ou usando 'irmão seguinte'

# 2) Uso de variáveis ​​e valores personalizados

Digamos que haja um aplicativo da web que possui o recurso FTP (“File Transfer Protocol”) para fazer upload / download de arquivos e você tem um caso de teste para baixar um arquivo específico clicando no link de download.

Primeiro, podemos definir o nome do arquivo que estamos procurando como uma variável.

StringesperadoFileName = “Test1”;

Agora, usando o XPATH, podemos encontrar o nome do arquivo real.

No XPath acima,… ‘/ tr / td (1) .getAttribute (“ title ”)’ irá para a linha específica e a primeira coluna e obterá o valor do atributo title. Podemos armazenar o nome do arquivo real em outra variável.

Assim que tivermos os nomes dos arquivos esperados e reais, podemos comparar os dois e, se ambos corresponderem, podemos simplesmente clicar no link de download.

Também podemos criar um loop por cada linha e continuar verificando o nome do arquivo até encontrá-lo.

# 3) Usando tags “XML”, “AND” etc

Podemos gerar XPATH exclusivo usando tags personalizadas, além de adicionar outras condições.

Por exemplo, digamos que nosso elemento da web pretendido exista na tag principal e haja várias tags de endereço, mas você deseja encontrar apenas uma específica. Todas as tags de endereço têm um atributo de classe, portanto, podemos começar com.

Percebemos que nosso elemento da web pretendido está em uma tag que possui algum texto chamado ‘Teste’.

Descobrimos que existem vários elementos da web encontrados como resultado. Portanto, para torná-lo mais exclusivo, podemos adicionar outras condições, como “id”, que finalmente nos apontará para o elemento da web que estamos procurando.

# 4) Usando atributos e tabela XPATH

Vamos supor que queremos digitar em um elemento da web que é colocado dentro de uma tabela e a tabela é colocada dentro de um elemento de formulário.

Podemos encontrar todos os formulários dentro do DOM com o nome ‘myForm’.

Agora, em todos os formulários, encontre a tabela com id ‘tbl_testdm’.

Na tabela, vá para uma linha e coluna específicas.

Dentro da célula, se houver várias entradas, encontre uma entrada em que valor = ‘Abrir RFS’, e isso nos dará o XPath final do campo.

# 5) Usando atributos, tabelas e texto

Suponha que o elemento da web pretendido esteja na Tabela do painel e tenha algum texto comum.

Comece primeiro com um painel com um atributo exclusivo que, neste caso, é ‘TITLE’.

Agora navegue por todas as tags da tabela.

Em todas as tabelas, encontre a coluna que contém o texto ‘Autor’.

O XPath final seria como:

classificação de mesclagem recursiva c ++

# 6) Gerando XPATH usando atributos aninhados

O XPath do elemento da web alvo também pode ser gerado usando os atributos aninhados. Por exemplo, neste caso, ele procurará um atributo específico no DOM e, em seguida, procurará outro atributo dentro dele.

# 7) Geração XPath combinando atributos, Divs e botão

Por exemplo, no XPath abaixo, consegui encontrar o elemento da web de destino usando um id (XPath relativo), algumas tags div e um botão.

# 8) Gerando XPATH usando CONTAINS, REVERSE LOOKUP, etc.

Uma vez, tive um menu suspenso sem identificação direta. Tive que usar os atributos CONTAINS, REVERSE, DIVs para chegar ao XPATH final, conforme mostrado abaixo.

# 9) Geração XPath usando Relative, CONTAINS, REVERSE, FOLLOWING SIBLING, etc.

Eu tive uma situação em que o aplicativo exibe um gráfico e cada valor do gráfico teve que ser validado. Mas, infelizmente, cada valor não tinha nenhuma identificação exclusiva, então eu vim com o XPATH final conforme mostrado abaixo para um valor de gráfico que combina tags relativas, contém, reverso, irmão seguinte e div.

# 10) Geração XPath usando atributos, contém, reverso, irmão precedente, divs e intervalo

Uma vez eu tive que validar diferentes dados de alarme e cada valor de alarme foi exibido com base em um cálculo ou tempos específicos. Para capturar cada valor, eu tive que criar o XPATH abaixo que usa atributos, contém, reverso, irmão anterior, divs e tags de span.

# 11) Usando atributos, tags XML etc.

No XPATH, atributos e tags XML abaixo, uma sequência é usada para chegar ao endereço exclusivo final de um elemento da web.

# 12) Geração XPath não olhando para a página inteira, mas olhando para todos os links em vez disso e contém

O XPath a seguir procuraria apenas links em uma página inteira que contivesse o texto como “Entrada manual de dados de parâmetro”.

# 13) Usando Contém e Atributos

# 14) Usando atributos, seguindo irmãos e descendentes

# 15) Usando Atributos, Irmãos Seguintes, Descendente e Texto

# 16) Usando cabeçalho e texto

Se o elemento da web for um cabeçalho com algum texto específico, o XPath pode ser conforme mostrado abaixo:

# 17) Usar o texto do cabeçalho, seguir irmãos, caminho, etc.

# 18) Usando atributos, contém e irmãos precedentes

Uma vez que eu tinha um período que não tinha nenhum atributo exclusivo, criei XPATH combinando absoluto, Contém, irmãos precedentes e outro caminho absoluto.

# 19) Procurando a lista suspensa usando o atributo Id, algum texto específico e pesquisa reversa

# 20) Combinando o atributo “id” e procurando um link com texto específico

Conclusão

Quando se trata de escrever um XPATH matador, realmente depende de quão bem você entende e analisa o código. Quanto mais você entender o código, maior será o número de maneiras que encontrará ao escrever XPATHs eficazes.

A primeira etapa ao escrever XPath é encontrar o elemento da web exclusivo mais próximo de seu elemento da web de destino e continuar se aproximando usando diferentes técnicas discutidas acima, como atributos, DIVs, seguinte, contém, etc.

No final, diríamos novamente que realmente tornará sua vida mais fácil se você solicitar que sua equipe de desenvolvimento adicione IDs exclusivos em todos os elementos da web nos quais você está interessado.

Sempre que um ciclo de sprint ou trabalho em um novo requisito começa e a equipe é compartilhada com novos modelos, sempre examino todos os modelos e penso em casos de teste de automação em potencial, preparo uma lista de todos os elementos da web em potencial que serão usados em testes de automação e preparo meus próprios ids.

Assim que uma lista de todos os elementos da web junto com meus IDs sugeridos for concluída, eu a compartilharia com o desenvolvedor com antecedência para ser usada no código de desenvolvimento. Dessa forma, eu sempre obteria IDs exclusivos tornando minha batalha de escrita XPATH mais fácil.

Abaixo está uma lista combinada de diferentes maneiras de escrever XPATHs:

1. “// * (@ id =’ rcTEST ’) // * (contains (text (),‘ TEST Interactive ’)) /../ botão (2)”
2. “// * (@ id =’ rcTEST ’) // * (contains (text (),‘ TEST Interactive ’)) /..//* (contains (text (),‘ Setting ’))”
3. “// * (@ id =’ rcTEST ’) // * (contains (text (),‘ TEST Interactive ’)) / following-sibling :: button”
4. “String actualFileName = WebDriverAccess.getDriver (). FindElement (By.xpath (“ // * ”+ fileName +” / tr / td (1) ”)). GetAttribute (“ title ”);”
5. WebDriverAccess.getDriver (). FindElement (By.xpath (“// *” + fileName + ”/ tr / td (4)”)). Click ();
6. '// endereço (@ class = 'ng-scope ng-isolate-scope') // div (contains (., Testing ') e @ id =' msgTitle ')'
7. “// * (@ name =’ myForm ’) // table (@ id =’ tbl_ testdm ’) / tbody / tr / td (6) /
8. input (@ value = ’Open RFS’) ”
9. “// * (@ title =’ Songs List Applet ’) // table // td (contains (text (),’ Author ’))”
10. “// * (@ id =’ parameters ’) // * (@ id =’ testUpdateTime ’)”) ”
11. “// * (@ id = 'MODELO / PLANO') / div (1) / div (2) / div (1) / div (1) / widget / seção / div (1) / div / div (1) / div / div / botão (1) ”
12. “// * (contains (text (),’ Watch Dial)) /../ div / select (@ data-ng-model = ’context.questions (subqts.subHandleSubId)’) ”),”
13. “// * (@ id = 'PESQUISA / PLANO') // * (contém (@id, 'A4')) /../../ seguinte-irmão :: div (1) / div (1) / amplitude (1) / amplitude (1) ”
14. “// * (@ id = 'ALARMDATA') // * (contém (@id, 'AFC2')) /../../ irmão anterior :: div (1) / div (1) / span ( 1) / intervalo (1) ”
15. “// * (@ id = 'PESQUISA / REVISÃO') // widget / seção / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'detalhes') ”
16. “//A(contains(.,’Parameter Data Manual Entry’)) ”
17. “// * (contains (@ style,’ display: block; top: ’)) // input (@ name =’ daterangepicker_end ’)”
18. “// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Notepad ’)”
19. “// * (@ id =’ dropdown-filter-serviceTools ’) / following-sibling :: ul / descendant :: a (text () =’ Trigger Dashboard ’)”
20. “// h3 (text () =’ Debrief interno ’)”
21. “// h3 (contains (text (), 'Helium Level')) / following-sibling :: div / label / input”
22. “// div (div (p (contains (text (),’ Status ’)))) / brother-precedente :: div / div / span (3) / span”
23. “// * (@ id =’ COUPLING ’) // * (contains (text (),’ COUPLE Trend ’)) /../ div / select”
24. “// * (@ id =’ ffaHeaderDropdown ’) // a (contains (text (),’ Start Workflow ’))”

Espero que este artigo informativo tenha enriquecido seu conhecimento sobre como escrever XPaths.

Biografia do autor: Este artigo foi escrito por Adnan Arif, um profissional de TI com diversas experiências e habilidades em sua carreira de mais de 9 anos.

Leitura recomendada

• Tutoriais detalhados do Eclipse para iniciantes
• Tutorial Python DateTime com exemplos
• Sintaxe de comando Unix Cat, opções com exemplos
• Comando de classificação Unix com sintaxe, opções e exemplos
• Tutorial de script do Unix Shell com exemplos
• Selenium Encontrar Elemento por Tutorial de Texto com Exemplos
• Tutorial da função principal do Python com exemplos práticos
• Xpath Extractor Post-Processor no JMeter