2010-06-12 33 views
258

Ho una pagina web che voglio usare con YQL. Ma ho bisogno del xpath di un oggetto specifico. Posso vederlo nell'area degli strumenti di debug per google chrome ma non vedo un modo per copiare quel xpath.C'è un modo per ottenere xpath in google chrome?

C'è un modo per copiare un percorso completo o un'estensione per farlo?

+2

Se siete disposti a installare Firefox in aggiunta a Chrome, è possibile utilizzare il il [xpather] (https://addons.mozilla.org/en-US/firefox/addon/1192 /) estensione. –

+3

Se è disposto ad installare Firefox, è già integrato in Firebug. – Verhogen

+2

@verhogen: non ero a conoscenza di questo, anche se sto usando Firebug su base quasi giornaliera. Nel caso in cui qualcun altro sia interessato a maggiori informazioni, eccolo: http://blog.browsermob.com/2009/04/test-your-selenium-xpath-easily-with-firebug/ –

risposta

2

In Firebug in Firefox, è possibile fare clic destro su un elemento dopo l'ispezione di esso, e scegliere Copia XPath. ChromYQLip non funzionava correttamente.

8

xpathOnClick ha quello che stai cercando: https://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

leggere i commenti, però, ci vogliono in realtà tre click per ottenere il XPath.

+0

Non sembra funzionare su ubuntu 10.04 con chrome 12.0.742.124, installa ma quando si fa clic sull'icona xpath, quindi fare clic sulla pagina (la prima volta per chiudere il popup xpath), quindi fare clic su un elemento di pagina (per mostrare xpath in js console) .... niente si presenta in console. testato sul sito plug-in – xiatica

+0

Non funziona affatto su chrome 18 – NiKo

23

di estensione XPath Helper fa quello che vi serve: https://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

+0

Buon add-on, funziona benissimo. –

+0

Qualcuno conosce i comandi da tastiera per questo su ubuntu? crtl-shift-x e command-shift-x non sembrano fare nulla – xiatica

+1

@xiatica, hai provato in una scheda nuova/aggiornata? Si noti che l'estensione non funzionerà nelle schede che erano aperte prima dell'installazione; tali schede devono essere aggiornate. – asadovsky

485

È possibile utilizzare $x nel Chrome javascript console. Non sono necessarie estensioni.

es: $x("//img")

anche la casella di ricerca nella finestra di ispezione web accetterà XPath

+1

Bello - anche se non sono sicuro che questo risponda alla domanda originale. Come l'hai saputo? Mi chiedo se ci sono altre funzioni simili disponibili nella console. – huyz

+4

Suppongo che Chrome abbia copiato la maggior parte dei comandi della riga di comando di Firebug: http://getfirebug.com/wiki/index.php/Command_Line_API – huyz

+0

Non sono sicuro delle origini. Potrebbe essere qualcuno che lavora al team di Chrome/Webkit a desiderare più funzionalità di Firebug o forse ha a che fare con il creatore di Firebug che si trasferisce al team di Chrome. In ogni caso è roba utile. –

1

Un po 'OT, ma forse utile: Su Mac Chrome, anche se non è possibile copiare il XPath fuori dalla casella di ricerca in Pannello degli strumenti di sviluppo (invece, copia il nodo come HTML), puoi trascinare il testo in un editor esterno.

8

A partire dall'ultimo aggiornamento per Chrome è ora possibile fare clic su qualsiasi elemento nell'ispettore elemento e copiare l'XPath negli Appunti.

+0

Si prega di chiarire. – Abdull

3

Basta fare clic con il tasto destro del mouse sull'elemento per cui si vuole xpath e si vedrà una voce di menu per copiarlo. Questo potrebbe non essere esistito quando l'OP ha fatto il suo post, ma ora è certamente lì.

155

Fare clic destro sul nodo => "Copia XPath"

+13

Questo è il modo più semplice per ottenere un xpath, è molto probabile che si interrompa quando il contenuto cambia –

+4

@JuanMendes qual è l'alternativa? – Nate

+6

@Nate Non esiste un'alternativa semplice se si desidera che XPath funzioni ancora mentre il documento cambia. Devi solo pensarci e cercare di non aggiungere informazioni superflue al tuo XPath. Una regola generale è che più lungo è il tuo XPath, meno è probabile che funzioni in altri contesti. –

10

No estensione necessaria in cromo ora. Fai clic con il tasto destro del mouse su qualsiasi elemento che vuoi xpath e fai clic su "Ispeziona elemento" e poi di nuovo all'interno di Inspector, fai clic con il pulsante destro del mouse sull'elemento e fai clic su "Copia Xpath".

+7

Questo metodo è già menzionato in una risposta precedente, pubblicata l'anno scorso: http://stackoverflow.com/a/11087358/938089 –

+0

Questo è veramente fantastico! Grazie. – user2930156

7

Diamo dirvi una formula semplice per trovare XPath di qualsiasi elemento:

1- Aprire sito in del browser

2- Selezionare elemento e fare clic destro su di esso

3- Fare clic su Opzioni elemento ispezionare

4- Fare clic destro sul selezionato html

5- scegliere l'opzione di copiare XPath Usalo dove mai ne avete bisogno

Questo collegamento video sarà utile per voi. http://screencast.com/t/afXsaQXru

Nota: per le opzioni avanzate di xpath è necessario conoscere regex o pattern del proprio html.

+0

Utilizzato la console di Chrome per verificare ciò e fatto questo per l'upvote: '$ x ('// * [@ id =" answer-33492958 "]/table/tbody/tr [1]/td [1]/div/a [1] ') [0] .Click(); ' –

28

Tutte le risposte precedenti sono corrette anche in questo caso con lo screenshot.

da Chrome:

  1. Fare clic destro "ispezionare" sulla voce che si sta cercando di trovare la XPath
  2. clic destro sulla zona evidenziata sulla console.
  3. Vai a copiare XPath

enter image description here

0

utilizzare questa estensione, genera XPaths basati su id o classe, che è probabilmente quello che si desidera utilizzare.

Fare clic sull'icona del browser, il pannello viene visualizzato nell'angolo destro della pagina, quindi fare clic su start inspect, quindi fare clic su qualsiasi elemento per ottenere xpath.

XPath Generator


Equivalente soluzione Chrome Extension sopra è collegabile a Java jar progetto: Mentre Chrome fornisce sia XPath e selettore entrambi tendono a default attribuire "id" o altri oggetti che cambiano dinamicamente. La domanda di cui sopra è guidata dalla necessità di fare affidamento su attributi persistenti. https://www.burlingtonvisionandlab.com/Downloads/TuSqK231LashowXPathSE7HTML/showXPathSE1_7Table.html

Il jar gratuito scaricabile mostra un percorso più lungo con gli attributi di selezione del reacher da cui scegliere.

4

Google Chrome fornisce uno strumento di debug integrato denominato "Chrome DevTools", che include una comoda funzionalità che può valutare o convalidare i selettori XPath/CSS senza estensioni di terze parti.

Questo può essere fatto da due approcci:

Utilizzare la funzione di ricerca all'interno del pannello Elementi per valutare XPath/selettori CSS ed evidenziare i nodi corrispondenti nel DOM. Esegui token $ x ("some_xpath") o $$ ("selettori css") nel pannello della console, che verranno entrambi valutati e convalidati.

Dal pannello Elementi

  1. Premere F12 per aprire su Chrome DevTools.

  2. Il pannello Elementi deve essere aperto per impostazione predefinita.

  3. Premere Ctrl + F per abilitare la ricerca DOM nel pannello.

  4. Immettere i selettori XPath o CSS da valutare.

  5. Se ci sono elementi corrispondenti, saranno evidenziati in DOM. Tuttavia, se ci sono stringhe corrispondenti all'interno del DOM, saranno considerate anche come risultati validi. Ad esempio, l'intestazione del selettore CSS deve corrispondere a tutto (CSS in linea, script ecc.) Che contiene l'intestazione della parola, invece degli elementi di sola corrispondenza.

enter image description here

Dal pannello Console

  1. Premere F12 per aprire su Chrome DevTools.

  2. Passare al pannello della console.

  3. Digitare XPath come $x(".//header") per valutare e convalidare.

  4. Digitare selettori CSS come $$("header") per valutare e convalidare.

  5. Verificare i risultati restituiti dall'esecuzione della console.

Se gli elementi sono abbinati, verranno restituiti in un elenco. Altrimenti viene visualizzata una lista vuota [].

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

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

Se il selettore XPath o CSS non è valido, verrà visualizzata un'eccezione in rosso. Per esempio:

$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. 
Problemi correlati