how locate elements chrome
Este es el tutorial n. ° 7 de nuestra serie de capacitación en línea de Selenium. Si desea consultar todos los tutoriales de Selenium de esta serie, consulte esta página .
En el tutorial anterior, intentamos arrojar luz sobre varios tipos de localizadores en Selenium y sus mecanismos de localización para construir scripts de prueba. El tutorial consistió principalmente en la breve introducción de diferentes tipos de localizadores como ID, clases, Xpaths, textos de enlace , Selectores CSS etc. y su identificación.
Continuando con nuestro próximo tutorial, aprovecharemos la oportunidad para presentarle una extensión de las estrategias de localización. Así, en el siguiente tutorial, estudiaríamos el mecanismo para localizar elementos web en Google Chrome e Internet Explorer.
Como todos somos conscientes del hecho de que existe un rápido crecimiento en la base de usuarios de Internet, las partes interesadas y los programadores están creando aplicaciones web que probablemente funcionen en la mayoría de los navegadores.
Por lo tanto, imagine una situación en la que su aplicación web no sea compatible con Firefox pero funcione bien para Chrome e Internet Explorer.
Ahora bien, ¿cómo va a automatizar una aplicación de este tipo con Selenium? O para ser específico, cómo va a ubicar los elementos web en Chrome e Internet Explorer. Por lo tanto, la respuesta está por delante en este tutorial.
unión izquierda vs unión externa izquierda
Lo que vas a aprender:
Ubicación de elementos web en Google Chrome
Comencemos por comprender las estrategias de localización en Google Chrome.
Como Firebug en Firefox, Google Chrome tiene su propia herramienta de desarrollo que se puede utilizar para identificar y localizar elementos web en la página web. A diferencia de Firebug, no se requiere que un usuario descargue o instale ningún complemento por separado; la herramienta para desarrolladores viene fácilmente incluida con Google Chrome.
Siga los pasos a continuación para localizar elementos web con la herramienta para desarrolladores de Chrome:
Paso 1: El paso principal es iniciar la herramienta para desarrolladores de Google Chrome. Presione F12 para iniciar la herramienta. El usuario podría ver algo como la siguiente pantalla.
Tenga en cuenta que la pestaña 'Elemento' está resaltada en la captura de pantalla anterior. Por lo tanto, la pestaña de elementos es la que muestra todas las propiedades HTML que pertenecen a la página web actual. Vaya a la pestaña 'Elemento' si no está abierta de forma predeterminada en el lanzamiento.
También puede iniciar la herramienta para desarrolladores haciendo clic con el botón derecho en cualquier lugar de la página web y seleccionando 'Inspeccionar elemento', que es muy similar a la inspección de Firebug.
Paso 2: El siguiente paso es ubicar el objeto deseado dentro de la página web. Una forma de hacer lo mismo es hacer clic derecho en el elemento web deseado e inspeccionar. La propiedad HTML que pertenece a ese elemento web se resaltará en la herramienta de desarrollo. Otra forma es desplazarse por las propiedades HTML y se resaltará el elemento web correspondiente. Por lo tanto, de esta manera, el usuario puede ubicar identificadores, clases, enlaces, etc.
Creando un XPath en Developer Tool
Ya hemos hablado de Xpaths en el último tutorial. También discutimos su estrategia de creación. Aquí basaríamos nuestra discusión para verificar la validez del XPath creado en la herramienta para desarrolladores de Chrome.
Paso 1: Para crear XPath en Developer Tool, abra la pestaña de la consola.
Paso 2: Escriba el Xpath creado y enciérrelo entre $ x (“// input [@ id =’ Email ’]”)
Paso 3: Presione la tecla Intro para ver todos los elementos HTML coincidentes con el Xpath especificado. En nuestro caso, solo hay un elemento HTML coincidente. Coloca el cursor sobre ese elemento HTML y el elemento web correspondiente se resaltará en la página web.
De esta manera, todos los Xpaths se pueden crear y verificar su validez dentro de la consola.
La información relacionada con CSS correspondiente al elemento web se puede encontrar en la herramienta para desarrolladores de Chrome. Consulte la captura de pantalla a continuación:
Ubicación de elementos web en Internet Explorer
Como Google Chrome, Internet Explorer también tiene su propia herramienta de desarrollo que se puede utilizar para identificar elementos web en función de sus propiedades dentro de la página web. No se requiere que el usuario descargue o instale ningún complemento por separado, la herramienta para desarrolladores viene fácilmente incluida con Internet Explorer.
Siga los pasos a continuación para ubicar elementos web usando la herramienta IE Developer:
Paso 1: El paso principal es iniciar la herramienta IE Developer. Presione F12 para iniciar la herramienta. El usuario podría ver algo como la siguiente pantalla.
Tenga en cuenta que la pestaña 'HTML' está resaltada en la captura de pantalla anterior. Así, la pestaña HTML es la que muestra todas las propiedades HTML pertenecientes a la página web actual. Expanda la pestaña HTML para ver las propiedades de todos los elementos web que pertenecen a la página web actual.
Paso 2: El siguiente paso es ubicar el objeto deseado dentro de la página web. Una forma de hacerlo es seleccionar el elemento HTML y se resaltará el elemento web correspondiente. Por lo tanto, de esta manera, el usuario puede ubicar identificadores, clases, enlaces, etc. En la siguiente captura de pantalla, el cuadro de texto del correo electrónico se resaltará tan pronto como seleccionemos la propiedad HTML correspondiente.
Otra forma de localizar el elemento web es hacer clic en el botón 'Buscar' presente en el menú superior y hacer clic en el elemento web deseado dentro de la página web. Como resultado, se resaltarían las propiedades HTML correspondientes.
Por lo tanto, al usar la herramienta de desarrollo, un usuario puede encontrar identificadores, clases, nombres de etiquetas y puede crear Xpaths para ubicar elementos web.
Al igual que la herramienta para desarrolladores de Chrome, la herramienta para desarrolladores de IE tiene una sección separada que muestra información relacionada con CSS. Mira la captura de pantalla a continuación.
Conclusión
En este tutorial, arrojamos luz sobre las estrategias básicas de localización de elementos utilizando la herramienta para desarrolladores para Google Chrome e Internet Explorer.
Siguiente tutorial n. ° 8 : Continuando con nuestro próximo tutorial, tendremos el placer de presentarle una herramienta más avanzada llamada WebDriver. WebDriver es una de las herramientas de prueba de automatización más atractivas. Así que nuestro próximo tutorial en adelante, enrutaríamos y basaríamos nuestras discusiones en WebDriver y todo su meollo.
Lectura recomendada
- Verifique la visibilidad de los elementos web usando varios tipos de comandos de WebDriver - Tutorial de Selenium n. ° 14
- Introducción a Selenium WebDriver - Tutorial de Selenium n. ° 8
- Cómo usar el selector CSS para identificar elementos web para scripts de Selenium - Tutorial de Selenium n. ° 6
- Scripts eficientes de Selenium y escenarios de resolución de problemas: tutorial de Selenium n. ° 27
- Depuración de scripts de Selenium con registros (Tutorial de Log4j) - Tutorial de Selenium n. ° 26
- Más de 30 mejores tutoriales de selenio: aprenda selenio con ejemplos reales
- Tutorial de Cucumber Selenium: Integración de Cucumber Java Selenium WebDriver
- Uso de la clase selecta de selenio para manejar elementos desplegables en una página web - Tutorial de selenio n. ° 13