Probador XPath y Selector CSS

Probador XPath y Selector CSS - Probar Selectores y XPath Online

Una potente herramienta para probar expresiones XPath y selectores CSS en contenido HTML. Vea instantáneamente qué elementos coinciden con sus selectores con resaltado y resultados detallados. Perfecto para web scraping, pruebas de automatización y aprender selectores.

¿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

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
• 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