Probador XPath y Selector CSS

Probador XPath y Selector CSS - Probar Selectores y XPath Online

Los selectores son el sistema de direccionamiento de la web: cada inspector de navegador, cada scraper (BeautifulSoup, Scrapy, Cheerio, Playwright, Selenium), cada framework de pruebas end-to-end, cada regla CSS y cada consulta jQuery se resuelven en última instancia a una expresión XPath o un selector CSS sobre un árbol DOM analizado. Escribir un selector que coincida exactamente con los nodos que quiere — ni más, ni menos — es más difícil de lo que parece: el HTML real es desordenado, las clases e IDs cambian entre builds, y el mismo 'elemento' lógico puede alcanzarse por una docena de caminos diferentes de robustez variable. Este probador cierra el bucle de retroalimentación: pegue el HTML real que apunta (del 'Ver código fuente' de su navegador, una respuesta fetch o cualquier documento), escriba o refine su selector, y vea al instante cuántos elementos coinciden más el HTML renderizado exacto de cada coincidencia. Cambie entre XPath 1.0 (el estándar W3C soportado por todos los navegadores vía document.evaluate y todas las bibliotecas de scraping) y selectores CSS Nivel 3 (la sintaxis usada por querySelectorAll, operaciones tipo getElementsByClassName y la mayoría de APIs de scraping modernas) con un clic. Úselo para depurar un locator roto de Selenium, prototipar un campo de Scrapy, validar una regla de bloqueador de contenido, aprender la diferencia entre combinadores descendientes e hijos, o simplemente responder '¿por qué no coincide mi selector?' sin lanzar un navegador headless completo.

¿Qué es XPath?

XPath (Lenguaje de Ruta XML) es un lenguaje de consulta para seleccionar nodos de documentos XML/HTML. Se usa comúnmente para:

- Web scraping
- Pruebas automatizadas (Selenium, Puppeteer)
- Extracción de datos de HTML
- Procesamiento XML

Ejemplos de expresiones XPath:
- //div[@class='title'] - Todos los elementos div con clase 'title'
- //a[@href] - Todos los enlaces con atributo href
- //p[1] - Primer elemento de párrafo
- //div[@id='main']//p - Todos los p dentro de div con id 'main'

XPath es potente para selecciones complejas y navegar estructura de documento.

¿Qué son los Selectores CSS?

Los Selectores CSS son patrones usados para seleccionar elementos HTML basados en sus atributos, clases, IDs y relaciones. Se usan para:

- Estilizar elementos con CSS
- Seleccionar elementos en JavaScript
- Web scraping
- Pruebas automatizadas

Ejemplos de selectores CSS:
- div.title - Div con clase 'title'
- #header - Elemento con id 'header'
- a[href] - Todos los enlaces con atributo href
- div > p - Hijos p directos de div
- p:first-child - Primer elemento p

Los selectores CSS son más simples que XPath para la mayoría de selecciones comunes.

¿Cómo uso este probador?

Usar el probador es simple:

1. Elija tipo de selector (XPath o Selector CSS)
2. Ingrese su HTML en el campo 'Entrada HTML'
3. Ingrese su expresión XPath o selector CSS
4. Haga clic en 'Probar Selector' para ver coincidencias
5. Vea recuento de elementos coincidentes y HTML resaltado

La herramienta:
- Validará su sintaxis de selector
- Mostrará cuántos elementos coincidieron
- Resaltará elementos coincidentes en el HTML
- Mostrará el contenido de texto de elementos coincidentes

XPath vs Selector CSS - ¿Cuál debo usar?

Ambos tienen sus fortalezas:

Selectores CSS:
- Sintaxis más simple
- Rendimiento más rápido
- Más familiar para desarrolladores web
- Mejor para selecciones basadas en estilos
- Limitado a navegación descendente

XPath:
- Más potente y flexible
- Puede navegar hacia arriba (selección de padre)
- Mejor para condiciones complejas
- Puede seleccionar por contenido de texto
- Puede usar operadores lógicos (and, or)
- Mejor para documentos XML

Recomendación:
- Use selectores CSS cuando sea posible (más simple, más rápido)
- Use XPath para selecciones complejas o cuando necesite navegación de padre

Expresiones XPath Comunes

Patrones XPath útiles:

Básico:
- //tagname - Todos los elementos con etiqueta
- //div - Todos los elementos div
- //div[@class='name'] - Div con clase específica
- //div[@id='main'] - Div con ID específico

Atributos:
- //a[@href] - Elementos con atributo
- //img[@alt='Logo'] - Valor de atributo exacto
- //a[contains(@href, 'example')] - Coincidencia parcial

Texto:
- //p[text()='Hello'] - Coincidencia exacta de texto
- //div[contains(text(), 'world')] - Coincidencia parcial de texto

Navegación:
- //div[@id='main']//p - Todos los descendientes p
- //div[@id='main']/p - Hijos p directos
- //p[1] - Primer elemento p
- //p[last()] - Último elemento p

¿Cómo escribo un selector que sobreviva a rediseños del sitio?

Prefiera señales estables sobre frágiles. (1) Use atributos semánticos que es poco probable que el desarrollador cambie: data-testid, data-cy, name, aria-label, role — típicamente se añaden para pruebas y sobreviven a rediseños visuales. (2) Use contenido de texto con XPath cuando la etiqueta visible es el contrato: //button[normalize-space(.)='Agregar al carrito'] sobrevive aunque cambien todos los nombres de clase. (3) Evite clases auto-generadas de frameworks como 'css-xn8q5e' de styled-components o 'jss123' de MUI — se regeneran en cada build. (4) Evite cadenas profundas de ancestros: 'div > div > div > div > p' se romperá en el momento que se añada o elimine un div de layout. (5) Evite índices posicionales ('//tr[3]') a menos que la posición sea el significado. (6) Cuando se vea forzado a usar una clase CSS, elija la más semánticamente significativa (.product-price), no la más específica (.text-sm.font-bold.text-red-500). Regla práctica: un buen selector se lee como inglés para otro desarrollador.

¿Por qué mi XPath funciona en el navegador pero falla en Scrapy o Selenium?

Tres razones comunes. (1) Contenido renderizado por JavaScript: los navegadores ejecutan el JS de la página antes de inspeccionarla, así que elementos DOM como precios de productos o comentarios pueden existir en DevTools pero estar ausentes del HTML crudo que Scrapy/requests obtiene. Solución: use un navegador headless (Playwright, Selenium con Chrome) o busque una API JSON que la página llama. (2) Espacios de nombres por defecto: documentos XHTML y SVG tienen atributos xmlns que le fuerzan a registrar un namespace en bibliotecas XPath como lxml. El navegador es permisivo; lxml es estricto. Solución: use local-name() — //*[local-name()='div'] — para evitar namespaces. (3) Versión XPath: document.evaluate del navegador soporta solo XPath 1.0, pero algunas bibliotecas (lxml, Saxon) soportan funciones XPath 2.0+ como ends-with(), matches(), tokenize(). Si escribió su XPath contra lxml 2.0 y lo probó en DevTools, el navegador puede reportarlo inválido. Este probador usa XPath 1.0 (como los navegadores) así que los resultados coinciden con lo que ven Selenium/Puppeteer.

¿Puedo exportar mi selector a código de Scrapy, Selenium o Playwright?

Sí. Una vez que su selector es válido, abra el panel 'Copiar como código' y elija su biblioteca. El probador genera la llamada exacta y correctamente escapada para el modo actual (XPath o CSS):

- Scrapy: response.xpath("...").getall() o response.css("...").getall()
- lxml: tree.xpath("...") o tree.cssselect("...")
- Selenium (Python): driver.find_elements(By.XPATH, "...") o By.CSS_SELECTOR
- Playwright (Python y JS): page.locator("xpath=...") o page.locator("...")
- JS/DOM: document.evaluate(...) para XPath o document.querySelectorAll('...') para CSS

La herramienta elige el tipo de comilla que NO se usa dentro de su selector y escapa el resto, así evita los errores clásicos de By.CSS_SELECTOR vs By.XPATH y de escape de comillas. Es la última parada antes de pegar en su scraper o prueba.

¿Soporta funciones XPath 2.0 como matches() o ends-with()?

No. Este probador usa el document.evaluate del navegador, que es solo XPath 1.0 — el mismo motor que usan Selenium y Puppeteer sobre una página real. Las expresiones que dependen de funciones XPath 2.0+ lanzarán 'Expresión XPath inválida' aquí:

- matches(cadena, patrón) — regex de XPath 2.0, NO disponible
- ends-with(cadena, sufijo) — XPath 2.0, NO disponible (use un truco de substring invertido o contains())
- tokenize(), replace(), lower-case(), upper-case() — XPath 2.0, NO disponibles

Alternativas en XPath 1.0 que SÍ funcionan: contains(), starts-with(), normalize-space(), translate() (para cambiar mayúsculas), substring(), string-length() y el truco local-name() para namespaces. Si una expresión funciona en lxml o Saxon pero falla aquí, casi seguro usó una función 2.0 — reescríbala en 1.0 para que coincida con lo que ejecutan los navegadores y Selenium.

Selectores CSS Comunes

Patrones de selector CSS útiles:

Básico:
- div - Todos los elementos div
- .classname - Elementos con clase
- #idname - Elemento con ID
- div.classname - Div con clase específica

Atributos:
- [href] - Elementos con atributo
- a[href='url'] - Valor de atributo exacto
- a[href*='example'] - Coincidencia parcial
- a[href^='https'] - Comienza con
- a[href$='.pdf'] - Termina con

Combinadores:
- div p - Todos los descendientes p de div
- div > p - Hijos p directos de div
- div + p - Hermano p siguiente después de div
- div ~ p - Todos los hermanos p después de div

Pseudo-clases:
- p:first-child - Primer elemento hijo
- p:last-child - Último elemento hijo
- p:nth-child(2) - Segundo hijo
- a:not(.active) - No coincide con clase

Características Clave

• Probar expresiones XPath
• Probar selectores CSS
• Cambiar entre modos XPath y selector CSS
• Validar sintaxis de selector
• Mostrar recuento de coincidencias
• Resaltar elementos coincidentes en HTML
• Copiar como código para Scrapy, lxml, Selenium, Playwright y JS/DOM
• Mostrar contenido de elemento coincidente
• Soporte de HTML anidado complejo
• Pruebas de selector en tiempo real
• Copiar selectores y resultados
• Soporte de modo oscuro
• Procesamiento 100% del lado del cliente - los datos nunca salen de su navegador
• Funciona offline después de carga inicial
• Diseño responsive amigable con móviles