¿Cómo verificar una expresión XPath en la herramienta Chrome Developers o Firebug de Firefox?
¿Cómo puedo verificar mi XPath?
Estoy usando la herramienta Chrome Developers para inspeccionar los elementos y formar mi XPath. Lo verifico usando el complemento de Chrome XPath Checker, sin embargo no siempre me da el resultado. ¿Cuál es una mejor manera de verificar mi XPath?
También intenté usar Firebug para inspeccionar el error y también usar FirePath para verificar. Pero, ¿Firepath también verifica el XPath?
Mi última opción sería utilizar Selenium WebDriver para confirmar mi XPath.
Cromo
Esto se puede lograr mediante tres enfoques diferentes (consulte el artículo de mi blog aquí para obtener más detalles):
- Buscar en
Elementsel panel como a continuación - Ejecutar
$x()y$$()en panel, como se muestra en la respuestaConsolede Lawrence - Extensiones de terceros (no son realmente necesarias en la mayoría de los casos, podrían ser excesivas)
Así es como se busca XPath en el Elementspanel:
- Presione F12para abrir Chrome Developer Tool
- En el panel "Elementos", presione Ctrl+F
- En el cuadro de búsqueda, escriba XPath o CSS Selector; si se encuentran elementos, se resaltarán en amarillo.
Firefox (desde la versión 75)
Desde FF 75 es posible utilizar consultas XPath sin formato sin expresiones XPath de evaluación; consulte la documentación para obtener más información.
Firefox (versión anterior 75)
- Seleccione "Consola web" en el submenú Desarrollador web en el menú de Firefox (o en el menú Herramientas si muestra la barra de menú o está en Mac OS X)
o presione el método abreviado de teclado Ctrl+ Shift+ K( Command+ Option+ Ken OS X). En la línea de comando en la parte inferior use lo siguiente:
$(): Devuelve el primer elemento que coincide. Equivaledocument.querySelector()o llama a la$función en la página, si existe.$$(): Devuelve una matriz de nodos DOM que coinciden. Esto es como fordocument.querySelectorAll(), pero devuelve una matriz en lugar de un archivoNodeList.$x(): Evalúa una expresión XPath y devuelve una matriz de nodos coincidentes.
Firefox (versión anterior 49)
- Instalar Firebug
- Instalar ruta de fuego
- Presione F12para abrir Firebug
- Cambiar al
FirePathpanel - En el menú desplegable, seleccione XPathor CSS
- Escribe para localizar
Puede abrir DevTools en Chrome con CTRL+IWindows (o CMD+IMac) y Firefox con F12, luego seleccionar la Consolepestaña y verificar XPath escribiendo $x("your_xpath_here").
Esto devolverá una matriz de valores coincidentes. Si está vacío, sabrá que no hay ninguna coincidencia en la página.
Firefox v66 (abril de 2019):
Chrome v69 (abril de 2019):
Usando Chrome u Opera
sin ningún complemento, sin escribir ningún carácter de sintaxis XPath
- haga clic derecho en el elemento requerido, luego "inspeccionar"
- Haga clic derecho en la etiqueta del elemento resaltado, elija Copiar → Copiar XPath .
;)
Este es un método que utilizo para visualizar rápidamente los resultados XPATH dentro de una página web HTML, que a partir de HTML5 es técnicamente un documento XML (ver nota).
Abra DevTools (F12)
Vaya a Consola y escriba lo siguiente:
$x("//p[a]").forEach(myFancyResult => myFancyResult.style.backgroundColor = 'yellow');
//p[a]es una expresión XPath que selecciona todos los elementos <p> que contienen elementos <a>. El resultado es una matriz que se introduce en el método forEach, a partir del cual modificamos los elementos backgroundColor.
Nota: El método es problemático en un documento XML abierto localmente porque el navegador aplicará una hoja de estilo predeterminada para ver el documento XML con bonitos colores y le permitirá contraer y expandir el documento; Esto efectivamente envuelve el documento XML en etiquetas div o span, lo que estropea el documento XML original, haciendo que esta técnica sea algo inútil.
