ultimate xpath writing cheat sheet tutorial with syntax
I 20 migliori modi per scrivere XPATH definitivo per QUALSIASI tipo di elemento Web (XPATH non sarà mai valido):
Un'applicazione Web è composta da diversi tipi di elementi Web come elemento Web su cui fare clic su un pulsante, elemento Web di input per digitare testo, menu a discesa, pulsanti di opzione, ecc.
Questi elementi web sono anche chiamati tag o nodi.
Quando si tratta di automatizzare le applicazioni web, inizia con la scrittura di uno script di automazione che troverà l'elemento web, eseguirà un'azione su di esso come, fare clic su un pulsante, inserire il testo nella casella di input, selezionare una casella di controllo, selezionare un pulsante di opzione, scorrere verso l'alto o verso il basso e infine verificare il comportamento previsto a turno dell'azione.
Cosa imparerai:
- Cos'è XPath e come appare?
- I 20 migliori modi per scrivere XPath per qualsiasi elemento web
- # 1) Ricerca inversa
- # 2) Utilizzo di variabili e valori personalizzati
- # 3) Utilizzo di tag 'XML', 'AND' ecc
- # 4) Utilizzo degli attributi e della tabella XPATH
- # 5) Utilizzo di attributi, tabelle e testo
- # 6) Generazione di XPATH utilizzando attributi annidati
- # 7) Generazione XPath combinando attributi, div e pulsanti
- # 8) Generazione XPATH utilizzando CONTAINS, REVERSE LOOKUP, ecc.
- # 9) XPath Generation utilizzando Relative, CONTAINS, REVERSE, FOLLOWING SIBLING, ecc.
- # 10) Generazione XPath utilizzando Attributi, Contiene, Inverso, Preceding-Sibling, Divs e Span
- # 11) Utilizzo di attributi, tag XML ecc.
- # 12) Generazione di XPath non esaminando l'intera pagina ma esaminando invece tutti i collegamenti e contiene
- # 13) Utilizzo di contiene e attributi
- # 14) Utilizzo di attributi, seguito di fratelli e discendenti
- # 15) Utilizzo di attributi, seguenti fratelli, discendente e testo
- # 16) Utilizzo di intestazione e testo
- # 17) Usare il testo dell'intestazione, seguire i fratelli, il percorso, ecc.
- # 18) Utilizzo di attributi, contiene e precedenti fratelli
- # 19) Ricerca del menu a discesa utilizzando l'attributo ID, un testo specifico e la ricerca inversa
- # 20) Combinando l'attributo 'id' e cercando un collegamento con un testo specifico
- Conclusione
- Lettura consigliata
Cos'è XPath e come appare?
Trovare un elemento è come trovare la casa di qualcuno sulla mappa. L'unico modo in cui possiamo trovare la casa di un amico senza alcun aiuto esterno è che dovremmo avere una mappa e sapere cosa trovare (casa).
Per mettere questa analogia nel nostro caso, la mappa verrà utilizzata come DOM (tag HTML, JavaScript, ecc.) In cui esistono tutti gli elementi web, insieme all'elemento web specifico che vogliamo trovare.
Una volta trovato l'indirizzo o il percorso univoco di un elemento, lo script di automazione eseguirà alcune azioni su di esso in base allo scenario di test. Per esempio, si desidera verificare l'URL della pagina che si apre dopo aver fatto clic su un pulsante.
Tuttavia, non è semplice trovare un indirizzo / percorso univoco di un elemento web in quanto potrebbero esserci tag simili, stessi valori di attributi, percorsi identici che rendono difficile creare un indirizzo univoco esatto a un elemento web chiamato 'XPATH'.
Qui, ci immergeremo in profondità in alcune tecniche eccezionali ed efficaci per generare XPATH valido e unico per qualsiasi tipo di elemento web.
Lettura consigliata => Identifica gli elementi web utilizzando XPath in Selenium
A volte puoi creare facilmente XPath usando le estensioni del browser ma in my test di automazione carriera, ho affrontato innumerevoli situazioni in cui le estensioni del browser tradizionali non funzionano e devi creare i tuoi XPath personalizzati utilizzando la tua creatività. Sono sicuro che dovrai affrontare o dovrai affrontare situazioni simili.
In questo tutorial, daremo uno sguardo ai 20 modi migliori su come creare XPath definitivo per un elemento web in modo tale che anche quando il tuo codice viene modificato, il tuo XPath rimarrà sempre valido (a meno che lo sviluppatore non riscriva l'intero caratteristica / modulo).
Conoscendo tutte queste tecniche, diventerai un maestro nello scrivere il tuo XPath e sarai in grado di scrivere XPath killer con pochissime possibilità di diventare non valido.
Innanzitutto, iniziamo con la comprensione della sintassi XPath e definiamo ciascuna delle sue parti.
L'immagine sotto mostrerà come apparirà XPath insieme a una descrizione di ciascuna parte:
- //: Seleziona il nodo corrente come input, div ecc.
- Tagname: Tagname dell'elemento / nodo web
- @: Seleziona attributo
- Attributo: Nome dell'attributo del nodo / particolare elemento web
- Valore: Valore dell'attributo
Voglio solo condividere un paio di suggerimenti qui che l'80% delle volte il mio script di test di automazione non è riuscito a causa di XPath. Ciò è dovuto alla presenza di più elementi Web per l'XPath fornito oppure XPath non è valido o la pagina non è stata ancora caricata.
Quindi, ogni volta che il tuo test case fallisce:
- Copia il tuo XPath.
- Cercalo nel browser (F12 o finestra degli strumenti per sviluppatori) nel DOM per verificare se è valido o meno (vedi l'immagine sotto).
Pro tipo 1: Assicurati che sia univoco e che nessun altro elemento web venga visualizzato quando esegui una ricerca due volte nel DOM.
miglior pulitore di sistema gratuito per Windows 10
Pro tipo 2: A volte c'è un problema di temporizzazione, il che significa che il tuo elemento / pagina web non è ancora caricato mentre lo script lo stava cercando, quindi aggiungi un po 'di tempo di attesa e riprova.
Tipo Pro 3: Prova a stampare l'intero DOM prima di cercare l'elemento web. In questo modo puoi capire guardando in Console se il tuo elemento web esiste o meno nel DOM.
Prima di approfondire la ricerca di XPath, una cosa importante che voglio condividere è che se hai accesso diretto al team di sviluppo o se il tuo team si trova dove ti trovi, chiedi al tuo team di sviluppo di fornirti ID univoci in ogni elemento web o almeno quelli che vuoi usare per l'automazione e questo ti farà risparmiare molto tempo.
Se questa non è la possibilità, potresti dover usare la tua creatività e inventare i tuoi XPath personalizzati e che è ciò che impareremo ora.
I 20 migliori modi per scrivere XPath per qualsiasi elemento web
Approfondiamo la creazione dei 20 modi migliori per un XPath killer.
# 1) Ricerca inversa
Supponiamo che tu voglia fare clic su un pulsante e che sia presente un pulsante simile. Entrambi i pulsanti hanno attributi id, ma sono dinamici e nessuno degli attributi è univoco in entrambi gli elementi del pulsante.
Nello scenario seguente vogliamo fare clic sul pulsante 'Impostazioni' del 'Test interattivo'.
Codice
Se guardi i pulsanti 'Impostazioni', entrambi i codici sono simili. Usando modi tradizionali come id, name, value, contains, ecc., Nessuno di loro funzionerà, ad esempio.
// * [contiene (text (), ‘Setting’)], Ciò risulterà in due elementi web. Quindi non è unico.
Quindi ecco la strategia finale,
>> Innanzitutto, trova il tag più vicino che sia unico e in questo caso lo è
XPATH: “//*[@id='rcTEST']
>> In secondo luogo, trova l'elemento web più vicino all'elemento web desiderato che in questo caso contiene (text (), 'TEST Interactive'). Ora ci troviamo nello stesso punto in cui esiste il pulsante 'Impostazioni', ma per fare clic su di esso, dobbiamo prima andare al principale utilizzando i doppi punti come mostrato di seguito.
XPATH: “//*[@id='rcTEST']//*[contains(text(), 'TEST Interactive')]/..
>> Come puoi vedere, siamo nel livello che ha il secondo elemento web come pulsante 'Impostazioni'. Questo ha due pulsanti e vogliamo andare al secondo pulsante che è il pulsante 'Impostazioni'. Aggiungendo '/ pulsante [2]' alla fine possiamo ottenere il nostro esclusivo XPATH per il pulsante 'Impostazioni' come mostrato di seguito.
XPATH finale:
“//*[@id='rcTEST']//*[contains(text(), 'TEST Interactive')]/../button[2]”
Ecco un altro modo per generare se pensi che potrebbero cambiare il tipo di elemento web da 'pulsante' a qualcos'altro.
“//*[@id='rcTEST']//*[contains(text(), 'TEST Interactive')]/..//*[contains(text(), 'Setting')]”
o utilizzando 'follow-sibling'
“//*[@id='rcTEST']//*[contains(text(), 'TEST Interactive')]/following-sibling::button”
# 2) Utilizzo di variabili e valori personalizzati
Supponiamo che esista un'applicazione web che dispone della funzione FTP ('File Transfer Protocol') per caricare / scaricare file e che tu abbia un caso di prova per scaricare un file specifico facendo clic sul link di download.
Innanzitutto, possiamo definire il nome del file che stiamo cercando come variabile.
String expectedfileName = 'Test1';
Ora usando XPATH possiamo trovare il nome del file effettivo.
“String actualFileName = WebDriverAccess.getDriver().findElement (By.xpath('//*'+fileName +'/tr/td[1]')).getAttribute('title');”
Nell'XPath precedente, ... '/ tr / td [1] .getAttribute (' titolo ')' andrà alla riga e alla prima colonna specifiche e otterrà il valore dell'attributo titolo. Possiamo memorizzare il nome del file effettivo in un'altra variabile.
Una volta che abbiamo sia i nomi dei file previsti che quelli effettivi, possiamo confrontare entrambi e, se entrambi corrispondono, possiamo semplicemente fare clic sul relativo collegamento di download.
(if acutalFileName == expectedFileName) { WebDriverAccess.getDriver().findElement(By.xpath('//*'+fileName +'/tr/td[4]')).click(); }
Possiamo anche creare un ciclo attraverso ogni riga e continuare a verificare il nome del file finché non lo trovi.
Loop(int count <30) { String actualFileName = WebDriverAccess. getDriver ().findElement (By. xpath ('//*'+acutalFileName +'/tr[' + count + ']/td[1]')).getAttribute('title'); (if acutalFileName == expectedFileName) { WebDriverAccess. getDriver ().findElement(By. xpath ('//*'+fileName +'/tr/td[4]')).click(); } Count++; }
Possiamo generare XPATH univoco utilizzando tag personalizzati e aggiungere altre condizioni.
Per esempio, supponiamo che il nostro elemento web previsto esista nel tag principale e che siano presenti più tag indirizzo, ma desideri trovarne solo uno specifico. Tutti i tag di indirizzo hanno un attributo di classe, quindi possiamo iniziare con.
// address[@class='ng-scope ng-isolate-scope']
Abbiamo notato che il nostro elemento web previsto si trova in un tag che ha del testo chiamato 'Testing'.
// address[@class='ng-scope ng-isolate-scope']//div[contains(.,'Testing')
Abbiamo scoperto che come risultato sono stati trovati più elementi web. Quindi per renderlo più unico, possiamo aggiungere le altre condizioni come 'id' che ci indicherà finalmente l'elemento web che stiamo cercando.
// address[@class='ng-scope ng-isolate-scope']//div[contains(.,Testing') and @id='msgTitle']
# 4) Utilizzo degli attributi e della tabella XPATH
Supponiamo di voler digitare in un elemento web che è posizionato all'interno di una tabella e la tabella è collocata all'interno di un elemento del form.
Possiamo trovare tutti i moduli all'interno del DOM con il nome 'myForm'.
“//*[@name='myForm']”
Ora in tutte le forme trova la tabella con id 'tbl_testdm'.
'//*[@name='myForm']//table[@id='tbl_ testdm’]”
All'interno della tabella vai a una riga e una colonna specifiche.
'//*[@name='myForm']//table[@id='tbl_ testdm’]/tbody/tr/td[6]/”
All'interno della cella, se sono presenti più input, trova un input dove value = 'Open RFS', e questo ci darà l'XPath finale del campo.
//*[@name='myForm']//table[@id='tbl_ testdm’]/tbody/tr/td[6]/ input[@value='Open RFS']'
# 5) Utilizzo di attributi, tabelle e testo
Supponi che l'elemento web desiderato si trovi nella tabella del pannello e abbia del testo comune.
Innanzitutto inizia con un riquadro con un attributo univoco che in questo caso è 'TITOLO'.
//*[@title=’Songs Lis Applet']
Ora naviga attraverso tutti i tag della tabella.
//*[@title=’Songs Lis Applet']//table
All'interno di tutte le tabelle trova la colonna che ha il testo 'Autore'.
L'XPath finale sarebbe come:
//*[@title=’Songs List Applet']//table//td[contains(text(),'Author')]
# 6) Generazione di XPATH utilizzando attributi annidati
L'XPath dell'elemento web di destinazione può anche essere generato utilizzando gli attributi nidificati. Per esempio, in questo caso, cercherà un attributo specifico in DOM e quindi cercherà un altro attributo al suo interno.
//*[@id='parameters']//*[@id='testUpdateTime']')
# 7) Generazione XPath combinando attributi, div e pulsanti
Per esempio, nell'XPath sottostante, sono stato in grado di trovare l'elemento web di destinazione utilizzando un id (XPath relativo), alcuni tag div e un pulsante.
“//*[@id='MODEL/PLAN']/div[1]/div[2]/div[1]/div[1]/widget/section/div[1]/div/div[1]/div/div/button[1]'
# 8) Generazione XPATH utilizzando CONTAINS, REVERSE LOOKUP, ecc.
Una volta ho avuto un menu a discesa senza identificazione diretta. Ho dovuto usare CONTAINS, REVERSE, DIVs, attributi per ottenere l'XPATH finale come mostrato di seguito.
//*[contains(text(),'Watch Dial)]/../div/select[@data-ng-model='context.questions [subqts.subHandleSubId]']'),
# 9) XPath Generation utilizzando Relative, CONTAINS, REVERSE, FOLLOWING SIBLING, ecc.
Ho avuto una situazione in cui l'applicazione visualizza un grafico e ogni valore del grafico doveva essere convalidato. Ma, sfortunatamente, ogni valore non aveva alcuna identificazione univoca, quindi ho creato l'XPATH finale come mostrato di seguito per un valore del grafico che combina tag relativi, contiene, inverso, fratello successivo e div.
//*[@id='RESEARCH/PLAN']//*[contains(@id, 'A4')]/../../following-sibling::div[1]/div[1]/span[1]/span[1]
# 10) Generazione XPath utilizzando Attributi, Contiene, Inverso, Preceding-Sibling, Divs e Span
Una volta ho dovuto convalidare diversi dati di allarme e ciascun valore di allarme è stato visualizzato in base a un calcolo o tempi specifici. Per acquisire ogni valore, ho dovuto creare il seguente XPATH che utilizza attributi, contiene, reverse, preceding-sibling, divs e tag span.
//*[@id='ALARMDATA']//*[contains(@id, 'AFC2')]/../../preceding-sibling::div[1]/div[1]/span[1]/span[1]
# 11) Utilizzo di attributi, tag XML ecc.
Nel seguente XPATH, attributi e tag XML, viene utilizzata una sequenza per ottenere l'indirizzo univoco finale di un elemento web.
//*[@id='RESEARCH/REVIEW'] //widget/section/div[1]/div/div[2]/div[1]/div[3]/div[1]//span[@class='details']
# 12) Generazione di XPath non esaminando l'intera pagina ma esaminando invece tutti i collegamenti e contiene
Il seguente XPath cercherà solo i collegamenti in un'intera pagina che contengono il testo come 'Inserimento manuale dei dati dei parametri'.
//a[contains(.,'Parameter Data Manual Entry')]
# 13) Utilizzo di contiene e attributi
//*[contains(@style,'display: block; top:')]//input[@name='daterangepicker_end']
# 14) Utilizzo di attributi, seguito di fratelli e discendenti
//*[@id='dropdown-filter-serviceTools']/following-sibling::ul/descendant::a[text()='Notepad']
# 15) Utilizzo di attributi, seguenti fratelli, discendente e testo
//*[@id='dropdown-filter-service tools'] /following-sibling::ul/descendant::a[text()='Trigger Dashboard']
# 16) Utilizzo di intestazione e testo
Se l'elemento web è un'intestazione con del testo specifico, l'XPath potrebbe essere come mostrato di seguito:
//h3[text()='Internal Debrief']
# 17) Usare il testo dell'intestazione, seguire i fratelli, il percorso, ecc.
//h3[contains(text(),'Helium Level')]/following-sibling::div/label/input
# 18) Utilizzo di attributi, contiene e precedenti fratelli
Una volta che avevo un intervallo che non aveva alcun attributo univoco, avevo creato XPATH combinando assoluto, Contiene, fratelli precedenti e un altro percorso assoluto.
//div[div[p[contains(text(),'Status')]]]/preceding-sibling::div/div/span[3]/span
# 19) Ricerca del menu a discesa utilizzando l'attributo ID, un testo specifico e la ricerca inversa
//*[@id='COUPLING']//*[contains(text(),'COUPLE Trend')]/../div/select
# 20) Combinando l'attributo 'id' e cercando un collegamento con un testo specifico
//*[@id='ffaHeaderDropdown']//a[contains(text(),'Start Workflow')]
Conclusione
Quando si tratta di scrivere un XPATH killer, dipende davvero da quanto bene comprendi e analizzi il codice. Più comprendi il codice, maggiore sarà il numero di modi in cui troverai nella scrittura di XPATH efficaci.
Il primo passo nella scrittura di XPath è trovare l'elemento web univoco più vicino al tuo elemento web di destinazione e continuare ad avvicinarti utilizzando le diverse tecniche discusse sopra come attributi, DIV, following, contains, ecc.
Alla fine, diremmo ancora una volta che ti semplificherà davvero la vita se richiedi al tuo team di sviluppo di aggiungere ID univoci in tutti gli elementi web che ti interessano.
Ogni volta che inizia un ciclo di sprint o un lavoro su un nuovo requisito e il team viene condiviso con nuovi mockup, esamino sempre tutti i mockup e penso a potenziali casi di test di automazione nella mia mente, preparo un elenco di tutti i potenziali elementi web che verranno utilizzati nei test di automazione e preparare i miei ID.
Una volta completato un elenco di tutti gli elementi web con i miei ID suggeriti, lo condividerò in anticipo con lo sviluppatore per essere utilizzato nel codice di sviluppo. In questo modo, otterrei sempre ID univoci rendendo facile la mia battaglia di scrittura XPATH.
Di seguito è riportato un elenco combinato di diversi modi per scrivere XPATH:
- '// * [@ id =’ rcTEST ’] // * [contiene (text (),‘ TEST Interactive ’)] /../ button [2]'
- '// * [@ id =’ rcTEST ’] // * [contiene (text (),‘ TEST Interactive ’)] /..//* [contiene (text (),‘ Setting ’)]'
- '// * [@ id =’ rcTEST ’] // * [contiene (text (),‘ TEST Interactive ’)] / following-sibling :: button'
- 'String actualFileName = WebDriverAccess.getDriver (). FindElement (By.xpath (' // * '+ fileName +' / tr / td [1] ')). GetAttribute (' title ');'
- WebDriverAccess.getDriver (). FindElement (By.xpath (“// *” + fileName + ”/ tr / td [4]”)). Click ();
- '// address [@ class = 'ng-scope ng-isolate-scope'] // div [contiene (., Testing ') e @ id =' msgTitle ']'
- '// * [@ name =’ myForm ’] // tabella [@ id =’ tbl_ testdm ’] / tbody / tr / td [6] /
- input [@ value = ’Open RFS’] '
- '// * [@ title =’ Songs List Applet ’] // table // td [contains (text (),’ Author ’)]'
- '// * [@ id =’ parameters ’] // * [@ id =’ testUpdateTime ’]') '
- '// * [@ id = 'MODEL / PLAN'] / div [1] / div [2] / div [1] / div [1] / widget / section / div [1] / div / div [1] / div / div / pulsante [1] '
- '// * [contains (text (),’ Watch Dial)] /../ div / select [@ data-ng-model = ’context.questions [subqts.subHandleSubId]’] '),'
- '// * [@ id = 'RESEARCH / PLAN'] // * [contains (@id, 'A4')] /../../ following-sibling :: div [1] / div [1] / span [1] / span [1] '
- '// * [@ id = 'ALARMDATA'] // * [contiene (@id, 'AFC2')] /../../ preceding-sibling :: div [1] / div [1] / span [ 1] / span [1] '
- '// * [@ id = 'RESEARCH / REVIEW'] // widget / section / div [1] / div / div [2] / div [1] / div [3] / div [1] // span [ @ class = 'details'] ”
- '//A[contains(.,’Parameter Data Manual Entry’)] '
- '// * [contiene (@ style,’ display: block; top: ’)] // input [@ name =’ daterangepicker_end ’]'
- '// * [@ id =’ dropdown-filter-serviceTools ’] / following-sibling :: ul / descendant :: a [text () =’ Notepad ’]'
- '// * [@ id =’ dropdown-filter-serviceTools ’] / following-sibling :: ul / descendant :: a [text () =’ Trigger Dashboard ’]'
- '// h3 [text () =’ Debriefing interno ’]'
- '// h3 [contiene (text (),’ Helium Level ’)] / following-sibling :: div / label / input'
- '// div [div [p [contains (text (),’ Status ’)]]] / preceding-sibling :: div / div / span [3] / span'
- '// * [@ id =’ COUPLING ’] // * [contiene (text (),’ COUPLE Trend ’)] /../ div / select'
- '// * [@ id =’ ffaHeaderDropdown ’] // a [contains (text (),’ Start Workflow ’)]'
Spero che questo articolo informativo abbia arricchito le tue conoscenze sulla scrittura di XPath.
Biografia dell'autore: questo articolo è stato scritto da Adnan Arif, un professionista IT con diverse esperienze e competenze nella sua carriera che dura da oltre 9 anni.
Lettura consigliata
- Tutorial approfonditi su Eclipse per principianti
- Tutorial Python DateTime con esempi
- Sintassi dei comandi Cat Unix, opzioni con esempi
- Comando di ordinamento Unix con sintassi, opzioni ed esempi
- Tutorial sullo scripting della shell di Unix con esempi
- Selenio Trova elemento per tutorial di testo con esempi
- Tutorial sulle funzioni principali di Python con esempi pratici
- Post-processore di Xpath Extractor in JMeter