selenium locators identify web elements using xpath selenium
Tutorial sobre localitzadors de seleni: obteniu informació sobre com identificar elements web mitjançant XPath a Selenium amb exemples
A la tutorial anterior , us vam presentar una altra eina de proves d'automatització anomenada Firebug. També hem creat manualment el nostre propi script d’automatització mitjançant Firebug i les seves funcions. També vam aprendre a introduir les modificacions desitjades al nostre script.
Avançant, en aquest tutorial, veuríem el diversos tipus de localitzadors a Selenium i la seva tècnica d’accessibilitat per construir scripts de prova . Per tant, aquest tutorial es compon de la introducció detallada de diversos tipus de localitzadors.
Aquest és el nostre 5è tutorial a Selenium Tutorial sèrie.
Què és Locator?
El localitzador es pot anomenar com una adreça que identifica un element web de manera única a la pàgina web. Els localitzadors són les propietats HTML d’un element web que indica al Selenium l’element web en què necessita per realitzar l’acció.
Hi ha una gamma diversa d’elements web. Els més comuns entre ells són:
- Caixa de text
- Botó
- Desplegable
- Hiperenllaç
- Casella de selecció
- Botó d'opció
Què aprendreu:
- Tipus de localitzadors
- Ús d’identificador com a localitzador
- Utilitzant ClassName com a localitzador
- Utilitzant el nom com a localitzador
- Utilitzar el text de l’enllaç com a localitzador
- Utilitzar XPath com a localitzador
- Conclusió
- Lectura recomanada
Tipus de localitzadors
Identificar aquests elements sempre ha estat un tema molt complicat i, per tant, requereix un enfocament precís i eficaç. D'aquesta manera, podem afirmar que més eficaç serà el localitzador, més estable serà el script d'automatització. Essencialment, totes les ordres de Selenium requereixen localitzadors per trobar els elements web. Per tant, per identificar aquests elements web amb precisió i precisió disposem de diferents tipus de localitzadors.
Ara entenem més exercitant cadascun d’ells de forma independent.
Abans de començar amb els localitzadors, deixeu-me un moment per presentar l'aplicació que es prova. Utilitzaríem 'https://accounts.google.com/' per localitzar diferents tipus d'elements web mitjançant diferents tipus de localitzadors.
Ús d’identificador com a localitzador
El millor mètode i el més popular per identificar l'element web és utilitzar ID. Se suposa que l’identificador de cada element és únic.
En aquest exemple, accediríem al quadre de text 'Correu electrònic' que hi ha al formulari d'inici de sessió a gmail.com.
Cerca d’una identificació d’un element web utilitzant Firebug
preguntes i respostes d’entrevistes dot net per a persones amb experiència
Pas 1 : Inicieu el navegador web (Firefox) i aneu a 'https://accounts.google.com/'.
Pas 2 : Obriu firebug (prement F12 o mitjançant eines).
Pas 3 : Feu clic a la icona inspecciona per identificar l'element web.
Pas 4 : Passeu el cursor per l'element web (quadre de text de correu electrònic en el nostre cas) sobre el qual volem realitzar alguna acció. A la secció firebug, es poden veure ressaltades les etiquetes HTML corresponents.
Pas 5 : Tingueu en compte l’atribut ID i preneu-ne nota. Ara hem de verificar si l’identificador identificat és capaç de trobar l’element de forma única i impecable.
Sintaxi : id = id de l'element
En el nostre cas, l’identificador és “Correu electrònic”.
Enfocament alternatiu:
En lloc de seguir els passos 2 a 4, podem localitzar / inspeccionar directament l’element web fent clic amb el botó dret del ratolí a l’element web (quadre de text de correu electrònic) el valor del localitzador que hem d’inspeccionar i fent clic a l’opció 'Inspecciona l’element amb Firebug' Per tant, aquest esdeveniment de clic provoca l'expansió de la secció de firebug i es ressaltaria l'etiqueta HTML corresponent.
Verifiqueu el valor del localitzador
Suposant que el navegador està obert i es redirigeix a 'https://accounts.google.com/'.
Pas 1 : Inicieu Selenium IDE.
Pas 2 : Feu clic a la primera fila de la secció de l'editor.
Pas 3 : Escriviu 'id = Email', és a dir, el valor del localitzador al quadre de destinació.
Pas 4 : Feu clic al botó Cerca. Si el valor de localització proporcionat és legítim, el quadre de text del correu electrònic es ressaltarà amb un color groc amb un marge verd fluorescent al voltant del camp. Si el valor localitzador proporcionat és incorrecte, s'imprimiria un missatge d'error al tauler de registre a la part inferior de Selenium IDE.
Cas 1 - Valor del localitzador = correcte
Cas 2 - Valor de localització = incorrecte
Pas 5 : Per verificar-ho més, un usuari també pot executar l'ordre 'type' contra l'objectiu donat proporcionant algun valor al camp 'Value'. Si l'execució de l'ordre introdueix el valor especificat al quadre de text Correu electrònic, significa que el tipus de localitzador identificat és correcte i accessible.
Utilitzant ClassName com a localitzador
Només hi ha una subtil diferència entre utilitzar ID com a localitzador i utilitzar el nom de la classe com a localitzador.
En aquest exemple, accediríem a 'Necessiteu ajuda?' hi ha un hiperenllaç a la part inferior del formulari d’inici de sessió a gmail.com.
Cerca d’un nom de classe d’un element web utilitzant Firebug
Pas 1 : Cerqueu / inspeccioneu l'element web (enllaç 'Necessiteu ajuda?' En el nostre cas) fent clic amb el botó dret a l'element web el valor de localització del qual hem d'inspeccionar i fent clic a l'opció 'Inspecciona l'element amb Firebug'.
Pas 2 : Tingueu en compte l’atribut de nom de classe i preneu-ne nota. Ara hem de verificar si el nom de classe identificat és capaç de trobar l'element de manera única i precisa.
Sintaxi: class = nom de classe de l'element
En el nostre cas, el nom de la classe és 'need-help-reverse'
Verifiqueu el valor del localitzador
Pas 1 : Escriviu 'class = need-help-reverse' al quadre de destinació de l'IDE Selenium.
Pas 2 : Feu clic al botó Cerca. Tingueu en compte que l'hiperenllaç es ressaltarà amb un color groc amb una vora verd fluorescent al voltant del camp.
(Feu clic per veure la imatge ampliada)
Utilitzant el nom com a localitzador
Localitzar un element web mitjançant el nom és molt similar als dos tipus de localitzadors anteriors. L’única diferència rau en la sintaxi.
En aquest exemple, accediríem al quadre de text 'Contrasenya' que hi ha al formulari d'inici de sessió a gmail.com.
Sintaxi: nom = nom de l'element
En el nostre cas, el nom és “Passwd”.
Verifiqueu el valor del localitzador
Pas 1 : Escriviu 'nom = Passwd' al quadre de destinació i feu clic al botó Cerca. Tingueu en compte que es ressaltarà el quadre de text 'Contrasenya'.
Utilitzar el text de l’enllaç com a localitzador
Tots els hiperenllaços d’una pàgina web es poden identificar mitjançant Text de l’enllaç. Els enllaços d'una pàgina web es poden determinar amb l'ajuda de l'etiqueta d'ancoratge ( ). L’etiqueta d’ancoratge s’utilitza per crear els hiperenllaços en una pàgina web i el text entre l’obertura i el tancament de les etiquetes d’ancoratge constitueix el text de l’enllaç ( Alguns textos ).
En aquest exemple, accediríem a l'enllaç 'Crea un compte' que apareix a la part inferior del formulari d'inici de sessió a gmail.com.
Cerca d’un text d’enllaç d’un element web mitjançant Firebug
Pas 1 : Cerqueu / inspeccioneu l'element web (enllaç 'Crea un compte' en el nostre cas) fent clic amb el botó dret a l'element web el valor de localització del qual hem d'inspeccionar i fent clic a l'opció 'Inspecciona l'element amb Firebug'.
Pas 2 : Tingueu en compte el text present dins de etiquetes i preneu-ne nota. Per tant, aquest text s’utilitzarà per identificar de manera única l’enllaç d’una pàgina web.
(Feu clic per veure la imatge ampliada)
referència indefinida a la classe c ++
Sintaxi: link = text de l'enllaç de l'element
En el nostre cas, el text de l’enllaç és “Crea un compte”.
Verifiqueu el valor del localitzador
Pas 1 : Escriviu 'enllaç = Crea un compte', és a dir, el valor de localització al quadre de destinació de Selenium IDE.
Pas 2 : Feu clic al botó Cerca. Tingueu en compte que l'enllaç es ressaltaria amb un color groc amb una vora verd fluorescent al voltant del camp.
Utilitzar XPath com a localitzador
Xpath s’utilitza per localitzar un element web basat en el seu camí XML. XML significa Extensible Markup Language i s’utilitza per emmagatzemar, organitzar i transportar dades arbitràries. Emmagatzema les dades en un parell clau-valor que s’assembla molt a les etiquetes HTML. Tots dos són els llenguatges de marques i, ja que es troben sota el mateix paraigua, xpath es pot utilitzar per localitzar elements HTML.
El fonamental darrere de la localització d’elements mitjançant Xpath és el recorregut entre diversos elements de tota la pàgina i permetre així a un usuari trobar un element amb la referència d’un altre element.
Xpath es pot crear de dues maneres:
Xpath relatiu
Xpath relatiu comença des de la ubicació actual i té el prefix de '//'.
Per exemple: // span [@ class = 'Email']
Absolut Xpath
Absolute Xpath comença amb un camí d’arrel i es posa amb el prefix “/”.
Per exemple: / HTML / body / div / div [@ id = 'Correu electrònic']
Punts clau:
- La taxa d’èxit de trobar un element mitjançant Xpath és massa alta. Juntament amb l'afirmació anterior, Xpath pot trobar relativament tots els elements d'una pàgina web. Per tant, Xpaths es pot utilitzar per localitzar elements que no tinguin identificador, classe o nom.
- Crear un Xpath vàlid és un procés complex i complicat. Hi ha connectors disponibles per generar Xpath, però la majoria de les vegades els Xpaths generats no identifiquen correctament l’element web.
- En crear xpath, l’usuari hauria de ser conscient de les diverses nomenclatures i protocols.
Exemples de Selenium XPath:
preguntes i respostes d’entrevistes de serveis web amb experiència a Java
Xpath Checker
Crear Xpath es fa una mica més senzill mitjançant l’ús de Xpath Checker. Xpath Checker és un complement de Firefox per generar automàticament Xpath per a un element web. El complement es pot descarregar i instal·lar com qualsevol altre complement. El connector es pot descarregar des de 'https://addons.mozilla.org/en-US/firefox/addon/xpath-checker/'.
Tan bon punt s’instal·la el connector, es pot veure al menú contextual fent clic amb el botó dret a qualsevol element el xpath del qual vulguem generar.
Feu clic a 'Veure Xpath' per veure l'expressió Xpath de l'element. Apareixerà una finestra d'editor amb l'expressió Xpath generada. Ara l'usuari té la llibertat d'editar i modificar l'expressió Xpath generada. Els resultats corresponents s’actualitzarien de forma acumulativa.
Tingueu en compte que XPath Checker també està disponible per a altres navegadors.
Però reiterant el fet que la majoria de les vegades, els Xpaths generats no identifiquen correctament l’element web. Per tant, es recomana crear el nostre propi Xpath seguint les regles i protocols predefinits.
En aquest exemple, accediríem a la imatge de 'Google' que apareix a la part superior del formulari d'inici de sessió a gmail.com.
Creació d’un Xpath d’un element web
Pas 1 : Escriviu '// img [@ class = 'logo']', és a dir, el valor de localització al quadre de destinació de l'IDE Selenium.
Sintaxi: Xpath de l'element
Pas 2 : Feu clic al botó Cerca. Tingueu en compte que la imatge es ressaltaria amb un color groc amb una vora verda fluorescent al voltant del camp.
Conclusió
Aquests són els punts clau d’aquest article.
- Els localitzadors són les propietats HTML d’un element web que informa el Selenium sobre l’element web en què necessita realitzar accions.
- Hi ha una àmplia gamma d’elements web amb els quals un usuari pot haver de interactuar regularment. Alguns d’ells són: quadre de text, botó, desplegable, hiperenllaç, casella de selecció i botó d’opció.
- Amb la variada gamma d’elements web, hi ha una gran província d’estratègies / enfocaments per localitzar aquests elements web.
- Alguns dels tipus de localitzadors molt utilitzats són ID, ClassName, Link Text, XPath, CSS Selectors i Name.
Nota: A causa del fet que crear CSS Selector i XPath requereix molts esforços i pràctica, el procés només és exercit per usuaris més sofisticats i formats.
En aquest tutorial, hem après diferents tipus de localitzadors, inclòs Selenium Xpath.
Pròxim tutorial núm. 6 : A continuació d’aquest tutorial de tipus Selenium Locator, aprendrem a utilitzar-lo Selector CSS com a localitzador.
Alguna consulta? Feu-nos-ho saber en els comentaris. Intentarem resoldre-ho tot.
Lectura recomanada
- Tutorial Selenium Find Element By Text amb exemples
- 30+ millors tutorials sobre seleni: apreneu el seleni amb exemples reals
- Com localitzar elements als navegadors Chrome i IE per crear scripts Selenium - Tutorial Selenium # 7
- Manipulació de taules web, marcs i elements dinàmics a Selenium Script - Selenium Tutorial # 18
- Ús de la classe Selenium Select per a la manipulació d’elements desplegables en una pàgina web - Tutorial Selenium # 13
- Tutorial de Cogombre Selenium: Integració de Cogombre Java Selenium WebDriver
- Com s'utilitza el selector CSS per identificar elements web per als scripts Selenium - Tutorial Selenium núm. 6
- Comproveu la visibilitat dels elements web mitjançant diversos tipus d’ordres de WebDriver - Tutorial Selenium núm. 14