El Buscador de Rutas DOM te permite pasar el mouse sobre cualquier elemento de una página para revelar su selector CSS único, selector corto, XPath y un fragmento de querySelector listo para pegar. Haz clic para bloquear el elemento, luego navega con los botones de Padre/Hijo/Hermano. Esencial para usuarios de Selenium, Puppeteer, Playwright y Cypress.
Escribir pruebas de automatización, web scrapers o bookmarklets significa escribir selectores — pero determinar un selector estable y único para un elemento específico es tedioso. Abres DevTools, inspeccionas, haces clic derecho, copias el selector y esperas que el resultado sea realmente único y estable. El Buscador de Rutas DOM hace esto con un solo clic. Activa la herramienta y pasa el mouse sobre cualquier elemento de la página — se resaltará en púrpura mientras te mueves. Haz clic para bloquearlo, y el panel se llenará con cuatro formatos de selector: un selector CSS único basado en la ruta, un selector corto (etiqueta + clases o id), un XPath absoluto y un fragmento document.querySelector('...') pre-envuelto listo para pegar en un script. Una vez bloqueado, puedes navegar por el árbol DOM con los botones de Padre / Primer hijo / Hermano anterior / Hermano siguiente sin perder el foco. Los atributos data-testid se detectan y priorizan cuando están presentes — ideal para Playwright/Cypress que los usan como anclas. La herramienta también muestra la etiqueta, el id, las clases, el tamaño del cuadro delimitador y las propiedades de pantalla/posición para un contexto rápido.
Mueve tu mouse sobre la página para ver los elementos resaltados en púrpura. Haz clic para bloquear — no se necesita el Inspector de DevTools.
Ruta CSS única, selector corto, XPath absoluto y fragmento de querySelector envuelto. Elige el que mejor se adapte a tus herramientas.
Una vez bloqueado, usa los botones de Padre / Primer hijo / Anterior / Siguiente para moverte por el DOM sin tener que volver a elegir.
Cada selector tiene su propio botón de Copiar. Captura el formato que necesita tu script y pégalo directamente en tu prueba o scraper.
Muestra la etiqueta, id, clases, tamaño, pantalla y posición — resumen rápido sin volver a inspeccionar.
Si el elemento tiene un id, el CSS único usa #id. Si hay un data-testid presente, se muestra para el uso de Playwright/Cypress.
Elige el elemento bajo prueba, copia su selector y pégalo en tu código de prueba — no más adivinanzas con rutas únicas.
Encuentra el selector estructural para los elementos de una lista en un objetivo de raspado. Usa el selector corto o basado en la ruta según las necesidades de estabilidad.
Bloquea un elemento y copia su ruta para investigar por qué no se está aplicando el CSS — el selector único muestra la ubicación completa del árbol del elemento.
Copia el fragmento pre-envuelto document.querySelector(...) directamente en la consola de DevTools para una depuración interactiva rápida.
Al auditar la accesibilidad, usa XPath para enviar elementos a axe-core u otras herramientas de a11y que esperan referencias XPath.
Haz clic en el ícono de Path Finder en el dock de DevSuite Pro. La herramienta se activa en modo de selección inmediatamente.
Mueve el mouse sobre la página — cada elemento se resalta en púrpura a medida que pasas sobre él. Desplázate según sea necesario para encontrar tu objetivo.
Haz clic en el elemento que desees. La selección se detiene y el panel se llena con formatos de selector, contexto y botones de copia.
Usa los botones Padre/Hijo/Hermano para refinar la selección, o haz clic en Elegir Elemento para comenzar la selección por mouse de nuevo.
Haz clic en Copiar junto al formato que necesites (CSS, XPath o querySelector). Pega directamente en tu prueba, scraper o consola.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
