Testador de XPath e Seletor CSS

Teste seletores XPath 1.0 e CSS3 em qualquer HTML/XML — contagem de correspondências instantânea, saída destacada. Para web scraping (Scrapy, Selenium, Puppeteer).

Tem feedback? Reporte bugs, sugira recursos ou compartilhe suas ideias — lemos todos

Testador XPath e Seletor CSS - Testar Seletores e XPath Online

Seletores são o sistema de endereçamento da web: todo inspetor de navegador, todo web scraper (BeautifulSoup, Scrapy, Cheerio, Playwright, Selenium), todo framework de testes end-to-end, toda regra CSS e toda consulta jQuery acaba se resolvendo em uma expressão XPath ou um seletor CSS contra uma árvore DOM analisada. Escrever um seletor que combine exatamente com os nós que você quer — não mais, não menos — é mais difícil do que parece: HTML no mundo real é bagunçado, classes e IDs mudam entre builds, e o mesmo 'elemento' lógico pode ser alcançado por uma dúzia de caminhos diferentes com robustez variada. Este testador fecha o loop de feedback: cole o HTML real que você está mirando (do 'Ver Fonte' do seu navegador, uma resposta fetch ou qualquer documento), digite ou refine seu seletor, e veja instantaneamente quantos elementos correspondem mais o HTML renderizado exato de cada correspondência. Alterne entre XPath 1.0 (o padrão W3C suportado por todo navegador via document.evaluate e toda biblioteca de scraping) e seletores CSS Nível 3 (a sintaxe usada por querySelectorAll, operações tipo getElementsByClassName e a maioria das APIs de scraping modernas) com um clique. Use-o para depurar um locator quebrado do Selenium, prototipar um campo Scrapy, validar uma regra de bloqueador de conteúdo, aprender a diferença entre combinadores descendentes e filhos, ou simplesmente responder 'por que meu seletor não está correspondendo?' sem disparar um navegador headless completo.

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

Testador de XPath e Seletor CSS — Teste seletores XPath 1.0 e CSS3 em qualquer HTML/XML — contagem de correspondências instantânea, saída destacada. Para — **Testador de XPath e Seletor CSS**

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

Como escrever um seletor que sobrevive a redesigns de sites?

Prefira sinais estáveis a frágeis. (1) Use atributos semânticos que o desenvolvedor é improvável de mudar: data-testid, data-cy, name, aria-label, role — tipicamente adicionados para testes e sobrevivem a redesigns visuais. (2) Use conteúdo de texto com XPath quando o rótulo visível é o contrato: //button[normalize-space(.)='Adicionar ao carrinho'] sobrevive mesmo que todos os nomes de classe mudem. (3) Evite classes auto-geradas de frameworks como 'css-xn8q5e' do styled-components ou 'jss123' do MUI — elas se regeneram a cada build. (4) Evite cadeias profundas de ancestrais: 'div > div > div > div > p' quebrará no momento em que um div de layout for adicionado ou removido. (5) Evite índices posicionais ('//tr[3]') a menos que a posição seja o significado. (6) Quando forçado a usar uma classe CSS, escolha a mais semanticamente significativa (.product-price), não a mais específica (.text-sm.font-bold.text-red-500). Regra prática: um bom seletor lê como inglês para outro desenvolvedor.

Por que meu XPath funciona no navegador mas falha em Scrapy ou Selenium?

Três razões comuns. (1) Conteúdo renderizado por JavaScript: navegadores executam o JS da página antes de você inspecionar, então elementos DOM como preços de produtos ou comentários podem existir no DevTools mas estar ausentes do HTML bruto que Scrapy/requests obtém. Solução: use um navegador headless (Playwright, Selenium com Chrome) ou procure por uma API JSON que a página chama. (2) Namespaces padrão: documentos XHTML e SVG têm atributos xmlns que o forçam a registrar um namespace em bibliotecas XPath como lxml. O navegador é permissivo; lxml é estrito. Solução: use local-name() — //*[local-name()='div'] — para contornar namespaces. (3) Versão XPath: document.evaluate dos navegadores suporta apenas XPath 1.0, mas algumas bibliotecas (lxml, Saxon) suportam funções XPath 2.0+ como ends-with(), matches(), tokenize(). Se você escreveu seu XPath contra lxml 2.0 e testou no DevTools, o navegador pode reportá-lo inválido. Este testador usa XPath 1.0 (como navegadores) então resultados combinam com o que Selenium/Puppeteer veem.

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