Tema 2.5 - UIAutomatorViewer

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 herramienta GUI para escanear y analizar los componentes de la interfaz de usuario de una aplicación de Android. Para automatizar cualquier aplicación de Android con Appium, el usuario debe identificar los objetos en AUT (Aplicación bajo prueba). Con "UIAutomatorViewer. puede inspeccionar la interfaz de usuario de una aplicación de Android para averiguar la jerarquía y ver las diferentes propiedades (id, nombre, texto ...) del elemento.

Mientras ejecuta scripts de automatización, Appium usa "UIAutomatorViewer" para identificar diferentes propiedades del objeto y las usa para identificar el objeto requerido.

Cómo localizar elementos usando UIAutomatorViewer

El primer paso antes de ubicar cualquier elemento en el dispositivo donde se va a realizar los tests es conectar primero el dispositivo con su computadora o si está utilizando un emulador activar este. igualmente tener activo el servidor Appium. para este ejemplo utilizaremos el emulador de android ofrecido por Android Studio

Abrimos una carpeta y escribimos en la barra de direcciones: C:\Users\NOMBRE_USUARIO\AppData\Local\Android\Sdk

En el NOMBRE_USUARIO escribimos nuestro usuario windows, en este caso la ruta de ejemplo es:

C:\Users\QV3224\AppData\Local\Android\Sdk

Luego nos dirigimos al directorio TOOLS y luego a bin

Una vez dentro del directorio encontraremos varios archivos .bat, nos enfocaremos en el UIAutomatorViewer, estando en la carpeta en la barra de direcciones pondremos: cmd

Damos ENTER e inmediatamente se nos abrirá la consola Windows, en esta ingresamos:

UIAutomatorViewer.bat y damos ENTER

La herramienta se desplegará en una ventana de la siguiente manera

Ahora si quieres ver una captura de pantalla del dispositivo con el que estamos trabajando directamente en la herramienta UIAutomatorviewer, debes de oprimir el siguiente botón:

Nota: Asegúrese de que la aplicación esté abierta antes de hacer clic en Captura de pantalla del dispositivo, significa que la pantalla del dispositivo no debe estar apagada y bloqueada.

Explicando detalladamente la interfaz de la herramienta encontraremos 3 espacios que resaltan en esta.

1. Imagen del dispositivo y Elemento seleccionado: En este espacio encontraremos la imagen capturada anteriormente con sus elementos, al seleccionar un elemento en la aplicación podemos observar cómo se resalta con un cuadro rojo
2. Espacio de Nodos de la aplicación: En este lugar se encuentra la información detallada de los nodos del árbol de la aplicación.
3. Propiedades del elemento seleccionado: En este lugar encontrará la información detallada de las propiedades del elemento previamente seleccionado en (1)

Cómo guardar la captura de pantalla y los archivos UiX en UIAutomatorViewer

Esta es una funcionalidad bastante útil para guardar diferentes pantallas de su dispositivo. mientras utiliza UIAutomatorviewer, notará que necesita tomar la captura de pantalla del dispositivo una y otra vez de la misma página y eso requiere que siempre se conecte con su dispositivo. Con esta característica de UIAutomatorViewer, se pueden guardar capturas de pantalla y archivos UIX y se pueden usar más tarde cuando el dispositivo no está conectado.

1)    Una vez que se toma la captura de pantalla del dispositivo que se muestra en la ventana de UIAutomatorviewer, haga clic en el botón Guardar

2)    Se abrirá la pequeña ventana que se verá como la imagen de abajo.

Ahora elija la ubicación para guardar ambos archivos (Captura de pantalla y archivo UiX).

Vaya a la misma ubicación y observe que se han guardado dos archivos en la ubicación seleccionada, uno es su captura de pantalla de la pantalla del dispositivo y otro son los archivos UiX que contienen la estructura del nodo y las propiedades de todos los elementos.

Como abrir los archivos UIX

Después de guardar todas las capturas de pantalla de las diferentes pantallas de su aplicación, es el momento de ver cómo abrir la captura de pantalla deseada.

1) Haga clic en el botón Abrir de la ventana UIAutomator . Se abrirá una pequeña ventana.

2) Ahora explore la captura de pantalla y el archivo UiX y haga clic en el botón Aceptar.

Aparecerá una captura de pantalla con toda la información del nodo y los valores de los elementos de la pantalla seleccionada. Puede comenzar a usarlo para la automatización ahora y no es necesario conectarse con el dispositivo para leer las propiedades de la aplicación.

Buscar e Inspeccionar elementos móviles

Lo siguiente que debe hacer es interactuar con los diferentes elementos de la aplicación y para eso es necesario ubicar los elementos primero antes de interactuar. La localización de elementos se puede hacer en la instancia de AndroidDriver , ya que nos brinda el método 'Find Element' y ' Find Elements' para ubicar elementos en Appium.

Appium proporciona algunas formas diferentes de identificar elementos móviles. Si está familiarizado con Selenium, puede ver que la mayoría de estos métodos de identificación son los mismos que en Selenium WebDriver. Estos métodos de identificación se dan a continuación:

• Buscar elemento por ID
• Buscar elemento por ClassName
• Buscar elemento por Tag Name
• Buscar elemento por Accessibility ID
• Buscar elemento por XPath

La siguiente imagen muestra estos métodos de identificación de elementos en Eclipse IDE. Tenga en cuenta que la imagen a continuación muestra algunos métodos que se tachan. Esto se debe a que estos métodos no están disponibles para usarse en las versiones más recientes de Appium. Estos métodos todavía se muestran simplemente porque Appium está construido sobre Selenium Webdriver, Selenium web drive utiliza estos métodos, por lo que también están expuestos en Appium.

Nota: el uso de WebElement le permitirá usar todos los comandos normales de Selenium Web Driver. MobileElement es el elemento de appium que subclasifica WebElement y agrega funciones específicas de appium (como poder realizar gestos táctiles). Puede utilizar ciualquiera de estos 2, recuerde que si necesita funciones especificas (Como gestos tactiles) se recomienda utilizar MobileElement

Pero si intenta utilizar cualquiera de los métodos tachados en la imagen anterior, verá un mensaje de InvalidSelectorException . Por ejemplo, si intenta utilizar el método findElementByName (), obtendrá InvalidSelectorException: Mensaje: la estrategia del localizador "name” no es compatible con esta sesión".

Para comprender la identificación de elementos con UI Automator Viewer, tomemos un pequeño escenario que intentaremos automatizar. Hemos descrito este escenario en la siguiente sección.

Escenario de automatización para identificar elementos utilizando UIAutomatorViewer

• Abra la aplicación 'Google Play Store' en el dispositivo a probar, en nuestro caso en el emulador de Android Studio
• Toque el cuadro de texto 'Google Play'
• Aparecería el cuadro de texto ‘Search for apps & games’
• Ingrese ‘QVision’ en el cuadro de texto y toque la tecla Intro en su teclado para mostrar los resultados de búsqueda

Ejecutamos la herramienta UIAutomatorviewer para comenzar la inspeccion de elementos

Haga clic en el elemento ‘Search for apps & games’ en UIAutomatorViewer, para que se muestren sus detalles

Nota importante: Verifique la sección Detalles del nodo en la imagen a continuación. Los identificadores marcados dentro del cuadro son los más importantes. Estos son los identificadores que usaría más comúnmente para identificar el elemento móvil. Si no puede identificar los elementos usando alguno de sus selectores o identificadores, entonces probablemente tenga que utilizar el selector XPath

Además, eche un vistazo en la siguiente imagen a la asignación de diferentes selectores. Esta es solo una manera fácil de averiguar qué método de elemento de búsqueda se utiliza y con qué Selector.

Encontrar un elemento usando el selector ID

1
2
3
4
5

//Encontrar un elemento usando el selector ID
driver.findElement(By.id("com.android.vending:id/main_nav_item")).click();
//OR
driver.findElementById("com.android.vending:id/main_nav_item").click();
//O Puede utilizar el selector AccessibilityID Mediante el valor del Content-desc

Encontrar elemento usando el selector XPath

1
2
3
4

//Encontrar un elemento usando el selector XPATH
driver.findElement(By.xpath("//android.widget.TextView[@text = 'Search for apps & games']")).click();
//OR
driver.findElementByXPath("//android.widget.TextView[@text = 'Search for apps & games']");

Con los 2 metodos de selectores que se explicaran acontinuacion podremos buscar el elemento “Show Navegation” mediante su AccessibilityID e igualmente mediante su ClassName y su content-desc, esto no nos lo pide el escenario, solo se realiza para explicar el selector AccessibilityID y el selector ClassName con el atributo Content-Desc.

Encontrar elemento usando el selector AccessibilityID (El cual hace referencia al campo de UiAutomatorViewer: Content-desc)

1
2

//Encontrar elemento mediante el selector Accessibility ID
driver.findElementByAccessibilityId("Show navigation drawer").click();

Encontrar elemento usando el selector ClassName y el metodo findElement()

1
2
3
4
5
6
7
8
9

//Encontrar un elemento usando el ClassName y el metodo findElement()
	List<WebElement> elements = driver.findElements(By.className("android.widget.ImageView"));
	for(WebElement element : elements) {
		if(element.getAttribute("contentDescription").equals("Show navigation drawer")) {
			element.click();
			
			break;
		}
	}

Nota importante 1: El valor de la propiedad @content-desc se puede obtener en tiempo de ejecución utilizando el método getAttribute () y pasando el nombre del atributo como "contentDescription" como se muestra en la línea 4 del codigo anterior.

Nota importante 2: content-desc sería la propiedad ideal que puede usar en sus scripts de automatización de prueba. Esto se debe al hecho de que los desarrolladores de aplicaciones pueden establecer el valor de esta propiedad. Es posible que no puedan establecer la propiedad para resource-id siempre, porque muchas veces, el valor de id del recurso lo establece el marco subyacente de Android o iOS.

Ahora realizamos el escenario pedido obteniendo el codigo:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

public class Appium_Test {

	
	AndroidDriver<WebElement> driver;
		
		
		@BeforeClass
		public void setup() throws MalformedURLException{
		
	    //URL del servidor
		URL url = new URL("http://127.0.0.1:4723/wd/hub");
	
		DesiredCapabilities dc = new DesiredCapabilities();
		
		//Establecemos el nombre para la automatizacion
		dc.setCapability(MobileCapabilityType.AUTOMATION_NAME, "Appium");
		//Establecemos el nombre de la plataforma sobre la cual trabajaremos
		dc.setCapability(MobileCapabilityType.PLATFORM_NAME, "Android");
		//Establecemos el nombre del dispositivo a utilizar, ya sea emulador o no
		dc.setCapability(MobileCapabilityType.DEVICE_NAME, "Android Emulator");
        //Establecemos la ruta de la appPackage de la app a testear
		dc.setCapability("appPackage", "com.android.vending");
		//Establecemos la ruta de la appActivity de la app a testear
		dc.setCapability("appActivity", "com.android.vending.AssetBrowserActivity");
		
		driver = new AndroidDriver<WebElement>(url, dc);
		driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
		
		}	 
	
		@Test
		public void testOperacion() throws Exception {
		
		//Clic a la caja de busqueda de la pantalla de inicio
		driver.findElement(By.id("com.android.vending:id/search_bar_hint")).click();
		//Localizamos el elemento donde escribiremos la busqueda mediante su XPATH y su Text
		WebElement inputText = driver.findElement(By.xpath("//android.widget.EditText[@text = 'Search for apps & games']"));
        //Enviamos el texto a buscar
		inputText.sendKeys("google"+"\n");
		//Establecemos una espera implicita
		driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
		
		}
		
		@AfterClass
		public void teardown(){
			driver.quit();
		}
	
}