¿Cómo verificar una expresión XPath en la herramienta Chrome Developers o Firebug de Firefox?


179

¿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 XPath Checker de Chrome, 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 usar Selenium WebDriver para confirmar mi XPath.

Respuestas:


367

Cromo

Esto se puede lograr mediante tres enfoques diferentes (consulte el artículo de mi blog aquí para obtener más detalles):

  • Buscar en el Elementspanel como abajo
  • Ejecutar $x()y $$()en el Consolepanel, como se muestra en la respuesta de Lawrence
  • Extensiones de terceros (no es realmente necesario en la mayoría de los casos, podría ser una exageración)

Así es como busca XPath en el Elementspanel:

  1. Presione F12para abrir Chrome Developer Tool
  2. En el panel "Elementos", presione Ctrl+F
  3. En el cuadro de búsqueda, escriba XPath o CSS Selector, si se encuentran elementos, se resaltarán en amarillo.

ingrese la descripción de la imagen aquí

Firefox (desde la versión 75)

Como FF 75 es posible usar una consulta xpath sin procesar sin expresiones xpath de evaluación, consulte la documentación para obtener más información.

Firefox (versión anterior 75)

  1. Seleccione "Consola web" en el submenú Desarrollador web en el menú de Firefox (o el menú Herramientas si muestra la barra de menú o está en Mac OS X)
    o presione el atajo de teclado Ctrl+ Shift+ K( Command+ Option+ Ken OS X).
  2. En la línea de comando en la parte inferior, use lo siguiente:

    • $(): Devuelve el primer elemento que coincide. Equivalente document.querySelector()o llama a la $función en la página, si existe.

    • $$(): Devuelve una matriz de nodos DOM que coinciden. Esto es como para document.querySelectorAll(), pero devuelve una matriz en lugar de a NodeList.

    • $x(): Evalúa una expresión XPath y devuelve una matriz de nodos coincidentes.


Firefox (versión anterior 49)

  1. Instalar Firebug
  2. Instalar Firepath
  3. Presione F12para abrir Firebug
  4. Cambiar al FirePathpanel
  5. En el menú desplegable, seleccione XPathor CSS
  6. Escriba para ubicar

ingrese la descripción de la imagen aquí


2
Solo una advertencia en XPath y los navegadores, ya que esto genera mucha confusión: stackoverflow.com/questions/18241029/…
Jens Erat

@JensErat: Muy buen punto. Para otros que leen este comentario, como ya se mencionó en esa pregunta, Selenium no se ve afectado porque impulsa los navegadores y utiliza la misma tecnología de evaluación de JavaScript subyacente con las herramientas de desarrollo.
Yi Zeng

1
@ user1177636: ¿Qué software usaste para generar estos GIF?
JacekM

Si necesita un analizador local para XQuery también he encontrado BaseX: basex.org/products
tuxErrante

44
La respuesta necesita una actualización para Firefox. Lamentablemente, Firebug está obsoleto y se ha fusionado con las Herramientas para desarrolladores. Actualmente puede probar la expresión de xpath en la consola, por ejemplo$("//div")
derloopkat

53

Puede abrir DevTools en Chrome con CTRL+IWindows (o CMD+IMac) y Firefox con F12, luego seleccionar la Consolepestaña) y verificar el XPath escribiendo $x("your_xpath_here").
Esto devolverá una matriz de valores coincidentes. Si está vacío, sabe que no hay coincidencias en la página.

Firefox v66 (abril de 2019):

Firefox v66 consola xpath

Chrome v69 (abril de 2019):

Chrome v69 consola xpath


1
Este método no es ideal, pero es bueno saberlo, ya que cualquier expresión xpath que escriba en esa consola puede ser ejecutada por un JavascriptExecutor en Selenium. A veces puedes usar eso como una solución alternativa, ¿tal vez cuando los eventos nativos de Firefox están deshabilitados?
djangofan

1
@djangofan, ¿qué quieres decir? Según esa lógica, ambas respuestas, aunque correctas, son innecesarias para su lógica.
Arran

1
@bosnjak cuando intenté esto en la consola $x("//input[@name='q']")que obtuveVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
YasserKhalil

@YasserKhalil, ¿qué navegador está utilizando, qué versión? ¿En qué sitio estás haciendo esto?
bosnjak

16

Mediante el uso de Chrome u Opera

sin complementos, sin escribir ningún carácter de sintaxis XPath

  1. haga clic derecho en el elemento requerido, luego "inspeccionar"
  2. haga clic derecho en la etiqueta del elemento resaltado, elija copiar> Copiar Xpath.

;)

ingrese la descripción de la imagen aquí


2
Para Chrome, esta es la MEJOR solución que he visto hasta ahora. Gracias por compartir. Hace que sea más fácil confirmar en Chrome cuando no deseo usar Firefox.
Automatizado

He usado esto con gran beneficio. Pero el gran problema es que a veces el menú contextual está deshabilitado o sobrescrito. Entonces tienes que confiar en los otros enfoques.
ouflak

1
Esto realmente no responde la pregunta. No está verificando un xpath existente, está generando uno. El que Chrome genera a menudo es feo y muy frágil cuando existe una solución mucho mejor.
Mayor mayor

6

Aquí está la extensión ChroPath para Chrome que tiene muchas características avanzadas en comparación con FirePath. Siga los pasos a continuación:

  1. Abra el panel de devtools.
  2. Haga clic derecho en cualquier lugar de la página web.
  3. Haga clic en inspeccionar.
  4. En el lado derecho de la pestaña Elementos, haga clic en la pestaña ChroPath.

Aquí obtendrá el XPath / CSS y también puede editarlo y evaluarlo.

Descargar complemento


1
La extensión ChroPath todavía funciona en 2020. Gracias. Gran ayuda
Burbujas

1

Otra opción para verificar su xpath es usar selenio IDE.

  1. Instalar Firefox Selenium IDE
  2. Abra su aplicación en Firefox y abra IDE
  3. En IDE, en una nueva línea, pegue su xpath en el destino y haga clic en Buscar. El elemento correspondiente se resaltaría en su aplicación.

Selenio IDE


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.