Appium Inspector Tutorial – Parte 1

Appium Inspector es el siguiente conjunto de artículos de nuestra serie de tutoriales de Appium. Esta es una serie de 4-5 artículos que le ayudarán a aprender el proceso de identificación de los elementos en su aplicación móvil. Empecemos por entender qué es el proceso de inspección de Appium.

¿Qué es el proceso de inspección de Appium?

En palabras muy sencillas, la inspección de Appium es el proceso mediante el cual puedes identificar o encontrar elementos en tu aplicación móvil. Si desea automatizar cualquier escenario en su aplicación móvil, entonces tendría que seguir estos 2 pasos –

• Paso 1: Identificar el elemento de forma única
• Paso 2: Realizar una acción en el elemento identificado

El proceso de inspección de Appium le ayuda a resolver el primer paso mencionado anteriormente. Por ejemplo, supongamos que tienes una aplicación con una pantalla de inicio de sesión. Ahora su tarea es introducir el nombre de usuario y la contraseña en esta pantalla. Aquí, el proceso de inspección de Appium te ayudaría a «inspeccionar» la pantalla y luego te permitiría identificar de forma única los campos de texto. De esta forma podrás escribir un código que introduzca el id de usuario y la contraseña en los campos correctos.

Veamos ahora las herramientas que puedes utilizar para inspeccionar estos elementos.

Diferentes inspectores de Appium que te ayudan a identificar elementos en la aplicación móvil

Hay muchas herramientas diferentes que te ayudan a inspeccionar elementos en las aplicaciones móviles. Pero para nuestra serie de tutoriales de Appium, cubriremos las herramientas más populares y ampliamente utilizadas (y soportadas por Android o Appium). Estas herramientas son –

• UIAutomatorViewer: Es una herramienta proporcionada por Android Studio que permite inspeccionar los elementos de la aplicación móvil
• Appium Desktop Inspector: La última versión de la GUI de Appium (Appium Desktop) viene con un inspector. Puedes usar este inspector tanto para aplicaciones Android como iOS (para aplicaciones iOS, necesitarías un Mac)

En este artículo, empezaremos con los fundamentos de UIAutomatorViewer. Los próximos artículos de esta serie cubrirán en detalle, las diferentes formas en que puede inspeccionar su aplicación móvil utilizando tanto UIAutomatorViewer y Appium Desktop Inspector.

Cómo abrir UIAutomatorViewer

UIAutomatorViewer viene con el paquete de instalación de Android Studio. Así que cuando instalas Android Studio, UIAutomatorViewer se instalaría automáticamente con él. Hay 2 maneras en que usted puede abrir UIAutomatorViewer. Usted puede seguir cualquiera de estos métodos para abrirlo –

Nota importante: Por favor, asegúrese de que ha seguido nuestra guía Appium Tutorial y han instalado la última versión de Android Studio y configurar correctamente las variables de entorno de Android.

Método 1: Abrir UIAutomatorViewer desde el símbolo del sistema Esta es la forma más fácil de abrir UIAutomatorViewer. Sólo tienes que seguir los pasos dados a continuación para abrirlo –

Paso 1.1: Abra el símbolo del sistema

Paso 1.2: Escriba uiautomatorviewer y luego pulse Enter

Espere un par de segundos. La ventana de UIAutomatorViewer se abrirá como se muestra a continuación

Método 2: Abrir UIAutomatorViewer desde su ubicación en la carpeta UIAutomatorViewer se instala en su máquina como un archivo .bat. Usando este método, usted navegará a la ubicación de la carpeta donde está instalado y luego abrirlo. Siga los pasos indicados a continuación para utilizar este método –

Paso 2.1: Abra la ubicación de la carpeta donde está instalado UIAutomatorViewer. Por lo general, esta ubicación es – C:\NUsers\Anish\AppData\Local\Android\sdk\tools\bin (Reemplazar ‘Anish’ con el nombre de usuario que tiene en su máquina)

Paso 2.2: Compruebe que esta carpeta bin contiene uiautomatorviewer

Paso 2.3: Haga doble clic en uiautomatorviewer. Se abrirá la ventana de UI Automator Viewer en un par de segundos

Como habíamos mencionado anteriormente, puede utilizar cualquiera de estos métodos para abrir UI Automator Viewer.

Conecte su teléfono móvil a su máquina mediante USB

Antes de empezar a inspeccionar los elementos de su aplicación móvil, primero necesita conectar su dispositivo móvil a su máquina mediante USB. Siga los siguientes pasos para hacerlo –

Paso 1: Conecte su teléfono móvil a su máquina mediante USB

Paso 2: Para asegurarse de que el teléfono está conectado correctamente, abra el símbolo del sistema y ejecute el comando adb devices.

Cuando ejecute este comando, se mostrará el ID del dispositivo del teléfono móvil. Esto significa que el teléfono móvil está conectado correctamente a su máquina.

Paso 3: Ahora tendrá que abrir la aplicación que desea inspeccionar. Al igual que en los artículos anteriores de nuestra serie de tutoriales de Appium, en este caso también utilizaremos la app de Google Play Store como ejemplo. Así pues, abre la aplicación Play Store en tu teléfono

Inspecciona la aplicación móvil con UI Automator Viewer

Sigue los pasos indicados a continuación para inspeccionar tu aplicación móvil con UI Automator Viewer –

Paso 1: Asegúrate de que tu teléfono móvil está conectado correctamente con el USB. Además, asegúrese de que está desbloqueado y de que la aplicación Play Store está abierta

Paso 2: Ahora haga clic en el icono de Captura de pantalla del dispositivo en UI Automator Viewer (este es el segundo icono como se muestra en la siguiente imagen)

Nota: Se habrá dado cuenta de que hay otros iconos junto al icono de Captura de pantalla del dispositivo en el que acaba de hacer clic. En este artículo, no vamos a explicar la funcionalidad de estos iconos. Los cubriremos en nuestros próximos artículos sobre Appium Inspector.

Paso 3: Verás un mensaje emergente que muestra la información de progreso como se muestra a continuación

Paso 4: Espera unos segundos para que UI Automator Viewer procese toda la información de tu pantalla. Una vez hecho esto, UI AUtomator Viewer cargará la captura de pantalla de su teléfono como se muestra en la siguiente imagen

Paso 5: Ahora, pase el puntero del ratón por cualquier parte de la captura de pantalla del dispositivo. Verá que se muestra alguna información en los paneles del lado derecho

Entendamos lo que está sucediendo aquí

Hagamos una pausa por un momento y tratemos de entender lo que sucedió aquí. Cuando se hace clic en el icono de captura de pantalla del dispositivo, entonces UI Automator Viewer hace las siguientes tres cosas –

• Primero captura los detalles de todos los objetos visibles en la pantalla en formato XML.
• Luego captura la pantalla del móvil en formato PNG
• Una vez capturados los detalles anteriores, UI Automator Viewer muestra ambas cosas en la UI

Nota importante: Técnicamente hablando, UI Automator Viewer sólo captura la pantalla del móvil. Así que lo que se muestra en el dispositivo, UI Automator Viewer capturaría eso. Ya sea cualquier aplicación, o su pantalla de inicio o incluso la pantalla de bloqueo.

3 secciones principales en UI Automator Viewer

Desde la siguiente imagen, se puede ver que UI Automator Viewer tiene 3 secciones principales –

1. Panel lateral izquierdo: Este panel muestra la captura de pantalla del dispositivo. Se trata de una imagen interactiva, en la que puede hacer clic o pasar el puntero del ratón sobre cualquier elemento de la captura de pantalla.

2. Panel superior del lado derecho: Este panel muestra toda la estructura XML de la pantalla. Esta estructura XML muestra detalles muy básicos sobre cada control – nombre del control, su texto (si está disponible) y sus coordenadas.

3. Panel inferior derecho: Este es un panel importante que muestra todos los detalles de un control. Cualquiera que sea el elemento que seleccione en la captura de pantalla, este panel mostrará todos sus detalles como su texto, nombre de la clase, nombre del paquete, etc. Este es el panel desde el que obtendrá información sobre cómo identificar un elemento de forma única.

Hasta ahora, hemos hablado de los fundamentos de UI Automator Viewer, cómo abrirlo y cómo puede cargar la captura de pantalla de la aplicación móvil en él. Vamos a detener este artículo aquí y cubrir la parte restante en el próximo artículo. Hay múltiples formas de identificar un elemento con Appium. Discutiremos todo eso y mucho más en nuestros próximos artículos sobre Appium Inspector.

Prueba tú mismo la actividad: En uno de los apartados anteriores, hemos mencionado que necesitas conectar tu dispositivo móvil a tu ordenador mediante un cable USB. ¿Sabías que también puedes hacerlo en modo inalámbrico? Echa un vistazo a este artículo que muestra cómo puedes ejecutar tus scripts de prueba de Appium a través de WiFi. Usando este artículo como referencia, intente conectar su dispositivo móvil a través de WiFi y luego vea si puede inspeccionar algún elemento.

No dudes en ponerte en contacto con nosotros si tienes algún problema con alguna de las secciones anteriores, o si tienes algún comentario para nosotros. Nos encantaría escuchar sus comentarios ya que nos ayudan a mejorar nuestros artículos y hacerlos más útiles para todos nuestros lectores.

Siguiente conjunto de artículos sobre Appium Inspector

• Aprende a inspeccionar elementos usando UIAutomatorViewer
• Aprende más sobre UI Automator Viewer incluyendo algunas limitaciones de la automatización móvil
• Aprende sobre los fundamentos de Appium Desktop Inspector
• Inspecciona elementos móviles usando Appium Desktop Inspector