Come verificare un'espressione XPath nello strumento Chrome Developers o Firefox Firebug?

179

Come posso verificare il mio XPath?

Sto usando lo strumento Chrome Developers per ispezionare gli elementi e formare il mio XPath. Lo verifico utilizzando il plug-in XPath Checker di Chrome, tuttavia non sempre mi dà il risultato. Qual è il modo migliore per verificare il mio XPath.

Ho anche provato a utilizzare Firebug per ispezionare il bug e anche a utilizzare FirePath per verificare. Ma Firepath verifica anche XPath.

La mia ultima opzione sarebbe quella di utilizzare Selenium WebDriver per confermare il mio XPath.

google-chrome  firefox  selenium  xpath  selenium-webdriver 
— user3448242
fonte

Risposte:

367

Cromo

Ciò può essere ottenuto con tre diversi approcci (vedi l'articolo del mio blog qui per maggiori dettagli):

  • Cerca nel Elementspannello come di seguito
  • Esegui $x()e $$()nel Consolepannello, come mostrato nella risposta di Lawrence
  • Estensioni di terze parti (non necessarie nella maggior parte dei casi, potrebbero essere eccessive)

Ecco come cercare XPath nel Elementspannello:

  1. Premi F12per aprire Chrome Developer Tool
  2. Nel pannello "Elementi", premi Ctrl+F
  3. Nella casella di ricerca, digita XPath o CSS Selector, se vengono trovati degli elementi, questi saranno evidenziati in giallo.

inserisci qui la descrizione dell'immagine

Firefox (dalla versione 75)

Poiché FF 75 è possibile utilizzare la query xpath non elaborata senza espressioni xpath di valutazione, consultare la documentazione per ulteriori informazioni.

Firefox (versione precedente 75)

  1. Seleziona "Console Web" dal sottomenu Sviluppatore Web nel menu Firefox (o menu Strumenti se visualizzi la barra dei menu o sei su Mac OS X)
    o premi la scorciatoia da tastiera Ctrl+ Shift+ K( Command+ Option+ Ksu OS X).

  2. Nella riga di comando in basso utilizzare quanto segue:

    • $(): Restituisce il primo elemento corrispondente. Equivalente a document.querySelector()o chiama la $funzione nella pagina, se esiste.

    • $$(): Restituisce una matrice di nodi DOM corrispondenti. Questo è come per document.querySelectorAll(), ma restituisce un array invece di a NodeList.

    • $x(): Valuta un'espressione XPath e restituisce una matrice di nodi corrispondenti.

Firefox (versione precedente 49)

  1. Installa Firebug
  2. Installa Firepath
  3. Premi F12per aprire Firebug
  4. Passa al FirePathpannello
  5. Nel menu a discesa, selezionare XPathor CSS
  6. Digita per individuare

inserisci qui la descrizione dell'immagine

— Yi Zeng
fonte
2
Solo un avvertimento su XPath e sui browser, in quanto ciò crea molta confusione: stackoverflow.com/questions/18241029/…
— Jens Erat
@JensErat: punto davvero buono. Per gli altri che leggono questo commento, come già accennato in quella domanda, Selenium non è interessato perché guida i browser e utilizza la stessa tecnologia di valutazione JavaScript sottostante con gli strumenti di sviluppo.
— Yi Zeng,
1
@ user1177636: Quale software hai usato per generare queste GIF?
— JacekM,
Se hai bisogno di un parser locale anche per XQuery ho trovato BaseX: basex.org/products
— tuxErrante il
4
La risposta ha bisogno di un aggiornamento per Firefox. Purtroppo Firebug è obsoleto ed è stato unito in Strumenti per gli sviluppatori. Attualmente è possibile testare l'espressione xpath in Console, ad esempio$("//div")
— derloopkat
53

È possibile aprire DevTools in Chrome con CTRL+Isu Windows (o CMD+IMac) e Firefox con F12, quindi selezionare la Consolescheda) e controllare XPath digitando $x("your_xpath_here").
Ciò restituirà una matrice di valori corrispondenti. Se è vuoto, sai che non c'è corrispondenza sulla pagina.

Firefox v66 (aprile 2019):

Xpath console Firefox v66

Chrome v69 (aprile 2019):

Chrome v69 console xpath

— Bosnjak
fonte
1
Questo metodo non è l'ideale, ma è bene sapere perché qualsiasi espressione xpath che scrivi in ​​quella console può essere eseguita da un JavascriptExecutor in Selenium. A volte puoi usarlo come soluzione alternativa, forse quando gli eventi nativi di Firefox sono disabilitati?
— Djangofan,
1
@djangofan, come intendi? In base a tale logica, entrambe queste risposte, sebbene corrette, non sono necessarie alla tua logica.
— Arran,
1
@bosnjak quando ho provato questo in console $x("//input[@name='q']")ho ricevutoVM251:1 Uncaught TypeError: $x is not a function at <anonymous>:1:1
— YasserKhalil il
@YasserKhalil quale browser stai usando, quale versione? Su quale sito stai facendo questo?
— bosnjak,
16

Utilizzando Chrome o Opera

senza alcun plugin, senza scrivere alcun singolo carattere di sintassi XPath

  1. fare clic con il tasto destro del mouse sull'elemento richiesto, quindi "ispeziona"
  2. fai clic con il tasto destro del mouse sul tag dell'elemento evidenziato, scegli copia> Copia Xpath.

;)

inserisci qui la descrizione dell'immagine

— Ing. Samer T
fonte
2
Per Chrome, questa è la soluzione MIGLIORE che abbia mai visto. Grazie per la condivisione. Semplifica la conferma in Chrome quando non desidero utilizzare Firefox.
— dell'automazione del
L'ho usato con grande beneficio. Ma l'unico grande problema è che a volte il menu di scelta rapida è disabilitato o sovrascritto. Quindi devi fare affidamento sugli altri approcci.
— ouflak,
1
Questo non risponde davvero alla domanda. Non sta verificando un xpath esistente, ne sta generando uno. Quello che Chrome genera è spesso brutto e molto fragile quando esiste una soluzione molto migliore.
— Maggiore maggiore
6

Ecco l'estensione ChroPath per Chrome che ha molte funzionalità avanzate rispetto a FirePath. Segui i passaggi seguenti:

  1. Apri il pannello devtools.
  2. Fare clic con il tasto destro in qualsiasi punto della pagina Web.
  3. Fai clic su Ispeziona.
  4. Nella parte destra della scheda Elementi, fai clic sulla scheda ChroPath.

Qui otterrai XPath / CSS e potrai anche modificarlo e valutarlo.

Scarica il componente aggiuntivo

— SanjayKumar I ChroPath Creator
fonte
1
L'estensione ChroPath funziona ancora nel 2020. Grazie. Grande aiuto.
— Bolle il
1

Un'altra opzione per controllare il tuo xpath è usare l' IDE selenio.

  1. Installa Firefox Selenium IDE
  2. Apri l'applicazione in FireFox e apri IDE
  3. In IDE, su una nuova riga, incolla il tuo xpath sulla destinazione e fai clic su Trova. L'elemento corrispondente verrebbe evidenziato nella tua applicazione

Selenio IDE

— AJC
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.