Testador de XPath e Seletor CSS

Testador XPath e Seletor CSS - Testar Seletores e XPath Online

Uma ferramenta poderosa para testar expressões XPath e seletores CSS em conteúdo HTML. Veja instantaneamente quais elementos correspondem aos seus seletores com destaque e resultados detalhados. Perfeito para web scraping, testes de automação e aprendizado de seletores.

O que é XPath?

XPath (XML Path Language) é uma linguagem de consulta para selecionar nós de documentos XML/HTML. É comumente usado para:

- Web scraping
- Testes automatizados (Selenium, Puppeteer)
- Extração de dados de HTML
- Processamento XML

Exemplos de expressões XPath:
- //div[@class='title'] - Todos os elementos div com classe 'title'
- //a[@href] - Todos os links com atributo href
- //p[1] - Primeiro elemento parágrafo
- //div[@id='main']//p - Todos os p dentro de div com id 'main'

XPath é poderoso para seleções complexas e navegação na estrutura do documento.

O que são Seletores CSS?

Seletores CSS são padrões usados para selecionar elementos HTML com base em seus atributos, classes, IDs e relacionamentos. São usados para:

- Estilizar elementos com CSS
- Selecionar elementos em JavaScript
- Web scraping
- Testes automatizados

Exemplos de seletores CSS:
- div.title - Div com classe 'title'
- #header - Elemento com id 'header'
- a[href] - Todos os links com atributo href
- div > p - Filhos p diretos de div
- p:first-child - Primeiro elemento p

Seletores CSS são mais simples que XPath para a maioria das seleções comuns.

Como uso este testador?

Usar o testador é simples:

1. Escolha o tipo de seletor (XPath ou Seletor CSS)
2. Digite seu HTML no campo 'Entrada HTML'
3. Digite sua expressão XPath ou seletor CSS
4. Clique em 'Testar Seletor' para ver correspondências
5. Veja a contagem de elementos correspondentes e HTML destacado

A ferramenta irá:
- Validar a sintaxe do seu seletor
- Mostrar quantos elementos corresponderam
- Destacar elementos correspondentes no HTML
- Exibir o conteúdo de texto dos elementos correspondentes

XPath vs Seletor CSS - Qual devo usar?

Ambos têm seus pontos fortes:

Seletores CSS:
- Sintaxe mais simples
- Desempenho mais rápido
- Mais familiar para desenvolvedores web
- Melhor para seleções baseadas em estilo
- Limitado à navegação descendente

XPath:
- Mais poderoso e flexível
- Pode navegar para cima (seleção de pai)
- Melhor para condições complexas
- Pode selecionar por conteúdo de texto
- Pode usar operadores lógicos (e, ou)
- Melhor para documentos XML

Recomendação:
- Use seletores CSS quando possível (mais simples, mais rápido)
- Use XPath para seleções complexas ou quando precisar de navegação de pai

Expressões XPath Comuns

Padrões XPath úteis:

Básico:
- //tagname - Todos os elementos com tag
- //div - Todos os elementos div
- //div[@class='name'] - Div com classe específica
- //div[@id='main'] - Div com ID específico

Atributos:
- //a[@href] - Elementos com atributo
- //img[@alt='Logo'] - Valor de atributo exato
- //a[contains(@href, 'example')] - Correspondência parcial

Texto:
- //p[text()='Olá'] - Correspondência de texto exata
- //div[contains(text(), 'mundo')] - Correspondência de texto parcial

Navegação:
- //div[@id='main']//p - Todos os descendentes p
- //div[@id='main']/p - Filhos p diretos
- //p[1] - Primeiro elemento p
- //p[last()] - Último elemento p

Seletores CSS Comuns

Padrões de seletor CSS úteis:

Básico:
- div - Todos os elementos div
- .classname - Elementos com classe
- #idname - Elemento com ID
- div.classname - Div com classe específica

Atributos:
- [href] - Elementos com atributo
- a[href='url'] - Valor de atributo exato
- a[href*='example'] - Correspondência parcial
- a[href^='https'] - Começa com
- a[href$='.pdf'] - Termina com

Combinadores:
- div p - Todos os descendentes p de div
- div > p - Filhos p diretos de div
- div + p - Irmão p seguinte após div
- div ~ p - Todos os irmãos p após div

Pseudo-classes:
- p:first-child - Primeiro elemento filho
- p:last-child - Último elemento filho
- p:nth-child(2) - Segundo filho
- a:not(.active) - Não corresponde à classe

Recursos Principais

• Testar expressões XPath
• Testar seletores CSS
• Alternar entre modos XPath e seletor CSS
• Validar sintaxe do seletor
• Mostrar contagem de correspondências
• Destacar elementos correspondentes no HTML
• Exibir conteúdo do elemento correspondente
• Suportar HTML aninhado complexo
• Teste de seletor em tempo real
• Copiar seletores e resultados
• Suporte a modo escuro
• Processamento 100% do lado do cliente - dados nunca saem do navegador
• Funciona offline após carregamento inicial
• Design responsivo para celular