Dominando o XPath no Selenium: Como localizar elementos

Por
Twittar
Compartilhar
Compartilhar
Pin

Os engenheiros de teste são essenciais no ciclo de vida do desenvolvimento de software, pois garantem que uma equipe forneça aplicativos funcionais e livres de bugs. Esses engenheiros levam os aplicativos a diferentes testes antes que possam ser enviados ou declarados prontos para os usuários.

Os testadores devem ser habilidosos e capazes de localizar e interagir com elementos da web. O Selenium é uma das ferramentas de automação de teste mais usadas pelas equipes de desenvolvimento modernas. Esta ferramenta possui quatro componentes; Selenium Grid, Selenium WebDriver, Selenium IDE e Selenium RC.

Nosso foco hoje será o Selenium WebDriver, pois contém XPath. Este artigo definirá o XPath, discutirá a sintaxe básica do XPath e ilustrará como XPath no Selenium.

O que é XPath

XPath (XML Path Language) é uma linguagem de consulta para selecionar e navegar em atributos e elementos em documentos XML. XPath define uma expressão de caminho, oferecendo uma maneira de endereçar partes específicas de um documento XML e recuperar informações dele.

Sua sintaxe se assemelha a um caminho de sistema de arquivos. Ele também possui funções e símbolos que facilitam a seleção de elementos com base em seus atributos e hierarquia. Você pode usar XPath com tecnologias como XML, HTML e XSLT para extrair e manipular dados.

Por que usar XPath?

  • É flexível: ao contrário dos seletores CSS que só podem localizar elementos usando o nome da tag, ID ou classe, o XPath permite que você localize elementos usando outros atributos.
  • Reutilizável: você pode armazenar seu XPath em variáveis ​​e reutilizá-los em seu código.
  • Seleção de nó precisa: XPath fornece uma maneira padronizada de direcionar elementos específicos em um documento da web.

Sintaxe básica do XPath

O XPath permite que você encontre qualquer elemento em uma página da Web usando o DOM. No entanto, antes de verificarmos a sintaxe, precisamos entender as seguintes expressões XPath;

ExpressionDescriptionnodename/ tagnameSeleciona todos os nós com o nome ‘nodename’/ ‘tagname’/Seleciona do nó raiz// Seleciona nós no documento atual do nó atual correspondente à seleção, independentemente de onde eles estão@Seleciona atributos..Seleciona o pai de o nó atual. Seleciona o nó atual

  10 melhores ferramentas de conversão de vídeo FLV para MP3

A sintaxe padrão para XPath é;

XPath=//tagname[@attribute="value"]

Como você pode ver, a sintaxe começa com uma barra dupla (//), que começa com o nó atual conforme definido pelo nome da tag/nó.

XPath absoluto vs. XPath relativo

Temos dois caminhos ao lidar com XPath; XPath Absoluto e XPath Relativo;

XPath absoluto

Um XPath absoluto é um caminho direto da raiz para o elemento desejado. Você começa com o nó raiz e termina com o nó de destino.

Você pode ter um documento HTML com o seguinte conteúdo;

<!DOCTYPE html>
<html>
<head>
    <title>etechpt.com</title>
</head>
<body>
    <div>
        <h1>Welcome to etechpt.com</h1>
    </div>
</body>
</html>

Se quisermos localizar o elemento com o conteúdo “Welcome to etechpt.com”, você seguirá este caminho;

/html/body/div/h1

No documento acima, temos;

  • O html como nó raiz: /html
  • O corpo é um nó pai: /html/body
  • O div como filho do nó do corpo: /html/body/div
  • O h1 como filho do nó div: /html/body/div/h1

Para obter o elemento mais interno, você deve seguir esse caminho.

Quando usar o XPath absoluto

Absolute XPath segue um caminho ‘específico’. Portanto, será um ajuste perfeito quando você tiver vários elementos com atributos semelhantes em uma página, garantindo que esteja direcionando os elementos exatos em um documento.

No entanto, o XPath é supersensível a alterações na estrutura do documento HTML. Como tal, uma simples alteração pode interromper seu XPath absoluto.

XPath relativo

O XPath relativo começa em qualquer nó e termina com o nó de destino. Esse caminho não é afetado por alterações no documento, tornando-o preferível na maioria dos casos. Com Relative XPath, você pode localizar elementos de qualquer parte do documento. A expressão Relative XPath começa com barras duplas ‘//’.

Se usarmos o documento HTML, podemos localizar nosso H1 que diz “Welcome to etechpt.com”;

<!DOCTYPE html>
<html>
<head>
    <title>etechpt.com</title>
</head>
<body>
    <div>
        <h1>Welcome to etechpt.com</h1>
    </div>
</body>
</html>

Nosso XPath Relativo para h1 será; 

//body/div/h1

Quando usar Relative XPath

Você deve usar Relative XPath ao procurar um equilíbrio entre flexibilidade e especificidade. Este caminho é resiliente a mudanças no documento HTML, dado que a relação entre os elementos permanece específica.

Localize elementos usando XPath no Selenium

Selenium é uma estrutura de código aberto que permite aos usuários automatizar navegadores da web. A estrutura possui uma coleção de bibliotecas e ferramentas que ajudam os testadores a interagir com elementos da Web de forma automática e sistemática.

  Como adicionar, usar e personalizar widgets no seu iPhone

Supondo que temos um documento da web que contém uma lista de músicas da seguinte forma;

<!DOCTYPE html>
<html>
<head>
    <title>Song Library</title>
</head>
<body>
    <h1>Song Library</h1>
    <ul class="song-list">
        <li class="song" title="Song Title 1">Song 1 - Artist 1</li>
        <li class="song" title="Song Title 2">Song 2 - Artist 2</li>
        <li class="song" title="Song Title 3">Song 3 - Artist 1</li>
        <li class="song" title="Song Title 4">Song 4 - Artist 3</li>
    </ul>
</body>
</html>
  • Nosso nó raiz é .
  • Temos como nosso nó pai.
  • Temos

    como filho de .

  • Temos
      como filho de .
    • Temos
    • como filho de
        .

      Podemos usar diferentes localizadores de XPath no documento HTML acima. Por exemplo, podemos localizar elementos por ID, nome, nome da classe, contém, textos, termina com e começa com, entre muitos outros localizadores. Você pode usar o Selenium com diferentes linguagens de programação. Usaremos Python para demonstrar.

      Localizar por índice

      Assumindo que queremos localizar a música número 3, podemos ter este código;

      third_song = driver.find_element_by_xpath("//li[@class="song"][3]")
print("Third Song:", third_song.text)

      Usamos Relative XPath e começamos com o nó ‘li’. Quando o Selenium localizar a terceira música em nossa lista, ele imprimirá seu texto.

      Localizar por atributo

      Podemos ter um XPath que procura todas as músicas do ‘Artista 1’ e imprime seus títulos. Nosso código pode ser o seguinte;

      songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artist 1')]")
print("Songs by Artist 1:")
for song in songs_by_artist1:
    print(song.text)

      Localizar por texto

      Este localizador ajuda a encontrar elementos com texto específico. Podemos procurar uma música com o texto “Song 4” e imprimir seu texto. Podemos representar este localizador usando este código;

      song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Song 4')]")
print("Song with Text:", song_with_text.text)

      Eixos XPath

      As abordagens que discutimos até agora funcionam perfeitamente com páginas da Web simples. No entanto, há instâncias em que os métodos de pesquisa de elemento XPath, como por Texto, ID, Nome da classe e Nome, não funcionarão.

      XPath Axes são usados ​​para conteúdo dinâmico onde os localizadores normais não funcionam. Aqui, você localiza elementos com base em seu relacionamento com outros elementos. Estes são alguns dos localizadores XPath Axes comuns;

      Antepassado

      O método Ancestor Axis é perfeito para lidar com documentos XML com elementos altamente aninhados. Você pode selecionar todos os elementos ancestrais, como avô e pai do nó atual, do mais próximo ao mais distante.

      Podemos ter o seguinte código;

      <bookstore>
  <book>
    <title>The Great Gatsby</title>
    <author>F. Scott Fitzgerald</author>
    <genre>Fiction</genre>
  </book>
  <book>
    <title>The Biggest Dilemma</title>
    <author>George Orwell</author>
    <genre>Dystopian</genre>
  </book>
</bookstore>

      Se quisermos selecionar todos os ancestrais do elemento ‘title’ para o livro “The Biggest Dilemma”, podemos ter este método Ancestor Axis;

      //title[text() = '1984']/ancestor::*

      Seguindo

      O método do Eixo Seguinte localiza todos os nós após a tag de fechamento do nó atual. Este método não considera a hierarquia ou localização de seus nós de destino. Por exemplo, se você tiver um documento XML ou página da Web com várias seções, poderá identificar um elemento que aparece após uma seção específica sem navegar por toda a estrutura da árvore.

      Pai

      O método Parent Axis em XPath seleciona o pai do nó atual. Você pode usar o seguinte caminho para localizar o nó pai; 

      //tag[@attribute="value"]/parent::tagName

      Essa abordagem funciona quando os elementos filho no nó atual têm atributos exclusivos que você pode localizar facilmente e deseja verificar com o pai.

      Criança

      O método Child Axis no XPath seleciona todos os filhos do nó atual. Ele continua sendo um dos métodos XPath Axis mais populares, pois ajuda a selecionar os nós filhos de um elemento específico.

      Considere este pedaço de código;

      <section id='text'>
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
    <p>Paragraph four</p>
</section>

      Podemos localizar todos os elementos ‘p’ em nosso código usando este Axis;

      //section[@id='text']/child::p

      perguntas frequentes

      Por que usar XPath em vez de seletores CSS?

      Os seletores CSS só podem localizar elementos com base em seu ID, nome da tag e classe. Por outro lado, você pode usar XPath para localizar elementos com base em sua localização, conteúdo de texto e outros atributos na estrutura HTML. Você também pode armazenar expressões XPath em variáveis ​​e reutilizá-las em seu aplicativo.

      Quais idiomas o XPath no Selenium suporta?

      Você pode usar XPath com qualquer linguagem que suporte Selenium. Você pode escrever seus scripts em JavaScript, Java, Python, Ruby, C# e PHP.

      Quais são as alternativas do XPath?

      Você pode usar seletores CSS, reconhecimento de imagem ou localizadores integrados do Selenium como uma alternativa ao XPath. Os seletores de CSS são os mais comuns; você pode encontrar elementos com base em seu nome de tag, ID ou classe. O Reconhecimento de imagem permite localizar elementos com base em suas imagens. Os localizadores integrados do Selenium são projetados para serem fáceis de usar.

      Conclusão

      Agora você pode definir XPath em Selenium, diferenciar entre XPath Absoluto e Relativo e localizar elementos usando diferentes localizadores de XPath. A escolha do localizador dependerá da natureza do conteúdo e de seus objetivos finais.

      Confira nosso artigo sobre perguntas da entrevista do Selenium se você quiser se sair bem em sua próxima entrevista.