XPath (Linguagem de Caminho XML) é uma linguagem de consulta poderosa usada para navegar pelo Modelo de Objeto do Documento (DOM) de documentos HTML e XML. Para desenvolvedores web, testadores e engenheiros de automação, dominar XPath é essencial para localizar e interagir com precisão com elementos em páginas da web. Seja você desenvolvendo testes automatizados com Selenium, Playwright ou outras estruturas de teste, ou extraindo dados de sites, XPath oferece a flexibilidade e precisão necessárias para navegar até as estruturas de DOM mais complexas.
Este guia abrangente irá levá-lo por tudo que você precisa saber sobre XPath, desde a sintaxe básica até técnicas avançadas, ajudando você a se tornar proficiente na criação de expressões XPath robustas e eficientes.
Antes de mergulhar mais fundo no XPath, vamos tomar um momento para apresentar o Apidog, a melhor alternativa ao Postman disponível hoje. O Apidog combina documentação de API, design, depuração, teste e simulação em uma única plataforma unificada.
Diferente do Postman, o Apidog oferece uma interface mais intuitiva, melhores recursos de colaboração em equipe e uma integração perfeita entre design de API e teste. Com suas poderosas capacidades de teste, o Apidog torna mais fácil validar APIs.
Se você está trabalhando com APIs e testes web, o conjunto de ferramentas abrangente do Apidog pode agilizar significativamente seu fluxo de trabalho e melhorar a produtividade.
O que é XPath?
XPath é uma linguagem de consulta projetada para selecionar nós em documentos XML. Como o HTML pode ser considerado uma forma especializada de XML, o XPath pode ser aplicado efetivamente a documentos HTML também. Foi introduzido pela primeira vez pelo World Wide Web Consortium (W3C) como parte da especificação XSLT 1.0 e desde então se tornou uma ferramenta essencial para automação web e extração de dados.
XPath serve como uma linguagem de navegação, permitindo que você percorra a hierarquia de um documento HTML definindo caminhos para elementos, muito parecido com como você navega por pastas em um sistema de arquivos. O que torna o XPath particularmente poderoso é sua capacidade de:
- Navegar pela hierarquia de elementos em várias direções
- Filtrar elementos com base em atributos, conteúdo ou posição
- Acessar facilmente elementos pai, filho e irmão
- Usar funções embutidas para manipular dados e comparar valores
Localizadores XPath na Automação Web
Em estruturas de automação web como Selenium WebDriver, os localizadores XPath servem como um método primário para identificar elementos em uma página da web. Embora outros localizadores, como seletores CSS, ID ou nomes de classe, sejam frequentemente preferidos por sua simplicidade e desempenho, o XPath oferece flexibilidade inigualável em cenários complexos.
Aqui estão algumas vantagens principais de usar XPath na automação web:
- Flexibilidade: XPath pode localizar elementos com base no conteúdo de texto, relacionamentos pai-filho e relacionamentos entre irmãos, o que outros localizadores não conseguem fazer facilmente.
- Seleção baseada em texto: XPath permite que você encontre elementos que contêm texto específico, tornando-o inestimável para conteúdo dinâmico.
- Capacidades de travessia: Você pode navegar para cima (para elementos pai), para baixo (para elementos filho) ou lateralmente (para elementos irmãos) na árvore DOM.
- Operações Lógicas: XPath suporta operadores lógicos como e, ou, e não, permitindo condições de seleção complexas.
Essenciais do XPath
Para usar XPath de forma eficaz, é importante entender seus componentes fundamentais e estrutura.
1. Sintaxe e Estrutura
Expressões XPath são escritas como uma série de etapas, separadas por barras (/) que navegam pela hierarquia de nós do documento. Cada etapa consiste em:
- Uma seleção de nó (como um nome de elemento ou caractere curinga)
- Predicados opcionais (condições entre colchetes)
- Eixos opcionais (especificando a direção do relacionamento)
A sintaxe básica segue este padrão:
axisname::nodetest[predicate]
Onde:
axisnamedefine o relacionamento a ser utilizado (filho, pai, etc.)nodetestidentifica quais nós selecionarpredicatefiltra os nós selecionados com base em condições
2. Eixos e Tipos de Nó Principais
XPath fornece vários eixos para definir relacionamentos entre nós:
- child: Seleciona todos os filhos do nó atual
- parent: Seleciona o pai do nó atual
- ancestor: Seleciona todos os ancestrais (pai, avô, etc.)
- descendant: Seleciona todos os descendentes (filhos, netos, etc.)
- sibling: Seleciona irmãos (nós com o mesmo pai)
- self: Seleciona o nó atual
Os tipos de nó que podem ser selecionados incluem:
- element: Elementos HTML/XML
- attribute: Atributos de elementos
- text: Conteúdo de texto dentro de elementos
- comment: Nós de comentários
- processing-instruction: Nós de instruções de processamento
3. Funções Comuns
XPath inclui várias funções que aprimoram suas capacidades:
- text(): Recupera o conteúdo de texto de um elemento
- contains(): Verifica se uma string contém um substring específico
- starts-with(): Verifica se uma string começa com um substring específico
- concat(): Combina várias strings
- substring(): Extrai uma parte de uma string
- count(): Conta o número de nós em um conjunto de nós
- position(): Retorna a posição de um nó em um conjunto de nós
- last(): Retorna a posição do último nó em um conjunto de nós
Tipos de XPath
Existem duas abordagens principais para construir expressões XPath: absolutas e relativas.
Expressão XPath Absoluta
XPath absoluto fornece o caminho completo desde a raiz do documento até o elemento alvo. Começa com uma única barra (/) e inclui cada elemento na hierarquia.
Exemplo:
/html/body/div[2]/form/input[3]
Prós:
- Fornece um caminho preciso e único para o elemento
- Útil quando você precisa direcionar uma instância específica de um elemento
Contras:
- Extremamente frágil e propenso a quebrar quando a estrutura da página muda
- Longo e difícil de ler
- Requer atualização se qualquer elemento pai mudar
XPath Relativo
XPath relativo começa de qualquer ponto no documento e usa uma dupla barra (//) para indicar que o caminho pode começar de qualquer lugar. Essa abordagem é mais flexível e resistente a alterações na estrutura do documento.
Exemplo:
//input[@id='email']
Prós:
- Mais robusto contra alterações na estrutura do documento
- Mais curto e mais legível
- Foca em atributos ou características únicas do elemento
Contras:
- Pode ser menos específico em documentos complexos
- Poderia corresponder a vários elementos se não for cuidadosamente construído
Sintaxe XPath
Entender os elementos de sintaxe principais é crucial para construir expressões XPath eficazes:
Elementos Básicos da Sintaxe:
- / (Barra simples): Seleciona do nó raiz, representando um caminho absoluto
- // (Dupla barra): Seleciona nós em qualquer lugar no documento que correspondem à expressão
- . (Ponto): Refere-se ao nó atual
- .. (Ponto Duplo): Refere-se ao pai do nó atual
- @ (Símbolo de arroba): Seleciona atributos
- [] (Colchetes): Contém predicados (condições)
- \(Asterisco): Curinga que corresponde a qualquer nó de elemento
Predicados
Predicados são condições entre colchetes que filtram a seleção de nó:
//div[@class='container'] // Seleciona elementos div com classe 'container'
//button[text()='Enviar'] // Seleciona elementos button com texto 'Enviar'
//li[position()=3] // Seleciona o terceiro elemento li
//input[@type='text' and @required] // Seleciona elementos de entrada de texto obrigatórios
Seletores XPath
Seletores XPath definem os critérios para selecionar nós no documento. Aqui estão alguns padrões comuns de seletores:
Seletores de Elemento:
//div // Seleciona todos os elementos div
//div/p // Seleciona todos os elementos p que são filhos diretos de div
//div//p // Seleciona todos os elementos p em qualquer lugar dentro de div
Seletores de Atributo:
//*[@id='username'] // Seleciona elemento com id 'username'
//input[@name='password'] // Seleciona entrada com nome 'password'
//a[@href] // Seleciona todos os links com atributo href
//img[@src='logo.png'] // Seleciona imagem com src específico
Seletores de Posição:
//tr[1] // Seleciona o primeiro elemento tr
//tr[last()] // Seleciona o último elemento tr
//tr[position()>1] // Seleciona todos os elementos tr, exceto o primeiro
//ul/li[position() mod 2 = 0] // Seleciona elementos li em posições pares
Seletores de Conteúdo de Texto:
//h1[text()='Bem-vindo'] // Seleciona h1 com texto exato 'Bem-vindo'
//p[contains(text(),'importante')] // Seleciona p que contém a palavra 'importante'
//label[starts-with(text(),'Usuário')] // Seleciona rótulos que começam com 'Usuário'
Expressões XPath
Expressões XPath podem variar de simples a complexas, dependendo dos elementos que você precisa localizar. Aqui estão alguns exemplos de expressões cada vez mais complexas:
Expressões Simples:
//h1 // Todos os elementos h1
//div[@class='header'] // Todos os elementos div com classe 'header'
//input[@type='submit'] // Todos os botões de envio
Expressões Intermediárias:
//div[contains(@class,'produto')]//span[@class='preco'] // Spans de preço dentro de divs de produto
//table//tr[position() > 1] // Todas as linhas da tabela, exceto cabeçalhos
//form[.//input[@required]] // Formulários que contêm entradas obrigatórias
Expressões Avançadas:
//div[not(@class='hidden') and contains(@id,'section')] // Seções visíveis com padrão ID específico
//ul[count(./li) > 5] // Listas com mais de 5 itens
//a[contains(@href,'https') and not(contains(@class,'external'))] // Links internos HTTPS
Eixos XPath
Eixos definem a direção da navegação a partir do nó atual. Entender eixos permite uma seleção de elementos mais sofisticada:
Eixos Filho e Descendente:
child::div // O mesmo que ./div
descendant::p // O mesmo que .//p
Eixos Pai e Ancestral:
parent::div // Div pai do nó atual
ancestor::form // Qualquer ancestral de formulário do nó atual
ancestor-or-self::div // Qualquer ancestral div ou o nó atual se for um div
Eixos Irmão:
following-sibling::li // Todos os irmãos li que seguem o nó atual
preceding-sibling::div // Todos os irmãos div que precedem o nó atual
Outros Eixos Úteis:
following::h2 // Todos os elementos h2 que aparecem após o nó atual no documento
preceding::input // Todos os elementos input que aparecem antes do nó atual
self::p // Seleciona o nó atual se for um parágrafo
Operadores XPath
XPath suporta vários operadores para criar condições complexas:
Operadores de Comparação:
- = : Igual a
- != : Diferente de
- < : Menor que
- > : Maior que
- <= : Menor ou igual a
- >= : Maior ou igual a
Operadores Lógicos:
- and : AND Lógico
- or : OR Lógico
- not() : NOT Lógico
Operadores Aritméticos:
- + : Adição
- - : Subtração
- \: Multiplicação
- div : Divisão
- mod : Módulo
Exemplos:
//input[@value > 100] // Entradas com valor maior que 100
//div[@class='item' and @id] // Divs com classe 'item' que também têm um ID
//product[price > 50 and price < 100] // Produtos com preço entre 50 e 100
//li[position() mod 2 = 1] // Itens de lista em números ímpares
Funções XPath
XPath fornece numerosas funções embutidas para manipulação de dados:
Funções de String:
//a[contains(text(), 'Inscreva-se')] // Links contendo o texto "Inscreva-se"
//label[starts-with(@for, 'usuario')] // Rótulos com atributo 'for' começando com 'usuario'
//p[string-length(text()) > 100] // Parágrafos com texto mais longo que 100 caracteres
//div[normalize-space(text())='Olá Mundo'] // Divs com texto exato (ignorando espaços extras)
Funções Numéricas:
//ul[count(li) > 5] // Listas com mais de 5 itens
//div[round(number(@data-value)) = 42] // Divs com data-value que arredonda para 42
//product[floor(price) = 99] // Produtos com preço que arredonda para 99
Funções de Conjunto de Nós:
//tr[position() = last()] // Última linha da tabela
//div[count(child::*) = 0] // Elementos div vazios (sem elementos filhos)
//div[not(descendant::a)] // Divs que não contêm links
Console de Depuração para XPath
Uma das maneiras mais eficazes de desenvolver e testar expressões XPath é usar as ferramentas de desenvolvedor do seu navegador:
No Chrome:
- Pressione F12 ou Ctrl+Shift+I para abrir o DevTools
- Vá para a aba Console
- Use
$x("seu-xpath-aqui")para avaliar expressões XPath - Os resultados aparecerão como um array de elementos correspondentes
No Firefox:
- Pressione F12 ou Ctrl+Shift+I para abrir o DevTools
- Vá para a aba Console
- Use
$x("seu-xpath-aqui")para avaliar expressões XPath - Os resultados aparecerão como um array de elementos correspondentes
No Edge:
- Pressione F12 ou Ctrl+Shift+I para abrir o DevTools
- Vá para a aba Console
- Use
$x("seu-xpath-aqui")para avaliar expressões XPath - Os resultados aparecerão como um array de elementos correspondentes
Esse ciclo de feedback direto permite que você refine rapidamente suas expressões XPath até que elas identifiquem corretamente os elementos alvo.
Dicas e Melhores Práticas
1. Evite Armadilhas Comuns
Mantenha Simples: Expressões XPath mais simples são mais fáceis de manter e menos propensas a quebrar quando a estrutura da página muda. Busque expressões concisas que direcionem diretamente o seu elemento usando atributos únicos.
Evite Caminhos Absolutos: Caminhos absolutos são extremamente frágeis. Se qualquer elemento no caminho muda, o XPath quebra. Use caminhos relativos que se concentrem em identificadores únicos sempre que possível.
Seja Específico: Faça suas expressões tão específicas quanto necessário, mas não mais. A super-especificidade pode tornar expressões frágeis, enquanto a subespecificidade pode corresponder a elementos não-intencionais.
Use Predicados com Sabedoria: Predicados são poderosos para filtrar elementos, mas muitos predicados aninhados podem tornar expressões difíceis de ler e manter.
Considere a Compatibilidade entre Navegadores: Alguns recursos XPath podem funcionar de maneira diferente entre os navegadores. Teste suas expressões em todos os navegadores alvo para garantir consistência.
2. Otimize para Desempenho
Use Seletores Eficientes: Quando possível, use IDs ou outros identificadores únicos. A expressão //*[@id='username'] geralmente é mais rápida do que seletores hierárquicos complexos.
Limite o Uso de //: O operador de dupla barra (//) pesquisa o documento inteiro, o que pode ser lento. Quando você conhece a localização geral de um elemento, comece com um caminho mais específico.
Armazene Elementos: Se você precisa interagir com o mesmo elemento várias vezes, armazene a referência em vez de localizá-lo repetidamente com XPath.
Minimize Chamadas XPath: Cada avaliação XPath leva tempo. Agrupe operações sempre que possível para reduzir o número de pesquisas.
Teste o Desempenho: Se você notar lentidão em seus testes automatizados, faça um perfil para identificar se consultas XPath são o gargalo. Considere seletores alternativos se necessário.
3. Depure Eficazmente
Use as Ferramentas de Desenvolvedor do Navegador: A maioria dos navegadores modernos permite que você teste expressões XPath diretamente no console. Isso fornece feedback imediato sobre se sua expressão funciona.
Registre Resultados: Durante o desenvolvimento e depuração, registre os resultados de suas consultas XPath para verificar se você está selecionando os elementos pretendidos.
Prossiga pelo Código: Use pontos de interrupção e depuração passo a passo em sua estrutura de teste para inspecionar o estado de sua aplicação e resultados do XPath.
Comente Seu XPath: Adicione comentários para explicar expressões XPath complexas, especialmente ao usar recursos avançados ou abordar casos limite.
Revise e Refatore Regularmente: À medida que sua aplicação evolui, revise periodicamente suas expressões XPath para garantir que elas permaneçam confiáveis e eficientes.
Ficha Técnica de XPath
Aqui está um guia de referência abrangente para expressões XPath:
Sintaxe Básica de XPath:
/ // Seleciona do nó raiz
// // Seleciona nós em qualquer lugar no documento
. // Representa o nó atual
.. // Representa o pai do nó atual
Seletores:
element // Seleciona todos os elementos com o nome fornecido
@attribute // Seleciona o valor do atributo especificado
* // Seleciona todos os elementos filhos
text() // Seleciona o texto dentro de um elemento
[predicate] // Adiciona uma condição para filtrar nós
Predicados:
[name='value'] // Seleciona nós com o valor de atributo especificado
[position()] // Seleciona nós com base em sua posição
[last()] // Seleciona o último nó de um tipo dado
[contains(@attribute, 'value')] // Seleciona nós com valores de atributo contendo 'value'
[not(predicate)] // Nega uma condição
Eixos:
ancestor:: // Seleciona todos os ancestrais
ancestor-or-self:: // Seleciona ancestrais e o nó atual
child:: // Seleciona todos os filhos
descendant:: // Seleciona todos os descendentes
descendant-or-self:: // Seleciona descendentes e o nó atual
following:: // Seleciona todos os nós seguintes
following-sibling:: // Seleciona irmãos seguintes
parent:: // Seleciona o nó pai
preceding:: // Seleciona todos os nós precedentes
preceding-sibling:: // Seleciona irmãos precedentes
self:: // Seleciona o nó atual
Operadores:
= // Igual a
!= // Diferente de
< // Menor que
<= // Menor ou igual a
> // Maior que
>= // Maior ou igual a
and // AND Lógico
or // OR Lógico
not // NOT Lógico
Funções (Exemplos):
name() // Retorna o nome do nó atual
count(nodes) // Retorna o número de nós no conjunto de nós
concat(string1, string2) // Concatena duas strings
substring(string, start, length) // Retorna um substring
contains(string, substr) // Verifica se uma string contém uma substring
normalize-space(string) // Remove espaços em branco no início/fim e colapsa espaços
Exemplos:
/livraria/livro // Seleciona todos os elementos livro na raiz da livraria
//titulo[text()='XPath'] // Seleciona elementos titulo com texto 'XPath' em qualquer lugar no documento
//*[@id='meuId'] // Seleciona elementos com o atributo id igual a 'meuId'
/livraria/livro[position()=1] // Seleciona o primeiro elemento livro
//div[@class='destaque']//p // Seleciona elementos p dentro de div com classe 'destaque'
//a[contains(@href, 'exemplo.com')] // Seleciona elementos a com 'exemplo.com' no atributo href
Técnicas Avançadas de XPath
Trabalhando com IDs e Classes Dinâmicas
Frameworks web modernos muitas vezes geram IDs e classes dinâmicas que mudam a cada carregamento de página. Aqui estão técnicas para lidar com esses cenários:
// Usando correspondência parcial de atributos
//div[contains(@id, 'conteudo-principal')]
//button[starts-with(@id, 'enviar-')]
//input[ends-with(@id, '-entrada')] // Nota: Isto é XPath 2.0 e não suportado em todos os navegadores
// Usando padrões de nome de classe
//div[contains(@class, 'btn') and contains(@class, 'primario')]
Manipulando Iframes
Selecionar elementos dentro de iframes requer um manuseio especial:
// Primeiro, localize o iframe
//iframe[@id='iframe-conteudo']
// Então, no Selenium, você precisaria mudar para o contexto do iframe antes de usar XPath para encontrar elementos dentro dele
// driver.switchTo().frame(driver.findElement(By.xpath("//iframe[@id='iframe-conteudo']")));
// Após a troca, você pode usar XPath normalmente dentro do contexto do iframe
//button[@id='enviar']
Detectando Visibilidade de Elementos
XPath em si não pode determinar diretamente se um elemento é visível, mas você pode verificar propriedades que frequentemente indicam visibilidade:
// Elementos com display:none frequentemente possuem estilo inline
//div[not(contains(@style, 'display: none'))]
// Elementos podem estar ocultos através de classes
//div[not(contains(@class, 'oculto'))]
// Elementos podem ter o atributo aria-hidden
//div[not(@aria-hidden='true')]
Manipulando Múltiplos Elementos com as Mesmas Propriedades
Quando múltiplos elementos compartilham os mesmos atributos ou propriedades, você pode usar indexação ou atributos mais específicos:
// Seleciona o segundo botão com classe 'acao'
(//button[@class='acao'])[2]
// Seleciona com base no conteúdo de texto e classe
//button[@class='acao' and contains(text(), 'Salvar')]
// Seleciona com base em elementos ao redor
//div[@class='cartao']//button[contains(text(), 'Ver detalhes')]
XPath em Diferentes Estruturas de Teste
Selenium WebDriver
O Selenium fornece suporte direto para localizadores XPath:
// Exemplo em Java
WebElement element = driver.findElement(By.xpath("//button[@id='enviar']"));
# Exemplo em Python
element = driver.find_element(By.XPATH, "//button[@id='enviar']")
// Exemplo em JavaScript
const element = await driver.findElement(By.xpath("//button[@id='enviar']"));
Playwright
O Playwright suporta seletores XPath, embora seletores CSS sejam recomendados para melhor desempenho:
// Exemplo em JavaScript
const element = await page.locator('xpath=//button[@id="enviar"]');
await element.click();
# Exemplo em Python
element = page.locator('xpath=//button[@id="enviar"]')
element.click()
Cypress
O Cypress suporta XPath com um plugin:
// Primeiro instale o plugin: npm install -D cypress-xpath
// Adicione ao cypress/support/e2e.js:
// require('cypress-xpath')
// Então use nos testes
cy.xpath('//button[@id="enviar"]').click()
Exemplos de XPath do Mundo Real
Exemplos de Site de E-commerce:
// Encontre todos os produtos com desconto
//div[@class='produto'][.//span[@class='desconto']]
// Encontre produtos com preço em uma faixa específica
//div[@class='produto'][.//span[@class='preco' and number(translate(text(), '$', '')) < 100]]
// Encontre produtos com avaliação de 4+ estrelas
//div[@class='produto'][.//div[@class='avaliacao' and @data-estrelas >= 4]]
Exemplos de Validação de Formulário:
// Encontre todos os campos obrigatórios
//input[@required]
// Encontre campos com erros de validação
//input[../span[@class='erro']]
// Encontre rótulos de campos obrigatórios
//label[./following-sibling::input[@required] or ./input[@required]]
Exemplos de Dados de Tabela:
// Encontre linhas de tabela com conteúdo específico
//table[@id='dados']//tr[td[contains(text(), 'Concluído')]]
// Encontre a célula do cabeçalho para uma coluna específica
//table//th[contains(text(), 'Status')]
// Encontre células na mesma coluna que um cabeçalho específico
//table//th[contains(text(), 'Status')]/following-sibling::td
Conclusão
Dominar XPath é uma habilidade fundamental para qualquer pessoa envolvida em automação de testes na web ou extração de dados. Este guia equipou você com uma compreensão profunda dos essenciais do XPath, sintaxe, seletores e melhores práticas. Ao implementar essas estratégias, você pode otimizar seus processos de teste automatizado, melhorar a confiabilidade dos testes e navegar com confiança até as estruturas de DOM mais complexas.
A flexibilidade e poder do XPath o tornam uma ferramenta indispensável em seu conjunto de testes, especialmente ao lidar com aplicativos web complexos onde localizadores mais simples podem não ser suficientes. Embora seletores CSS sejam frequentemente preferidos por seu desempenho, há muitos cenários em que as capacidades únicas do XPath—como selecionar elementos com base no conteúdo de texto ou percorrer a hierarquia do DOM—o tornam a escolha superior.
Lembre-se de começar com expressões mais simples e adicionar complexidade apenas quando necessário. Revise e refatore regularmente suas expressões XPath para garantir que permaneçam eficientes e mantíveis à medida que sua aplicação evolui. Com a prática e aplicação dessas técnicas, você desenvolverá a experiência necessária para criar expressões XPath precisas e robustas que resistam ao teste do tempo.
Feliz teste!