Os especialistas em testes desempenham um papel crucial no desenvolvimento de software, assegurando que os aplicativos sejam funcionais e livres de erros. Esses profissionais submetem os aplicativos a diversos testes antes que sejam liberados para os usuários.
Os testadores devem possuir habilidades para identificar e interagir com elementos web. O Selenium se destaca como uma das ferramentas de automação de testes mais adotadas por equipes de desenvolvimento. Esta ferramenta é composta por quatro módulos: Selenium Grid, Selenium WebDriver, Selenium IDE e Selenium RC.
Este artigo abordará o Selenium WebDriver, que inclui o XPath. Explicaremos o conceito de XPath, sua sintaxe básica e como aplicá-lo no Selenium.
O que é XPath?
XPath (XML Path Language) é uma linguagem de consulta usada para selecionar e navegar por atributos e elementos em documentos XML. O XPath fornece um meio de endereçar seções específicas de um documento XML e recuperar informações.
Sua sintaxe é similar a um sistema de arquivos, incorporando funções e símbolos que simplificam a seleção de elementos com base em seus atributos e hierarquia. O XPath é compatível com tecnologias como XML, HTML e XSLT para extrair e manipular dados.
Por que usar XPath?
- Flexibilidade: Ao contrário dos seletores CSS, que se limitam a nome de tag, ID ou classe, o XPath permite localizar elementos por outros atributos.
- Reutilização: Expressões XPath podem ser armazenadas em variáveis para serem usadas repetidamente em seu código.
- Seleção Precisa de Nós: O XPath oferece uma abordagem padronizada para direcionar elementos específicos em um documento web.
Sintaxe Básica do XPath
O XPath permite identificar qualquer elemento em uma página web através do DOM. No entanto, para entendermos a sintaxe, vamos revisar estas expressões XPath:
| Expressão | Descrição |
| nodename/tagname | Seleciona todos os nós com o nome ‘nodename’/’tagname’. |
| / | Seleciona a partir do nó raiz. |
| // | Seleciona nós correspondentes à seleção no documento, a partir do nó atual, independentemente de sua localização. |
| @ | Seleciona atributos. |
| .. | Seleciona o nó pai do nó atual. |
| . | Seleciona o nó atual. |
A sintaxe padrão do XPath é:
XPath=//tagname[@attribute=”value”]
A sintaxe começa com uma barra dupla (//), indicando o nó atual, determinado pelo nome da tag ou nó.
XPath Absoluto vs. XPath Relativo
No uso de XPath, temos duas abordagens: XPath Absoluto e XPath Relativo.
XPath Absoluto
Um XPath absoluto é um caminho direto da raiz ao elemento desejado. Ele começa no nó raiz e termina no nó de destino.
Considere um documento HTML com o seguinte conteúdo:
<!DOCTYPE html>
<html>
<head>
<title>etechpt.com</title>
</head>
<body>
<div>
<h1>Bem-vindo ao etechpt.com</h1>
</div>
</body>
</html>
Para localizar o elemento com o texto “Bem-vindo ao etechpt.com”, o caminho seria:
/html/body/div/h1
Neste exemplo:
- `html` é o nó raiz: /html
- `body` é um nó pai: /html/body
- `div` é um filho do nó `body`: /html/body/div
- `h1` é um filho do nó `div`: /html/body/div/h1
Para alcançar o elemento mais interno, este caminho deve ser seguido.
Quando usar XPath Absoluto
O XPath Absoluto segue um caminho “específico”. Portanto, é ideal quando há vários elementos com atributos similares em uma página, garantindo que você direcione o elemento desejado em um documento.
No entanto, o XPath é altamente sensível a alterações na estrutura do HTML. Uma modificação simples pode quebrar seu XPath absoluto.
XPath Relativo
O XPath Relativo começa em qualquer nó e termina no nó de destino. Este caminho não é afetado por mudanças no documento, tornando-o preferível na maioria das situações. Ele permite localizar elementos de qualquer parte do documento. A expressão XPath Relativo começa com barras duplas `//`.
Usando o mesmo documento HTML, podemos localizar o elemento `h1` com o texto “Bem-vindo ao etechpt.com”:
<!DOCTYPE html>
<html>
<head>
<title>etechpt.com</title>
</head>
<body>
<div>
<h1>Bem-vindo ao etechpt.com</h1>
</div>
</body>
</html>
O XPath Relativo para `h1` seria:
//body/div/h1
Quando usar XPath Relativo
O XPath Relativo deve ser usado ao procurar um equilíbrio entre flexibilidade e especificidade. Este caminho é resiliente a mudanças no documento HTML, mantendo a relação entre os elementos.
Localizar Elementos usando XPath no Selenium
Selenium é uma estrutura de código aberto que permite automatizar navegadores web. Possui um conjunto de bibliotecas e ferramentas que ajudam os testadores a interagir com elementos web de forma automática e sistemática.
Considere um documento web contendo uma lista de músicas:
<!DOCTYPE html>
<html>
<head>
<title>Biblioteca de Músicas</title>
</head>
<body>
<h1>Biblioteca de Músicas</h1>
<ul class="song-list">
<li class="song" title="Título da Música 1">Música 1 - Artista 1</li>
<li class="song" title="Título da Música 2">Música 2 - Artista 2</li>
<li class="song" title="Título da Música 3">Música 3 - Artista 1</li>
<li class="song" title="Título da Música 4">Música 4 - Artista 3</li>
</ul>
</body>
</html>
- `html` é o nosso nó raiz.
- `body` é nosso nó pai.
- `h1` é um filho de `body`.
- `ul` é um filho de `body`.
- `li` é um filho de `ul`.
Podemos usar diferentes localizadores XPath neste documento. Por exemplo, elementos podem ser localizados por ID, nome, nome da classe, contém, texto, termina com, começa com e outros. O Selenium pode ser usado com diversas linguagens de programação. Usaremos Python como exemplo.
Localizar por Índice
Se quisermos localizar a música número 3, podemos usar o seguinte código:
third_song = driver.find_element_by_xpath("//li[@class='song'][3]")
print("Terceira Música:", third_song.text)
Usamos XPath Relativo e começamos com o nó `li`. Quando o Selenium encontrar a terceira música, exibirá seu texto.
Localizar por Atributo
Podemos criar um XPath que busque todas as músicas do ‘Artista 1’ e imprima seus títulos. O código seria:
songs_by_artist1 = driver.find_elements_by_xpath("//li[contains(@class, 'song') and contains(text(), 'Artista 1')]")
print("Músicas do Artista 1:")
for song in songs_by_artist1:
print(song.text)
Localizar por Texto
Este localizador encontra elementos com texto específico. Podemos procurar a música com o texto “Música 4” e exibir seu texto:
song_with_text = driver.find_element_by_xpath("//li[contains(text(), 'Música 4')]")
print("Música com Texto:", song_with_text.text)
Eixos XPath
Os métodos que discutimos até agora funcionam bem para páginas web simples. No entanto, há casos em que os métodos de pesquisa de elementos por Texto, ID, Nome da Classe e Nome não funcionarão.
Os Eixos XPath são usados para conteúdo dinâmico onde os localizadores normais não são eficazes. Aqui, os elementos são encontrados com base em sua relação com outros elementos. Estes são alguns dos localizadores de Eixos XPath mais comuns:
Ancestral
O método do Eixo Ancestral é adequado para documentos XML com elementos altamente aninhados. Ele permite selecionar todos os elementos ancestrais, como avô e pai do nó atual, do mais próximo ao mais distante.
Considere o seguinte código:
<bookstore>
<book>
<title>O Grande Gatsby</title>
<author>F. Scott Fitzgerald</author>
<genre>Ficção</genre>
</book>
<book>
<title>O Maior Dilema</title>
<author>George Orwell</author>
<genre>Distopia</genre>
</book>
</bookstore>
Para selecionar todos os ancestrais do elemento `title` do livro “O Maior Dilema”, podemos usar:
//title[text() = ‘O Maior Dilema’]/ancestor::*
Seguinte
O Eixo Seguinte localiza todos os nós após a tag de fechamento do nó atual, sem considerar a hierarquia ou localização. Isso é útil, por exemplo, para identificar um elemento após uma seção específica em uma página web, sem precisar navegar por toda a árvore.
Pai
O Eixo Pai em XPath seleciona o pai do nó atual. O caminho a seguir pode ser usado para localizar o nó pai:
//tag[@attribute=”value”]/parent::tagName
Essa abordagem funciona quando os elementos filhos no nó atual têm atributos únicos que você pode facilmente localizar e verificar com o pai.
Filho
O Eixo Filho em XPath seleciona todos os filhos do nó atual. É um dos métodos mais usados para selecionar os nós filhos de um elemento específico.
Considere este código:
<section id='text'>
<p>Parágrafo um</p>
<p>Parágrafo dois</p>
<p>Parágrafo três</p>
<p>Parágrafo quatro</p>
</section>
Podemos localizar todos os elementos `p` usando este Eixo:
//section[@id=’text’]/child::p
Perguntas Frequentes
Por que usar XPath em vez de seletores CSS?
Os seletores CSS localizam elementos com base em seu ID, nome da tag e classe. O XPath permite localizar elementos com base em sua localização, conteúdo do texto e outros atributos na estrutura HTML. Expressões XPath podem ser armazenadas em variáveis para reutilização.
Quais linguagens o XPath no Selenium suporta?
XPath pode ser usado com qualquer linguagem que suporte Selenium, incluindo JavaScript, Java, Python, Ruby, C# e PHP.
Quais são as alternativas ao XPath?
Seletores CSS, reconhecimento de imagem ou localizadores integrados do Selenium podem ser usados como alternativas ao XPath. Seletores CSS são os mais comuns. O Reconhecimento de imagem localiza elementos por suas imagens. Os localizadores integrados do Selenium são projetados para fácil uso.
Conclusão
Agora você conhece o XPath no Selenium, a diferença entre XPath Absoluto e Relativo e como localizar elementos usando diferentes localizadores XPath. A escolha do localizador depende da natureza do conteúdo e de seus objetivos.
Consulte nosso artigo sobre perguntas de entrevistas sobre Selenium para se preparar para sua próxima entrevista.