049 - UIAutomatorViewer

¡Hola a todos!

En esta entrada hablaremos de otra herramienta para inspeccionar los elementos de las aplicaciones, exclusiva para Android. ¡Comenzamos!

¿Qué es UIAutomatorViewer?

Como alternativa a Appium Inspector, podemos utilizar (sólo para Android) la herramienta UIAutomatorViewer que viene por defecto dentro del SDK de Android.

UIautomatorviewer es una aplicación de GUI que analiza los componentes de interfaz de usuario de una aplicación de Android. Para automatizar cualquier aplicación de Android utilizando Appium, necesitamos identificar los objetos AUT (Application under test / objetos de la aplicación a probar). Con UIAutomatorViewer podemos inspeccionar la UI de una aplicación de Android y descubrir el árbol DOM de la aplicación, además de ver las propiedades de las diferentes vistas (id, text…) de un elemento.

Interfaz de UIAutomatorViewer con tres paneles etiquetados: la imagen de la app, el árbol DOM de la pantalla y las propiedades de cada objeto.

¿Cómo descargar e instalar UIAutomator?

Uiautomatorviewer está incluido dentro del SDK de Android y está incluido en el SDK manager. Podemos descargar el Android SDK aquí.

Una vez que tengamos el SDK instalado, nos iremos a la carpeta donde tenemos el SDK instalado:

Para usuarios de Windows:

1
C:\users\<username>\AppData\Local\Android\sdk\tools\bin

Para usuarios de Mac:

1
/Users/<username>/Library/Android/sdk/tools/bin

Una vez que estemos en la carpeta, ejecutaremos el fichero (doble click en): UIAutomatorViewer y se abrirá la aplicación:

Aplicación UIAutomatorViewer abierta tras ejecutarla desde la carpeta tools/bin del SDK.

¿Cómo utilizar UIAutomatorViewer?

En primer lugar, debemos tener el emulador de Android ejecutándose y después debemos instalar el apk que queremos inspeccionar. Esto es tan sencillo como arrastrar un apk dentro del emulador:

Gif arrastrando un APK al emulador de Android para instalarlo.

Una vez que tengamos la aplicación abierta y el UIAutomatorViewer abierto, hacemos click en el botón de Device screenshot del UIAutomatorViewer:

Botón Device screenshot en UIAutomatorViewer.

Al refrescar la pantalla aparecerá la pantalla del emulador con la aplicación y seremos capaces de ver todos los elementos:

UIAutomatorViewer mostrando la pantalla del emulador junto al árbol de elementos.

Como podemos ver en la imagen, tenemos dos paneles:

En la primera parte del panel (arriba a la derecha) aparece el DOM de la página así como todos los contenedores y elementos que aparecen.
Al hacer click en un botón, además de aparecer la parte del árbol donde está, en la segunda parte del panel (abajo a la derecha) aparecen las propiedades de los elementos, como, por ejemplo: text, resource-id…

UIAutomatorViewer mostrando las propiedades de un elemento seleccionado, como text y resource-id.

Posibles errores en UIAutomator.

Aunque UIAutomatorViewer funciona bastante bien (a veces incluso mejor que Appium Inspector), hay veces que podemos encontrarnos errores como este:

Mensaje de error mostrado por UIAutomatorViewer.

Este tipo de errores se solucionan:

Si tienes un emulador, reinicia el emulador y vuelve a utilizar UIAutomatorViewer.
Si estás usando un dispositivo físico, asegurate de que está bien conectado con las developer options activas.

Y hasta aqui nuestro tutorial de UIAutomatorViewer. En el próximo artículo hablaremos de cómo crear un script para ejecutar emuladores en Android.

¡Nos leemos en la siguiente entrada!