Last Updated: 2019-04-30

¿Por qué probar la intercomunicación entre usuarios?

Gran parte de las aplicaciones modernas realizan un manejo de cuentas de usuario, lo que permite la interacción entre diferentes individuos, representados como entidades independientes dentro del sistema. En ocasiones, esto pone a la plataforma como un intermediario entre actores más que como un sujeto de interacción. Por ende, la interacción entre un usuario y una aplicación, sin tener en cuenta a otros usuarios, no siempre basta para conocer las funcionalidades que se ofrecen. Particularmente, las aplicaciones web suelen tener comportamientos de comunicación entre varios usuarios por medio de sockets u otras tecnologías, y usualmente la generación de enlaces de invitación.

Otra forma de entender la intercomunicación entre usuarios va más allá de la interacción de dos personas con una misma aplicación, puesto que algunas aplicaciones tienen funcionalidades que implican la señalización con otras.

Todas estas funcionalidades generan la necesidad de realizar pruebas teniendo en cuenta todos los posibles eventos de fuentes externas al sistema mismo.

¿Qué es Kraken?

Kraken es una herramienta de código abierto para realizar pruebas automáticas del tipo E2E con aplicaciones móviles para Android y también con aplicaciones web. Esta soporta escenarios donde es requerida la intercomunicación entre usuarios o dispositivos. El proyecto fue desarrollado haciendo uso de Cucumber y Calabash, que son librerías manejadas por Ruby para realizar pruebas por medio de una notación que asemeja el lenguaje natural y permiten crear escenarios a través de la especificación de ejemplos. Su extensión para aplicaciones web se maneja por medio de los drivers Geckodriver/Chromedriver y Selenium webDriver.

Para acceder a Kraken, debe ingresar a la página web de descripción del proyecto en el siguiente enlace: https://thesoftwaredesignlab.github.io/KrakenMobile. Allí podrá encontrar información detallada sobre el proyecto y, en la parte izquierda, tres enlaces donde puede obtener el código fuente del proyecto. Sin embargo, Kraken también se distribuye por medio de una gema de Ruby. En este tutorial, obtendrá la herramienta por medio del código fuente con las instrucciones que se indican en los pasos posteriores.

¿Qué construirá?

Al final de este tutorial, usted tendrá:

• Un proyecto de Kraken con un escenario que permite la interacción de usuarios en un tablero online del sitio notebookcast.com.
• Un directorio que contiene un reporte en HTML con los resultados de la prueba.

¿Qué aprenderá?

Al final de este tutorial, usted habrá aprendido:

• Cómo crear escenarios en Kraken.
• Cómo instalar la herramienta Kraken-mobile en su máquina local. (Ya sea desde rubygems o desde el código fuente)
• Cómo probar funcionalidades de intercomunicación en una aplicación web en el navegador Chrome.

¿Qué necesita?

• Ruby + DevKit, en una versión igual o superior a la 2.20. (Puede aprender más sobre la instalación en este enlace: https://www.ruby-lang.org/es/documentation/installation/).
• JDK instalado en una versión de Java igual o superior a la 8.
• SDK de Android instalado. (Puede aprender más sobre la instalación en este enlace: https://developer.android.com/studio).
• El driver Chromedriver instalado en su máquina. (Puede obtener el driver desde este enlace: https://chromedriver.chromium.org/downloads).

Comprender las funcionalidades

Kraken ofrece un amplio catálogo de funcionalidades que permiten probar una aplicación móvil. Es importante tener en cuenta que, dado que Kraken opera en una modalidad de caja negra, no conoce las particularidades de cada aplicación. Por ende, las funcionalidades se limitan a lo que podría hacer un usuario común sobre el navegador y la aplicación por medio de la interfaz gráfica.

No obstante, Kraken tiene 5 funcionalidades principales que resaltan con respecto a otras librerías y herramientas de pruebas E2E. En primer lugar se tienen las funcionalidades de 1) enviar y 2) recibir una señal. Estas son relevantes dado que Kraken funciona por medio de un protocolo de señalización y estas operaciones permiten personalizar la ejecución y la sincronía de la prueba al hacer que un usuario espere por una indicación brindada por otro usuario. Además, permiten abstraer mensajes y eventos que no podrían ser percibidos con la aproximación de caja negra.

En segundo lugar, se tienen las funcionalidades que inducen aleatoriedad, es decir que permite 3) generar eventos aleatorios sobre la interfaz gráfica de una aplicación y 4) generar señales y otros eventos propios de Kraken de forma aleatoria. Estos permiten una exploración no sesgada del comportamiento de las aplicaciones a probar.

Finalmente, se cuenta con la posibilidad de 5) especificar un conjunto de datos relevantes para la prueba. Esto incluye la especificación de credenciales para inicio de sesión, valores para completar campos de entrada, entre otros.

Si desea conocer el detalle de las funcionalidades acá indicadas y su funcionamiento dentro del proyecto, puede consultar el documento de demostración de la herramienta en el siguiente enlace: https://thesoftwaredesignlab.github.io/KrakenMobile/assets/pdfs/ravelo2019kraken.pdf

Comprender la estructura de un proyecto de Kraken-Mobile

Un proyecto básico de Kraken contiene un directorio raíz llamado ‘features', el cual contiene la estructura de archivos necesaria para ejecutar un escenario de prueba sobre una aplicación. El esqueleto que genera la plantilla de Kraken contiene 3 subdirectorios y un archivo, como se ve en la imagen a continuación:

Imagen 2. Estructura básica de un proyecto de Kraken

En el directorio ‘step_definitions' se encuentra un archivo con el nombre ‘web', el cual sirve para importar las funcionalidades o pasos ofrecidos por Kraken y usarlos para probar aplicaciones web. En el directorio ‘support' se encuentran los archivos ‘app_instalation_hooks', ‘app_life_cycle_hooks' y ‘env', los cuales sirven para configurar el comportamiento respectivo a la instalación, desinstalación y manejo de la aplicación que se va a probar en los dispositivos conectados; para configurar el ciclo de vida del servidor con respecto a la ejecución de la prueba; y para importar librerías y configuraciones particulares para el entorno de prueba en el navegador elegido.

Finalmente, el archivo ‘my_first.feature' contiene las instrucciones que permitirán ejecutar el escenario de prueba con dos usuarios que se comunican por medio de señales, como lo muestra la siguiente imagen:

Imagen 3. Instrucciones de ejemplo para crear escenarios

Configurar las variables de entorno

Como se ha indicado previamente, Kraken usa las librerías Cucumber y Calabash. Por ende, para lograr un correcto funcionamiento de Kraken, debe asegurarse que los requisitos de estas librerías se cumplen, aún cuando en este tutorial no se utilizarán las funcionalidades de Kraken para automatizar aplicaciones Android con Calabash. Siguiendo la documentación de los requerimientos para ejecutar Calabash (los cuales puede ver en mayor detalle en el siguiente enlace: https://github.com/calabash/calabash-android/blob/master/documentation/installation.md), en la sección de introducción de este tutorial se le indicó la necesidad de tener instalado Java con su JDK y el SDK de Android. Además de la instalación, es necesario que cree dos variables de entorno que Calabash utilizará para conocer la ubicación de estas herramientas.

La primera variable tendrá el nombre JAVA_HOME y debe tener como valor la ruta absoluta del directorio donde se encuentra el JDK.

La segunda variable tendrá el nombre ANDROID_HOME y debe tener como valor la ruta absoluta del directorio donde se encuentra el Kit de desarrollo de Android.

En caso de que su sistema operativo sea basado en Linux, puede crear una variable de entorno por medio de la terminal, escribiendo en ella el siguiente comando:

export <nombre-variable>=<valor>

Donde <nombre-variable> es el nombre de la variable y <valor> es el valor que le dará.

En el caso de Windows, debe acceder a una interfaz de configuración, a la cual puede llegar con los siguientes pasos: abra un explorador de archivos, haga clic derecho sobre el componente "Este equipo", seleccione la opción "Propiedades" y, en la ventana desplegada, haga clic sobre la opción "Configuración avanzada del sistema". Esto le mostrará una vista como la de la siguiente imagen:

Imagen 4. Panel de configuración de variables de entorno en Win10

Haga clic en el botón "Variables de entorno", luego en el botón "Nueva" para el usuario y llene el formulario con el nombre y el valor de la variable.

Instalar Kraken-Mobile desde la gema (No recomendado)

Nota: Kraken-Mobile es un proyecto actualmente en construcción. Por ende, la gema de rubygems.org no cuenta con la última versión actualizada. Este tutorial se realizó con la versión del código fuente en la rama master a la fecha del 20 de Marzo de 2020. Se recomienda que instale la herramienta desde el código fuente.

Como se indicó en la sección introductoria, y como lo indica la página oficial de Kraken, la herramienta puede ser distribuida por medio de una gema de Ruby. Por este motivo, en la sección introductoria se le indicó que debe contar con una versión de Ruby mayor o igual a la 2.20 en su computadora. Con estas herramientas, podrá instalar Kraken Mobile.

Abra una terminal e ingrese el siguiente comando:

gem install kraken-mobile

Esto iniciará el proceso de descarga de la gema de Kraken Mobile y todas las dependencias que son necesarias para que este se ejecute de forma adecuada. El proceso puede tardar un par de minutos dada la cantidad de información transferida, y una vez termine, podrá ver múltiples mensajes en su terminal que le indican que se están instalando varias librerías.

Cuando el proceso finalice, podrá ver un mensaje que le indica que se ha terminado de instalar todas las gemas, como el de la siguiente imagen:

Imagen 4. Sección final de mensajes en consola de la instalación de Kraken Mobile.

(Recomendado) Instalar Kraken-Mobile desde el código fuente

Para instalar Kraken-Mobile, también puede optar por tener su propia instancia del proyecto de forma local y hacer uso de las funcionalidades de la gema compilando desde el código fuente. Para lograr esto, puede manejar Kraken-Mobile haciendo uso de otra gema denominada Bundler. En su terminal, ejecute el siguiente comando:

gem install bundler

Esto instalará la gema en su máquina y le permitirá administrar como gemas otros proyectos que disponga en su máquina. Es necesario, entonces, que descargue el código fuente de Kraken-Mobile a su máquina local. Para esto, ubíquese en un directorio donde alojará tanto el subdirectorio para su proyecto, como el subdirectorio para Kraken-Mobile, y clone los contenidos del repositorio en su versión 1.0.7. Descargue y descomprima el archivo .zip del siguiente enlace: https://github.com/TheSoftwareDesignLab/KrakenMobile/archive/refs/tags/1.0.9.zip.

Nota: Kraken-Mobile es un proyecto actualmente en construcción. Por ende, la gema de rubygems.org no cuenta con la última versión actualizada. El repositorio de Kraken Mobile se encuentra en una versión anterior a la requerida para este tutorial, por lo cual el código fuente que se utilizará se alojó en un directorio de Mega.

Al mismo nivel en el que quedó la carpeta que almacena el contenido descomprimo anteriormente, cree el subdirectorio para su proyecto desde el explorador de archivos o con el comando mkdir. Ubíquese ahora en el subdirectorio que acaba de crear y ejecute el siguiente comando:

bundle init

Esto creará un archivo Gemfile en el directorio, lo cual lo convierte en un nuevo repositorio de Bundler. Abra el archivo Gemfile en un editor de texto y asegúrese de que el contenido sea el siguiente:

# Contents of Gemfile
source "https://rubygems.org"
gem 'rubyzip', '1.2.1' # Required version for running calabash-android in Windows
gem 'kraken-mobile', path: '../KrakenMobile-1.0.9'

De esta forma, estará indicando a Bundler que utilice el proyecto alojado en el subdirectorio donde está el código fuente de Kraken como una gema. Ahora debe instalar esta gema como una utilidad para su repositorio con el siguiente comando:

bundle install

De esta forma, ya puede hacer uso de Kraken-Mobile siempre y cuando lo ejecute desde bundler. Para esto, cada comando de kraken-mobile debe ser antecedido por bundle exec.

Crear un proyecto base

Una vez que haya terminado la instalación, ya podrá usar las herramientas de Kraken Mobile. Lo primero que debe hacer para comenzar a utilizarlas es crear un proyecto base. Para ello, desde la misma terminal, cree el directorio que dedicará al escenario de prueba de este tutorial, si no lo ha hecho, y ubíquese en él. Desde allí, ejecute el siguiente comando:

kraken-mobile gen

Este comando le mostrará un mensaje en la terminal que solicita su confirmación sobre el procedimiento. Presione la tecla Enter y se le mostrará otro mensaje indicando la creación exitosa del proyecto, como se ve en la siguiente imagen:

Imagen 5. Sección final de mensajes en consola de la instalación de Kraken Mobile.

Además, podrá ver desde el explorador de archivos, que en su directorio se ha creado una carpeta llamada "features", la cual contiene la estructura base del proyecto con el detalle de los archivos explicados en el paso anterior.

Configurar los dispositivos (navegadores)

Kraken necesita reconocer los dispositivos que representan a cada usuario en la prueba que se va a ejecutar, ya sean dispositivos Android (en caso de que se prueben aplicaciones móviles), o navegadores web (en caso de que se prueben aplicaciones web). Para esto, es necesario que se genere un archivo de configuración llamado kraken_mobile_settings.json. Este archivo se genera automáticamente con la utilidad de línea de comandos de kraken-mobile. Ejecute el siguiente comando:

kraken-mobile setup

Este comando le preguntará dinámicamente por el dispositivo del usuario 1 y el del usuario 2, como se muestra en la siguiente imagen:

Imagen 6. Configuración de usuarios web.

Seleccione 2 navegadores web y confirme con la tecla Enter.

Conocer la aplicación web de ejemplo

La aplicación que utilizará en la prueba de este tutoriales un sitio web que permite utilizar tableros colaborativos digitales para que varios usuarios dibujen y vean los dibujos de forma simultánea. Esta aplicación es accesible por internet y permite generar tableros únicos con identificadores autogenerados. Para interactuar con la página web, ingrese al siguiente enlace: https://www.notebookcast.com/. Una vez allí, cree un tablero e interactúe con él.

Definir la interacción

Como se mencionó en el punto anterior, la aplicación web a probar provee de un tablero colaborativo digital. El flujo de ejecución de las instrucciones llegará únicamente a la conexión de dos usuarios al mismo tablero.

Podrá ver que, para probar que esta funcionalidad tenga un comportamiento adecuado es necesario que exista la interacción entre dos clientes distintos. Además de esto, debe existir un protocolo de inicio para comenzar el juego entre los dos clientes, donde uno de ellos crea el tablero con un nombre y un tamaño, y luego comparte la URL única del tablero con el otro usuario. Esto también indica que debe haber un paso extra fuera de la aplicación que consiste en la comunicación de un cliente al otro para indicarle cuál es la URL que se generó automáticamente. Este es un caso donde Kraken resalta, puesto que la señalización y ejecución en dos clientes paralelos permite realizar pruebas con estas particularidades.

Ahora que conoce el flujo de eventos y señales esperado, va a definir estos eventos en el archivo my_first.feature. Abra el archivo mencionado en un editor de texto como el bloc de notas, e ingrese las siguientes instrucciones:

Feature: Shared board connection

  @user1 @web
  Scenario: As a first user I say hi to a second user
    Given I navigate to page "https://www.notebookcast.com/"
    Then I click on element having css selector "a#home-start-drawing-button"
    Then I enter "Kraken1" into input field having id "nickName"
    Then I select option with value "2" for dropdown with id "boardType"
    Then I enter "Example Board" into input field having id "boardTitle"
    Then I click on element having css selector ".btn.btn-primary.btn-sm.acceptcookies"
    Then I click on element having id "createBoardButton"
    Then I store a variable with the current url
    Then I send a signal to user 2 containing "hi"

  @user2 @web 
  Scenario: As a second user I wait for user 1 to say hi
    Given I wait for a signal containing "hi" for 60 seconds
    Given I navigate to page with the url stored in the variable
    Then I enter "Kraken2" into input field having id "nickName"
    Then I click on element having css selector "#joinBoard>button"
    Then I start a monkey with 8 events

Podrá notar que las instrucciones están escritas en un lenguaje muy cercano al lenguaje natural en inglés, llamado notación Gherkin. Así mismo, podrá notar que los usuarios tienen una anotación "@web", para indicar que el escenario se corre en navegadores web. La mayoría de las instrucciones son brindadas por Kraken utilizando Selenium WebDriver, y ofrecen funcionalidades básicas que se se pueden explorar en detalle en el archivo .md que puede descargar del siguiente enlace: https://github.com/TheSoftwareDesignLab/KrakenMobile/blob/1.0.9/docs/WEB_STEPS.md. Por último, se deben definir otras instrucciones de forma manual, aprovechando que Kraken permite la creación de otras instrucciones (o steps) por medio del archivo de extensión features/web/step_definitions/web_steps.rb. Edite este archivo para que tenga el siguiente contenido, donde se definen ciertas funciones requeridas en la prueba:

if ENV["ADB_DEVICE_ARG"].nil?
  require 'kraken-mobile/steps/web/kraken_steps'

  Then(/^I store a variable with the current url$/) do
    $url_variable = @driver.current_url    
    File.write('./.variable.txt', $url_variable)
    puts($url_variable) 
  end

  Given(/^I navigate to page with the url stored in the variable$/) do
    $url_variable = IO.read("./.variable.txt")  
    puts($url_variable)
    @driver.navigate.to $url_variable
    sleep 2
  end

end

Ejecutar el escenario

Una vez haya configurado el entorno de forma adecuada, podrá probar su escenario. Para ello, ejecute el siguiente comando:

kraken-mobile run

Esto dará inicio a la ejecución de la prueba. Preste atención al comportamiento de la aplicación en tiempo real en las instancias de los navegadores generados para la prueba y valide que todas las acciones que se pretendían ejecutar ocurrieron de forma exitosa. Así, al final de la prueba ambos dispositivos deben haber establecido exitosamente una partida y usted deberá ver la siguiente pantalla:

Imagen 7. Pantalla del tablero colaborativo.

Además, en la siguiente sección podrá comprender los resultados de la prueba que Kraken genera en forma de reporte HTML.

Luego de ejecutar su prueba, Kraken brinda retroalimentación por medio de un reporte en formato HTML. Para ver este reporte, abra con el explorador de archivos el directorio raíz de su proyecto. Ahora podrá ver un nuevo directorio llamado "reports". Dentro de este directorio encontrará un subdirectorio para cada una de las ejecuciones que ha realizado de su prueba, identificado por un identificador único aleatorio. Como se muestra en la siguiente imagen, los subdirectorios de las pruebas exitosas deben tener los archivos index.html, devices.json, un directorio assets para las imágenes del reporte, un directorio screenshots vacío, y un directorio para cada dispositivo con el mismo nombre identificado por Kraken en el archivo de configuración:

Imagen 8. Estructura de archivos resultante de una ejecución de la prueba.

Abra el archivo index.html en un navegador para explorar sus contenidos. Podrá ver una pantalla inicial con un listado que contiene la información de los dispositivos utilizados en la prueba, como se muestra en la siguiente imagen:

Imagen 9. Listado de dispositivos utilizados en la prueba.

Haga clic en el enlace "See Results" de alguno de los dos dispositivos para ver el detalle de los escenarios que se ejecutaron y el estado de la prueba. Podrá ver una pantalla como la de la siguiente imagen, indicando que el escenario de prueba terminó con estado exitoso:

Imagen 10. Reporte de escenarios para un dispositivo.

¡Felicidades!

Al finalizar este tutorial, usted pudo familiarizarse con el proceso requerido para probar funcionalidades que requieren intercomunicación entre usuarios de una aplicación web.

Ahora usted podrá hacer uso de la herramienta Kraken Mobile para crear escenarios que le permitan probar otras aplicaciones web con la misma estrategia.

Créditos

Versión 1.0 - Mayo 30, 2020