QUnit/OPA/Karma – Bonus – Test recorder (UI5)

Introducción

En algunos post anteriores expliqué como automatizar los test de las aplicaciones UI5 mediante dos frameworks de testing QUnit y OPA. Pero, ¿Como lo hacemos para poder programar esos test de manera más rapida? y si esos test los genera la capa funcional… pero… ¿Debemos invertir tiempo en que los funcionales aprendan a programar?

Antes de continuar te recomiendo la lectura de los post anteriores para entender bien estos frameworks.

• Qunit/OPA/karma – vol 1 – Test unitarios de ui5
• Qunit/OPA/karma – vol 2 – Automatización de test
• Qunit/OPA/karma – vol 3 – Test integrados usando opa

Si ya conoces estos frameworks vamos a ver una herramienta que nos va a facilitar la programación de estos test.

UI5 Test – Recorder

Este plugin para Chrome es tan fácil de utilizar como instalar y utilizar. En su página web tenemos mas información sobre el plugin: https://msg-systems.github.io/ui5-testrecorder/README.html

Instalación

Mediante el siguiente enlace podéis instalar el plugin, acordaros que es para chrome:

https://chrome.google.com/webstore/detail/ui5-test-recorder/hcpkckcanianjcbiigbklddcpfiljmhj

Creando una grabación

El pluguin graba las acciones que realiza el usuario y las convierte en código que podemos copiar y añadir a la configuración de los test.

Para este ejemplo utilizaremos como referencia la página oficial de ejemplos de SAPUI5: https://sapui5.hana.ondemand.com/#/demoapps

Una vez instalado, accedemos des del icono al plugin:

Aparecerá la lista de pestañas con componentes UI5 de manera automática:

Para iniciar la grabación pulsamos sobre la fila que tiene la URL a analizar, una vez pulsado veremos que los elementos de la pantalla por los que vamos pasando con el ratón se volverán amarillos. En el siguiente caso, movemos el ratón hacia «Accessories».

Al pulsar sobre el elemento «no pasa nada» pero si nos dirigimos a la ventana abierta por el plugin podemos ver que nos muestra el listado de propiedades. Estas propiedades son todas las que identifican un componente de la pantalla, el porcentaje nos permite saber que elementos son los mejores para identificar ese elemento.

Una vez tenemos el elemento seleccionado, nos muestra la acción que deberá hacer el framework, un resumen de los atributos de selección, los possibles elementos encontrados con ese filtro y por ultimo el código a programar para añadir a nuestro framework.

En el ejemplo anterior simularemos que pulsamos sobre el primer elemento de la lista. Ya tenemos todo listo para seguir, pulsaremos sobre el botón «Save step» para continuar interactuando con la aplicación.

En la siguiente vista validaremos que después del click el siguiente listado tiene un elemento con el nombre «10 » Portable DVD player». Así que pulsamos sobre ese elemento.

Volvemos a la pantalla del plugin y veremos que esta vez las opciones que nos muestra el plugin son para identificar un texto en la pantalla:

El plugin detecta el tipo de componente que seleccionamos para ajustar la prueba de manera automática. Con los atributos forzaremos a buscar exactamente un elemento con el texto que queremos en la lista de productos.

Como en el paso anterior, para finalizar pulsamos sobre «Save Step». Ya tenemos todo listo para generar nuestro caso de prueba.

Resumen de la grabación y lanzamiento de prueba

Si volvemos a la pantalla del plugin nos aparecerá la opción de parar la grabación. Cuando paremos la grabación veremos un resumen de los pasos del plugin. No hay ningun problema en pararla ya que se puede volver a reactivar cuando lo necesiteis.

Pero en este caso, vamos a simular que ya hemos hecho todos los pasos que queríamos. Este es el resultado:

Lo primero sera pulsar el botón «Save» para guardar la prueba. En este punto hay que vigilar ya que si se cierra el navegador o el plugin se pierden los datos.

Lo siguiente que haremos es volver a ejecutar la prueba para validar que funciona. Para ello, en el seleccionable «Manual» seleccionamos «Medium (1 segundo)» y «Start replay». Con esto, veremos como se ejecuta el test paso a paso, en este caso, 1 segundo por paso. Una vez finalizado podremos ver si se ha ejecutado el test o ha fallado algun paso.

Ahora que hemos validado que la prueba es correcta, ya podemos utilizarla para añadir en nuestros test automatizados. Esto lo podemos hacer des de la pestaña «Code», donde también tendremos la opcion de descargar los ficheros necesarios para añadir a nuestro testing. Podemos ver las distintas opciones de testing en el desplegable «Language».

---

Como veis, gracias esta herramienta podremos generar test de manera ágil, sin la necesidad de tener que desarrollar el test. Esto nos abre un abanico muy grande a la hora de preparar los test ya que lo puede realizar una persona de la capa funcional o un usuario avanzado.

Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última.