test - ¿Hay alguna manera de obtener el xpath en google chrome?

validate css selector in chrome

Question

Tengo una página web que quiero usar con YQL. Pero necesito la xpath de un elemento específico. Puedo verlo en el área de herramientas de depuración para google chrome pero no veo una manera de copiar esa xpath.

¿Hay una manera de copiar un xpath completo?

Answer 1

A partir de la última actualización para Chrome, ahora puede hacer clic en cualquier elemento en el inspector de elementos y copiar el XPath al portapapeles.

Answer 2

En Firebug en Firefox, puede hacer clic derecho en un elemento después de inspeccionarlo y elegir Copiar XPath. No pude hacer que ChromYQLip funcione correctamente.

Answer 3

Google Chrome proporciona una herramienta de depuración incorporada llamada " Chrome DevTools " fuera de la caja, que incluye una característica útil que puede evaluar o validar los selectores de XPath / CSS sin extensiones de terceros.

Esto se puede hacer de dos maneras:

Utilice la función de búsqueda dentro del panel Elementos para evaluar los selectores XPath / CSS y resaltar los nodos coincidentes en el DOM. Ejecute los tokens $ x ("some_xpath") o $$ ("css-selectores") en el panel de la Consola, que se evaluarán y validarán.

Desde el panel de elementos

1. Presione F12 para abrir Chrome DevTools.

2. El panel de elementos debería estar abierto por defecto.

3. Presione Ctrl + F para habilitar la búsqueda de DOM en el panel.

4. Escriba los selectores XPath o CSS para evaluar.

5. Si hay elementos coincidentes, se destacarán en DOM. Sin embargo, si hay cadenas coincidentes dentro de DOM, también se considerarán como resultados válidos. Por ejemplo, el encabezado selector de CSS debe coincidir con todo (CSS en línea, scripts, etc.) que contiene el encabezado de la palabra, en lugar de coincidir solo con los elementos.

Desde el panel de la consola

1. Presione F12 para abrir Chrome DevTools.

2. Cambia al panel de la consola.

3. Escriba XPath como $x(".//header") para evaluar y validar.

4. Escriba selectores de CSS como $$("header") para evaluar y validar.

5. Verifique los resultados devueltos por la ejecución de la consola.

Si los elementos coinciden, se devolverán en una lista. De lo contrario, se muestra una lista vacía [].

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

Si el selector XPath o CSS no es válido, se mostrará una excepción en texto rojo. Por ejemplo:

$x(".//header/")
SyntaxError: Failed to execute ''evaluate'' on ''Document'': The string ''.//header/'' is not a valid XPath expression.

$$("header[id=]")
SyntaxError: Failed to execute ''querySelectorAll'' on ''Document'': ''header[id=]'' is not a valid selector.

Answer 4

Haga clic derecho en el nodo => "Copiar XPath"

Answer 5

La extensión XPath Helper hace lo que necesita: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

Answer 6

Ligeramente OT, pero quizás útil: en Mac Chrome, aunque no puede copiar el xpath fuera del cuadro de búsqueda en el panel de herramientas de Desarrollo (en su lugar, la copia toma el nodo como HTML), puede arrastrar y soltar el texto en un editor externo.

Answer 7

No se necesita ninguna extensión en Chrome ahora. Haga clic derecho en cualquier elemento para el que desee xpath y haga clic en "Inspeccionar elemento" y luego nuevamente dentro del Inspector, haga clic derecho en el elemento y haga clic en "Copiar Xpath".

Answer 8

Probé casi todas las extensiones disponibles y encontré que lo siguiente es uno de los mejores.

Enlace de la extensión de ChroPath

Al igual que FirePath, esta extensión le da directamente el Xpath cuando hace clic en Inspeccionar.

Answer 9

Simplemente haga clic con el botón derecho en el elemento para el que desea la xpath y verá un elemento del menú para copiarlo. Puede que esto no haya existido cuando el OP hizo su publicación, pero ciertamente está ahí ahora.

Answer 10

Te diré una fórmula simple para encontrar xpath de cualquier elemento:

1- Abrir sitio en el navegador

2- Seleccionar elemento y hacer clic derecho sobre él.

3- Haga clic en la opción de elemento de inspección

4- Clic derecho en html seleccionado.

5- Elija la opción para copiar Xpath. Utilícelo donde quiera que lo necesite.

Este enlace de video será útil para usted. http://screencast.com/t/afXsaQXru

Nota: para las opciones avanzadas de xpath, debe conocer las expresiones regulares o el patrón de su html.

Answer 11

Todas las respuestas anteriores son correctas aquí es otra forma con captura de pantalla también.

Desde Chrome:

1. Haga clic derecho en "inspeccionar" en el elemento que está tratando de encontrar la xpath
2. Haga clic derecho en el área resaltada en la consola.
3. Ir a Copiar Xpath

Answer 12

Use esta extensión, genera xpaths basados ​​en id o clase, que probablemente sea lo que quiere usar.

Haga clic en el icono del navegador, el panel se muestra en la esquina derecha de la página, luego haga clic en Iniciar inspección y luego haga clic en cualquier elemento para obtener su xpath.

Generador de XPath

Equivalente a la solución de Chrome Extension anterior se puede conectar al proyecto Java jar: mientras que Chrome proporciona tanto XPath como el selector, ambos tienden por defecto a atribuir "id" u otros elementos que cambian dinámicamente. La pregunta anterior está dirigida por la necesidad de confiar en atributos persistentes. https://www.burlingtonvisionandlab.com/Downloads/TuSqK231LashowXPathSE7HTML/showXPathSE1_7Table.html

El tarro gratuito descargable mostrará una ruta más larga con los atributos de selección de alcance para elegir.

Answer 13

xpathOnClick tiene lo que está buscando: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

Sin embargo, lea los comentarios, en realidad se necesitan tres clics para obtener la xpath.

Answer 14

Puedes usar $x en la consola javascript de Chrome. No se necesitan extensiones.

ej: $x("//img")

También el cuadro de búsqueda en el inspector web aceptará xpath.