ultimate xpath writing cheat sheet tutorial with syntax
20 maneres principals d'escriure XPATH definitiu per a qualsevol tipus d'element web (XPATH mai no serà vàlid):
Una aplicació web es compon de diferents tipus d’elements web, com ara l’element web per fer clic a un botó, l’element web d’entrada per escriure text, el menú desplegable, els botons d’opció, etc.
Aquests elements web també s’anomenen etiquetes o nodes.
Quan es tracta d’automatitzar aplicacions web, comença amb l’escriptura d’un script d’automatització que trobarà l’element web, hi realitzarà una acció, com ara, fer clic en un botó, introduir text al quadre d’entrada, seleccionar una casella de selecció, seleccionar un botó d’opció, Desplaceu-vos cap amunt o cap avall i, finalment, verifiqueu el comportament esperat al seu torn de l'acció.
preguntes d’entrevistes a HTML5 i CSS3
Què aprendreu:
- Què és XPath i com es veu?
- Top 20 maneres d'escriure XPath per a qualsevol element web
- # 1) Cerca inversa
- # 2) Ús de variables i valors personalitzats
- # 3) Utilitzar etiquetes 'XML', 'I', etc.
- # 4) Utilitzar els atributs i la taula XPATH
- # 5) Ús d'atributs, taules i text
- # 6) Generació de XPATH mitjançant atributs imbricats
- # 7) Generació XPath combinant atributs, divs i botó
- # 8) Generació XPATH mitjançant CONTINGUTS, BÚSQUEDA INVERSA, etc.
- # 9) Generació XPath mitjançant Relatiu, CONTÉ, INVERSA, SEGUINT SIBLING, etc.
- # 10) Generació XPath mitjançant atributs, conté, inversa, germans anteriors, divisions i extensió
- # 11) Ús d’atributs, etiquetes XML, etc.
- # 12) Generació XPath no mirant cap a la pàgina sencera, sinó mirant tots els enllaços i els continguts
- # 13) Ús de continguts i atributs
- # 14) Ús d’atributs, seguiment de germans i descendents
- # 15) Ús d’atributs, seguiment de germans, descendent i text
- # 16) Ús de capçalera i text
- # 17) Ús de text de capçalera, seguiment de germans, camí, etc.
- # 18) Ús d’atributs, continguts i germans anteriors
- # 19) Cerqueu un menú desplegable mitjançant l'atribut d'identificació, un text específic i la cerca inversa
- # 20) Combinació de l'atribut 'id' i cerca d'un enllaç amb text específic
- Conclusió
- Lectura recomanada
Què és XPath i com es veu?
Trobar un element és com trobar la casa d’algú al mapa. L’única manera de trobar la casa d’un amic sense cap ajuda externa és que hauríem de tenir un mapa i saber què trobar (casa).
Per posar aquesta analogia en el nostre cas, el mapa s’utilitzarà com a DOM (etiquetes HTML, JavaScript, etc.) on existeixen tots els elements web, juntament amb l’element web específic que volem trobar.
Un cop trobada l'adreça o el camí d'accés únic d'un element, l'script d'automatització hi realitzarà algunes accions en funció de l'escenari de prova. Per exemple, voleu verificar l'URL de la pàgina que s'obre després de fer clic a un botó.
Tot i això, no és senzill trobar una adreça / ruta única d’un element web, ja que hi pot haver etiquetes similars, valors d’atributs idèntics, camins idèntics que dificulten la creació d’una adreça única exacta a un element web anomenat “XPATH”.
Aquí aprofundirem en algunes tècniques efectives i fantàstiques per generar XPATH vàlid i únic per a qualsevol tipus d’element web.
Lectura recomanada => Identifiqueu elements web mitjançant XPath a Selenium
De vegades, podeu crear XPaths fàcilment mitjançant extensions de navegador, però a la meva carpeta proves d'automatització carrera, m’he enfrontat a infinitat de situacions en què les extensions de navegador tradicionals no funcionen i heu de crear els vostres XPaths personalitzats amb la vostra pròpia creativitat. Estic segur que teniu situacions similars o les afrontareu.
En aquest tutorial, farem un cop d'ull a les 20 millors maneres de crear XPath definitiu per a un element web, de manera que fins i tot quan es canviï el vostre codi, el vostre XPath romandrà vàlid tot el temps (tret que el desenvolupador reescrigui el document complet). característica / mòdul).
Si coneixeu totes aquestes tècniques, us convertireu en un mestre en l’escriptura del vostre propi XPath i podreu escriure XPaths assassins amb molt poques possibilitats d’invalidesa.
En primer lloc, comencem per entendre la sintaxi XPath i definim cadascuna de les seves parts.
La imatge següent mostrarà l'aspecte de XPath i la descripció de cada part:
- //: Seleccioneu el node actual com ara entrada, div, etc.
- Tagname: Tagname de l'element web / node
- @: Seleccioneu l'atribut
- Atribut: Nom de l'atribut del node / element web concret
- Valor: Valor de l'atribut
Només vull compartir un parell de consells aquí que el 80% del temps el meu script de prova d'automatització ha fallat a causa de XPath. Això es deu a que hi ha diversos elements web per al XPath proporcionat o XPath no és vàlid o bé la pàgina encara no s'ha carregat.
Per tant, sempre que falla el vostre cas de prova:
- Copieu el vostre XPath.
- Cerqueu-lo al navegador (finestra F12 o eina per a desenvolupadors) del DOM per verificar si és vàlid o no (vegeu la imatge següent).
Pro Tipus 1: Assegureu-vos que sigui únic i que no aparegui cap altre element web quan cerqueu dues vegades al DOM.
Pro Tipus 2: De vegades hi ha un problema de temps, cosa que significa que el vostre element o pàgina web encara no s'ha carregat mentre el script el cercava, per tant, afegiu un temps d'espera i torneu a provar.
Pro Tipus 3: Proveu d'imprimir tot el DOM abans de cercar l'element web. D'aquesta manera, podeu saber si consulteu si el vostre element web existeix al DOM o no.
Abans d’endinsar-nos en la recerca d’XPath, una cosa important que vull compartir és que si teniu accés directe a l’equip de desenvolupament o si el vostre equip es troba allà on esteu, demaneu al vostre equip de desenvolupament que us proporcioni identificadors únics a cada element web o, com a mínim, els que vulgueu utilitzar per a l'automatització i això us estalviarà molt del vostre temps.
Si aquesta no és la possibilitat, és possible que hagueu d’utilitzar la vostra creativitat i elaborar els vostres propis XPaths personalitzats i que és el que aprendrem ara.
Top 20 maneres d'escriure XPath per a qualsevol element web
Anem a submergir-nos profundament en la creació de les 20 millors maneres d’aconseguir un XPath assassí.
# 1) Cerca inversa
Diguem que voleu fer clic a un botó i que hi ha un botó similar. Tots dos botons tenen atributs d'identificació, però són dinàmics i cap dels atributs és únic en els dos elements del botó.
A l'escenari següent, volem fer clic al botó 'Configuració' de la 'Prova interactiva'.
Codi
Si mireu els botons 'Configuració', els dos codis són similars. En utilitzar formes tradicionals com ara identificador, nom, valor, contingut, etc., cap d'elles funcionarà, per exemple.
// * (conté (text (), 'Configuració')), donarà lloc a dos elements web. Per tant, no és únic.
Així que aquí teniu l’estratègia final,
>> En primer lloc, cerqueu l’etiqueta més propera que sigui única i, en aquest cas, sí
XPATH: “//*(@id='rcTEST')
>> En segon lloc, cerqueu l’element web més proper a l’element web previst que en aquest cas conté (text (), ‘TEST Interactive’). Ara ens trobem al mateix lloc on existeix el botó 'Configuració', però per fer-hi clic, primer hem d'anar a la pàgina principal fent servir punts dobles com es mostra a continuació.
XPATH: “//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..
>> Com podeu veure, som al nivell que té el segon element web com a botó 'Configuració'. Té dos botons i volem anar al segon botó que és el botó 'Configuració'. Si afegim '/ button (2)' al final, podem obtenir el nostre XPATH únic per al botó 'Setting', tal com es mostra a continuació.
XPATH final:
“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/../button(2)”
Aquí hi ha una altra manera de generar si creieu que podrien canviar el tipus d'element web de 'botó' a una altra cosa.
“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/..//*(contains(text(), 'Setting'))”
o fent servir 'seguint-germà'
“//*(@id='rcTEST')//*(contains(text(), 'TEST Interactive'))/following-sibling::button”
# 2) Ús de variables i valors personalitzats
Diguem que hi ha una aplicació web que té la funció FTP ('File Transfer Protocol') per carregar / baixar fitxers i que teniu un cas de prova per descarregar un fitxer específic fent clic a l'enllaç de baixada.
En primer lloc, podem definir el nom del fitxer que busquem com a variable.
String expectedfileName = 'Test1';
el millor programari de vm per a Windows 10
Ara amb XPATH podem trobar el nom del fitxer real.
“String actualFileName = WebDriverAccess.getDriver().findElement (By.xpath('//*'+fileName +'/tr/td(1)')).getAttribute('title');”
A l'XPath anterior, ... '/ tr / td (1) .getAttribute ('title')' anirà a la fila i la primera columna específiques i obtindrà el valor de l'atribut title. Podem emmagatzemar el nom del fitxer en una altra variable.
Un cop tinguem els noms de fitxer esperats i reals, podem comparar-los i, si tots dos coincideixen, només podem fer clic a l'enllaç de baixada.
(if acutalFileName == expectedFileName) { WebDriverAccess.getDriver().findElement(By.xpath('//*'+fileName +'/tr/td(4)')).click(); }
També podem crear un bucle a través de cada fila i continuar verificant el nom del fitxer fins que el trobeu.
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++; }
Podem generar XPATH únic mitjançant etiquetes personalitzades i afegir altres condicions.
Per exemple, suposem que el nostre element web previst existeix a l’etiqueta principal i que hi ha diverses etiquetes d’adreça, però només en voleu trobar una específica. Totes les etiquetes d’adreça tenen un atribut class, per tant podem començar amb.
// address(@class='ng-scope ng-isolate-scope')
Vam observar que el nostre element web previst es troba en una etiqueta que conté un text anomenat 'Proves'.
// address(@class='ng-scope ng-isolate-scope')//div(contains(.,'Testing')
Com a resultat, hem descobert que hi ha diversos elements web. Per tant, per fer-lo més únic, podem afegir la resta de condicions, com ara 'id', que finalment ens indicaran l'element web que busquem.
// address(@class='ng-scope ng-isolate-scope')//div(contains(.,Testing') and @id='msgTitle')
# 4) Utilitzar els atributs i la taula XPATH
Suposem que volem escriure en un element web que es col·loca dins d’una taula i que la taula es col·loca dins d’un element de formulari.
Podem trobar totes les formes dins de DOM amb el nom ‘myForm’.
“//*(@name='myForm')”
Ara, en tots els formularis, trobeu la taula amb l’identificador ‘tbl_testdm’.
'//*(@name='myForm')//table(@id='tbl_ testdm’)”
A la taula, aneu a una fila i columna específiques.
'//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/”
Dins de la cel·la, si hi ha diverses entrades, cerqueu una entrada on value = 'Open RFS', i això ens donarà l'XPath final del camp.
//*(@name='myForm')//table(@id='tbl_ testdm’)/tbody/tr/td(6)/ input(@value='Open RFS')'
# 5) Ús d'atributs, taules i text
Suposem que l’element web previst es troba a la taula del tauler i té un text comú.
Primer comenceu amb un tauler amb un atribut únic que en aquest cas és 'TITLE'.
//*(@title=’Songs Lis Applet')
Ara navegueu per totes les etiquetes de la taula.
//*(@title=’Songs Lis Applet')//table
Dins de totes les taules trobareu la columna que conté el text 'Autor'.
XPath final seria com:
//*(@title=’Songs List Applet')//table//td(contains(text(),'Author'))
# 6) Generació de XPATH mitjançant atributs imbricats
XPath de l'element web de destinació també es pot generar mitjançant els atributs imbricats. Per exemple, en aquest cas, cercarà un atribut específic a tot DOM i, a continuació, en buscarà un altre.
//*(@id='parameters')//*(@id='testUpdateTime')')
# 7) Generació XPath combinant atributs, divs i botó
Per exemple, a la següent XPath, he pogut trobar l'element web objectiu mitjançant un identificador (XPath relatiu), algunes etiquetes div i un botó.
“//*(@id='MODEL/PLAN')/div(1)/div(2)/div(1)/div(1)/widget/section/div(1)/div/div(1)/div/div/button(1)'
# 8) Generació XPATH mitjançant CONTINGUTS, BÚSQUEDA INVERSA, etc.
Un cop vaig tenir un menú desplegable sense identificació directa. Vaig haver d'utilitzar CONTAINS, REVERSE, DIVs, atributs per arribar a l'XPATH final com es mostra a continuació.
//*(contains(text(),'Watch Dial))/../div/select(@data-ng-model='context.questions (subqts.subHandleSubId)')'),
# 9) Generació XPath mitjançant Relatiu, CONTÉ, INVERSA, SEGUINT SIBLING, etc.
Vaig tenir una situació en què l’aplicació mostra un gràfic i calia validar cada valor del gràfic. Però, per desgràcia, cada valor no tenia cap identificació única, de manera que he arribat a l'XPATH final, tal com es mostra a continuació, per a un valor de gràfic que combina etiquetes relatives, conté, inversa, següent-germà i div.
//*(@id='RESEARCH/PLAN')//*(contains(@id, 'A4'))/../../following-sibling::div(1)/div(1)/span(1)/span(1)
# 10) Generació XPath mitjançant atributs, conté, inversa, germans anteriors, divisions i extensió
Un cop vaig haver de validar diferents dades d'alarma i cada valor d'alarma s'ha mostrat en funció d'un càlcul o temporitzacions específiques. Per tal de capturar cada valor, vaig haver de presentar el següent XPATH que utilitza atributs, conté, inverteix, anterior-germà, divs i etiquetes de span.
c + + codi d’ordenació de combinació
//*(@id='ALARMDATA')//*(contains(@id, 'AFC2'))/../../preceding-sibling::div(1)/div(1)/span(1)/span(1)
# 11) Ús d’atributs, etiquetes XML, etc.
A la següent XPATH, atributs i etiquetes XML, s'utilitza una seqüència per obtenir l'adreça única final d'un element web.
//*(@id='RESEARCH/REVIEW') //widget/section/div(1)/div/div(2)/div(1)/div(3)/div(1)//span(@class='details')
# 12) Generació XPath no mirant cap a la pàgina sencera, sinó mirant tots els enllaços i els continguts
El XPath següent només cercarà enllaços en una pàgina sencera que continguin el text com a 'Entrada manual de dades de paràmetres'.
//a(contains(.,'Parameter Data Manual Entry'))
# 13) Ús de continguts i atributs
//*(contains(@style,'display: block; top:'))//input(@name='daterangepicker_end')
# 14) Ús d’atributs, seguiment de germans i descendents
//*(@id='dropdown-filter-serviceTools')/following-sibling::ul/descendant::a(text()='Notepad')
# 15) Ús d’atributs, seguiment de germans, descendent i text
//*(@id='dropdown-filter-service tools') /following-sibling::ul/descendant::a(text()='Trigger Dashboard')
# 16) Ús de capçalera i text
Si l'element web és una capçalera amb algun text específic, llavors XPath podria ser el que es mostra a continuació:
//h3(text()='Internal Debrief')
# 17) Ús de text de capçalera, seguiment de germans, camí, etc.
//h3(contains(text(),'Helium Level'))/following-sibling::div/label/input
# 18) Ús d’atributs, continguts i germans anteriors
Un cop tenia un abast que no tenia cap atribut únic, havia creat XPATH combinant el contingut absolut, el contingut, els germans anteriors i un altre camí absolut.
//div(div(p(contains(text(),'Status'))))/preceding-sibling::div/div/span(3)/span
# 19) Cerqueu un menú desplegable mitjançant l'atribut d'identificació, un text específic i la cerca inversa
//*(@id='COUPLING')//*(contains(text(),'COUPLE Trend'))/../div/select
# 20) Combinació de l'atribut 'id' i cerca d'un enllaç amb text específic
//*(@id='ffaHeaderDropdown')//a(contains(text(),'Start Workflow'))
Conclusió
A l’hora d’escriure un XPATH assassí, realment depèn de com entengueu i analitzeu el codi. Com més entengueu el codi, més serà el nombre de maneres que trobareu en escriure XPATH efectius.
El primer pas per escriure XPath és trobar l’element web únic més proper al vostre element web de destinació i seguir acostant-se mitjançant diferents tècniques comentades anteriorment, com ara atributs, DIV, següents, conté, etc.
Al final, tornaríem a dir que us facilitarà la vida si sol·liciteu al vostre equip de desenvolupament que afegeixi identificadors únics a tots els elements web que us interessin.
Sempre que s’inicia un cicle de velocitat o es treballa en un nou requisit i es comparteix l’equip amb noves maquetes, sempre repasso totes les maquetes i penso en els possibles casos de proves d’automatització que tinc al cap, preparo una llista de tots els elements web potencials que s’utilitzaran. en proves d'automatització i preparar els meus propis identificadors.
Un cop s'hagi completat la llista de tots els elements web juntament amb els meus identificadors suggerits, la compartiria prèviament amb el desenvolupador per utilitzar-la al codi de desenvolupament. D’aquesta manera, sempre obtindria identificacions úniques fent que la meva batalla d’escriptura XPATH fos fàcil.
A continuació es mostra una llista combinada de diferents maneres d’escriure XPATH:
- '// * (@ id = 'rcTEST') // * (conté (text (),' TEST Interactive ')) /../ botó (2) '
- '// * (@ id = 'rcTEST') // * (contains (text (), 'TEST Interactive')) /..//* (contains (text (), 'Setting'))'
- '// * (@ id = 'rcTEST') // * (contains (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)”)). Clic ();
- '// adreça (@ class = 'ng-scope ng-isolate-scope') // div (conté (., Proves ') i @ id =' msgTitle ')'
- '// * (@ name = 'myForm') // table (@ id = 'tbl_ testdm') / tbody / tr / td (6) /
- input (@ value = ’Open RFS’) ”
- '// * (@ title = 'Applet llista de cançons') // taula // td (conté (text (), 'Autor'))'
- '// * (@ id = 'paràmetres') // * (@ id = 'testUpdateTime')') '
- “// * (@ id = 'MODEL / PLAN') / div (1) / div (2) / div (1) / div (1) / widget / section / div (1) / div / div (1) botó / div / div / (1) ”
- '// * (contains (text (), 'Watch Dial)) /../ div / select (@ data-ng-model =' context.questions (subqts.subHandleSubId) ')'), '
- “// * (@ id = 'INVESTIGACIÓ / PLA') // * (conté (@id, 'A4')) /../../ seguint-germà :: div (1) / div (1) / span (1) / span (1) ”
- “// * (@ id = 'ALARMDATA') // * (contains (@id, 'AFC2')) /../../ preceding-sibling :: div (1) / div (1) / span ( 1) / abast (1) ”
- '// * (@ id = 'RECERCA / REVISIÓ') // widget / section / div (1) / div / div (2) / div (1) / div (3) / div (1) // span ( @ class = 'details') ”
- '//A(contains(.,'Parameter Data Manual Manual '))'
- '// * (conté (@ style, 'display: block; top:')) // input (@ name = 'daterangepicker_end')'
- '// * (@ id = 'dropdown-filter-serviceTools') / following-sibling :: ul / descendant :: a (text () = 'Bloc de notes')'
- '// * (@ id = 'dropdown-filter-serviceTools') / following-sibling :: ul / descendant :: a (text () = 'Trigger Dashboard')'
- '// h3 (text () = 'Resum intern')'
- '// h3 (contains (text (), 'Helium Level')) / following-sibling :: div / label / input'
- '// div (div (p (contains (text (), 'Status')))) / preceding-sibling :: div / div / span (3) / span'
- '// * (@ id = 'COUPLING') // * (contains (text (), 'COUPLE Trend')) /../ div / select'
- '// * (@ id = 'ffaHeaderDropdown') // a (contains (text (), 'Start Workflow'))'
Espero que aquest article informatiu us hagi enriquit el coneixement sobre l’escriptura d’XPaths.
Biografia de l'autor: aquest article està escrit per Adnan Arif, un professional de la informàtica que té experiència i habilitats diverses en la seva carrera que abasta més de 9 anys.
Lectura recomanada
- Tutorials Eclipse en profunditat per a principiants
- Tutorial de Python DateTime amb exemples
- Sintaxi d'ordres Unix Cat, opcions amb exemples
- Ordre d'ordenació Unix amb sintaxi, opcions i exemples
- Tutorial de script Unix Shell amb exemples
- Tutorial Selenium Find Element By Text amb exemples
- Tutorial de funcions principals de Python amb exemples pràctics
- Xpath Extractor Post-Processador a JMeter