Last Updated: 2020-05-01

Pruebas aleatorias

Una prueba aleatoria sobre el software es una técnica de caja negra que consiste en aplicar una secuencia de eventos de entrada a una aplicación, buscando comprobar que la respuesta sea adecuada. Así, la validez de la prueba se determina a partir de la comparación entre las respuestas del sistema que se observaron y las respuestas esperadas que el sistema debería dar ante los eventos. Por ende, para ejecutar la prueba no se requiere conocer las especificaciones internas de la aplicación. Cabe aclarar que la secuencia de eventos es aleatoria y los eventos, que son independientes entre sí, usualmente son ejecutados por un componente ajeno a la aplicación, o incluso un mismo usuario.

¿Por qué hacer pruebas aleatorias?

El concepto de exponer una aplicación ante una serie de eventos aleatorios pareciera no tener sentido alguno dada su naturaleza caótica. Sin embargo, la importancia de una prueba aleatoria reside en su falta de sesgo al momento de interactuar con la aplicación. El sesgo está presente en otros tipos de pruebas a causa de la forma de pensar de la persona o el grupo de personas que diseña la prueba, y puede llegar a ser una barrera para encontrar ciertos casos límite, los cuales pueden surgir, precisamente a causa de comportamientos inesperados o cambios en el entorno no previstos por los desarrolladores.

Pros y contras

Como se mencionó anteriormente, algunos beneficios de implementar pruebas aleatorias son:

• Capacidad de hallar casos límite difíciles de intuir.
• Ausencia de sesgo.
• No hay necesidad de conocer mucho sobre el software a probar.

Pero, también se pueden ver otros beneficios como:

• Facilidad de uso.
• Rapidez para encontrar fallos o bugs.

Sin embargo, cabe aclarar que este tipo de pruebas tienen algunas carencias con respecto a otros tipos de pruebas automáticas, como lo son:

• Posibilidad de que los fallos o bugs encontrados sean muy básicos y no se hallen otros más complejos.
• Alta tasa de eventos inválidos o que no causan ningún efecto.
• Una prueba válida no garantiza validez absoluta sobre el software.

¿Qué construirá?

Con este tutorial logrará ejecutar una prueba aleatoria sobre la página web de Google y obtener un reporte con los resultados.

¿Qué aprenderá?

Con este tutorial aprenderá algunos conceptos relacionados con las pruebas automáticas aleatorias. Así mismo, estará en la capacidad de utilizar herramientas de pruebas implementadas en librerías de JavaScript. Además, sabrá cómo estudiar el detalle de los eventos generados por el Monkey en la aplicación web, por medio de los reportes generados.

¿Qué necesita?

• Una versión actualizada de Node.js instalada en su computadora.
• Una versión actualizada del manejador de paquetes npm instalada en su computadora.
• (OPCIONAL) El sistema manejador de versiones Git instalado en su computadora.

Herramientas utilizadas

El proyecto "monkey-cypress" fue desarrollado con el lenguaje de programación JavaScript. En particular, se usó la librería Cypress para poder ejecutar las pruebas E2E sobre un sitio web. Esta librería ofrece reportes del tipo "record & replay" por medio de videos que muestran el comportamiento en tiempo real de la aplicación web ante el listado de eventos que se ejecutan. Además, permite definir una prueba y establecer una serie de eventos detallados sobre un navegador, que también despliega y que accede a la dirección web indicada en la prueba.

Si bien las funcionalidades ofrecidas por Cypress para ejecutar pruebas son bastante amplias y cubren muchas necesidades, fue necesario incluir plugins o adiciones para ejecutar ciertas operaciones, como, por ejemplo, mostrar los contenidos de la consola del navegador al acceder a la página web.

Además, se incluyó la librería Faker para generar datos aleatorios que serían utilizados como parte de los campos de entrada.

Estructura del proyecto

Diríjase al repositorio del proyecto en el siguiente enlace: https://github.com/TheSoftwareDesignLab/monkey-cypress, allí podrá ver los archivos y directorios del repositorio. En el directorio raíz del proyecto, se encuentran archivos correspondientes a la configuración del proyecto y un directorio con el nombre "cypress". Los contenidos se muestran a continuación:

Imagen 1. Archivos del directorio raíz del proyecto

Los archivos package.json y package-lock.json contienen las dependencias de npm que el proyecto requiere para funcionar, y permitirán su correcta instalación. El archivo .gitignore contiene los directorios y archivos que no se desean incluir como parte del repositorio de Git, que, típicamente, son archivos de un tamaño muy grande. Los archivos monkey-config.json y smart-monkey-config.json contienen parámetros de configuración que se desean para la ejecución de la herramienta en su versión más aleatoria y su versión "ligeramente más inteligente".

En cuanto a los contenidos del directorio "cypress", se pueden ver a continuación 4 directorios que suelen hacer parte de un proyecto creado por esta librería:

Imagen 2. Subdirectorios contenidos en "cypress/"

El directorio "fixtures" contiene archivos en formato .json que pueden ser utilizados para representar datos de prueba. El contenido de este directorio no fue modificado con respecto a las plantillas, y no tiene uso.

El directorio "integration" contiene el código que realmente va a ejecutar las pruebas automáticas. En él hay un subdirectorio llamado "monkey" con los "specs" implementados, que corresponden a ambas versiones de la herramienta ("monkey.js" y "smart-monkey.js").

El directorio "plugins" contiene un archivo que permite conectar las adiciones con el proyecto. En este se definen operaciones que se deben ejecutar tal como se haría en un motor plano de JavaScript, con un manejo de concurrencia propio.

El directorio "support" contiene dos archivos con formato .js que permiten sobreescribir o escribir comandos personalizados para Cypress. El contenido de este directorio no fue modificado con respecto a las plantillas y no tiene uso.

Instalación

En primer lugar, para hacer uso de la herramienta Monkey, es necesario obtener el código fuente en su máquina local. Dicho código fuente se encuentra alojado en el repositorio de GitHub del siguiente enlace https://github.com/TheSoftwareDesignLab/monkey-cypress/.

Diríjase al enlace anterior. Se encontrará en la página web del repositorio, y podrá ver la siguiente interfaz, donde se muestra, en la parte central, la estructura de archivos contenidos en él:

Imagen 3. Repositorio del proyecto en GitHub

En la parte inferior de la estructura de archivos, podrá ver el detalle del archivo "README.md", que contiene otras instrucciones sobre la herramienta escritas en inglés. Si lo desea, en cualquier momento puede leerlo para familiarizarse más.

En la parte superior, se resalta el botón "Clone or download", que permite obtener el código fuente. Al hacer clic en él, se desplegará un contenedor con un campo de texto que contiene la dirección del repositorio y dos botones debajo de él, como se ve a continuación:

Imagen 4. Panel desplegable para clonar o descargar el repositorio

A continuación, se explicarán las diferentes opciones para descargar el código fuente desde este panel.

Git

Para descargar el código fuente del repositorio en su máquina utilizando Git, debe tener instalado el sistema manejador de versiones Git, (cuyos detalles y documentación podrá ver en la página oficial, en el siguiente enlace https://git-scm.com/). Como se explicó al inicio del tutorial, este requerimiento es opcional, pero se incluye en la guía dado que es una alternativa comúnmente utilizada entre desarrolladores.

La instalación de Git le agrega a su máquina local las herramientas de línea de comandos y otras particularidades que pueden depender de la personalización de su instalación. Usted debió configurar las terminales que tienen acceso a Git. Ahora debe abrir una de ellas, como, por ejemplo, puede ser Git Bash

Desde esta herramienta, ejecute el comando cd <path/del/directorio>, indicando la ruta absoluta de un directorio en el que usted desea que se descarguen los directorios con el código fuente. Ahora que se encuentra en dicha ubicación, ejecute el comando

git clone https://github.com/TheSoftwareDesignLab/monkey-cypress.git

Esto descargará el contenido del repositorio en un directorio local en su máquina.

Descarga del código comprimido

Existe también la posibilidad de conseguir el código fuente sin necesidad de una herramienta adicional. Esta consiste en descargar los archivos del repositorio comprimidos en un archivo en formato ZIP. Para esto, en el repositorio, en el desplegable del botón "Clone or download", haga clic en el botón "Download ZIP". Esto iniciará una descarga del navegador.

Una vez ubique el archivo descargado, puede descomprimirlo haciendo uso de las herramientas disponibles según su sistema operativo. Por defecto, Windows tiene una funcionalidad para extraer, que se invoca haciendo clic derecho en un archivo y seleccionando la opción "Extraer todo". Esto funciona en la mayoría de sistemas operativos con interfaz gráfica. Para otros sistemas operativos basados en GNU/Linux, existe el comando unzip <archivo> para descomprimirlo.

Archivos de configuración

Ahora que tiene el código fuente descargado en su máquina, puede explorarlo y hacer uso de él. Lo primero que debe conocer son los archivos de configuración, pues estos le permiten establecer los parámetros necesarios para ejecutar su prueba. Abra los archivos monkey-config.json y smart-monkey-config.json. Al compararlos, podrá notar que la estructura es igual, y la diferencia entre ambos consiste apenas en unas variables que se explicarán en detalle en secciones posteriores. A continuación se explicará la estructura general:

Imagen 5. Estructura del archivo de configuración

En la imagen anterior se muestra el contenido del archivo monkey-config.json. Algunos de los parámetros corresponden a configuraciones propias de cualquier proyecto de Cypress, como, por ejemplo "projectId" y "pageLoadTimeout", variables las cuales se sugiere no modificar. Los parámetros "testFiles", "videosFolder", "pluginsFile", "integrationFolder" son necesarios para establecer la estructura de archivos que se indicó anteriormente en el tutorial, pues indica a Cypress cuál es el archivo con la prueba a ejecutar, dónde guardar los resultados y dónde se encuentran las extensiones necesarias para la prueba; de igual forma, se sugiere no modificarlas. Para revisar las configuraciones propias de Cypress que puede incluir en estos archivos, puede dirigirse a la documentación oficial en el siguiente enlace: https://docs.cypress.io/guides/references/configuration.html.

Los parámetros "baseUrl" y los sub-parámetros contenidos en el parámetro "env" corresponden a los atributos de configuración que determinan cómo se dará la prueba. El primero permite indicar el sitio web donde se aloja la aplicación a probar. El segundo contiene varios parámetros personalizados que se describen a continuación. "appName" permite indicar el nombre de la aplicación para incluir en el reporte y los registros, "events" permite configurar el número de eventos aleatorios que se quieren generar en la prueba, "delay" permite configurar un tiempo de espera entre todos los eventos, "seed" permite configurar un número como la semilla inicial de la prueba con motivos de repetibilidad. Finalmente, hay una serie de parámetros que permiten definir la distribución de eventos según los tipos definidos. Estos tipos varían entre ambas versiones de la herramienta, con diferencias que se explicarán en la siguiente sección; sin embargo, se puede ver que todos tienen en común el formato "pct*" donde * corresponderá a un tipo de evento, y su valor debe ser un número entre 0 y 100, en el cual la suma de todos debe corresponder a 100.

Versión 1: "Monkey" aleatorio

Esta versión de la herramienta se caracteriza por tener eventos basados completamente en la aleatoreidad, ignorando mejoras que podrían surgir a partir de la comprensión de los mismos elementos que componen una página web. Los eventos que componen esta versión del monkey se categorizan de la siguiente forma:

• Eventos de clic aleatorios: clics derechos, izquierdos y dobles sobre un elemento ubicado en una posición aleatoria de la página. Se representan en el archivo de configuración como ‘pctClicks'.
• Eventos de scroll: eventos que causan el desplazamiento de la vista actual de la página web hacia arriba, abajo, la izquierda o la derecha. Se representan en el archivo de configuración como ‘pctScrolls'.
• Eventos de enfoque: eventos que causan que el navegador se enfoque en ciertos elementos según una posición aleatoria o considerando el tipo de elemento. Equivale a presionar tab en el navegador múltiples veces para desplazarse por el contenido. Se representan en el archivo de configuración como ‘pctSelectors''.
• Eventos de presión de teclas: permiten la introducción de caracteres textuales sobre un elemento enfocado. Equivale a presionar una tecla del teclado. Se representan en el archivo de configuración como ‘pctKeys'.
• Eventos de teclas especiales: permiten utilizar caracteres especiales sobre un elemento en focus. Estos corresponden a las teclas "Enter", "Supr", "Esc", "Backspace" y las flechas, además de posibles modificadores como "Shift", "Alt", "Ctrl". Se representan en el archivo de configuración como ‘pctSpKeys'.
• Eventos de navegación: navegación típica que un usuario podría hacer con los botones del navegador. Incluye ir hacia adelante o hacia atrás en el stack de navegación. Se representan en el archivo de configuración como ‘pctPgNav'.

Ahora que conoce el detalle de los tipos de eventos, diríjase al archivo cypress/integration/monkey/monkey.js, y ubique allí la instrucción donde se definen los tipos de eventos. Asegúrese de leer qué funciones definidas en el mismo archivo corresponden a cada evento mencionado anteriormente.

Versión 2: "Smarter Monkey" aleatorio con heurísticas

Esta segunda versión surge a causa de varias incomodidades que puede llegar a causar la versión más aleatoria, como la alta cantidad de eventos inválidos, o la baja probabilidad de que una posición aleatoria de la pantalla contenga un elemento que acepte ciertos eventos, entre otras. Los cambios que se implementan sobre esta versión corresponden, sobre todo, a la inclusión de selectores. Esto quiere decir que algunas de las operaciones ahora se realizarán en función del tipo de contenido de la aplicación web. Si bien esto puede causar que la prueba sea más sesgada, permite reducir el porcentaje de error y realizar una prueba con mayor interacción.

Los eventos que componen esta versión del monkey se categorizan de la siguiente forma:

• Eventos de caos sobre el browser: incluyen cambios de configuración como el viewport, limpiar el almacenamiento local o las cookies. Se representan en el archivo de configuración como ‘pctBwChaos'.
• Eventos sobre selectores: eventos que inducen una entrada sobre tipos específicos de elementos HTML, como <a>, <button>, <input>. Las entradas pueden ser clics o valores correspondientes a los campos. Se representan en el archivo de configuración como ‘pctActions'.
• Todas las otras categorías implementadas en la versión 1.

Ahora que conoce el detalle de los tipos de eventos, diríjase al archivo cypress/integration/monkey/smart-monkey.js, y ubique allí la instrucción donde se definen los tipos de eventos. Asegúrese de leer qué funciones definidas en el mismo archivo corresponden a cada evento mencionado anteriormente.

Luego de comprender el detalle de los eventos que genera esta versión de Monkey, puede cambiar los archivos de configuración según su necesidad y posteriormente ejecutar la prueba. En particular, es necesario que asegure que el atributo ‘baseURL' corresponda con https://www.google.com/. Para ejecutar la prueba abra una terminal y ubíquese en el directorio raíz del repositorio. Desde allí, descargue las dependencias del proyecto ejecutando el comando:

npm install

Esto instalará un directorio llamado "node_modules", que contiene las librerías que se utilizan como parte del código del proyecto. El comando puede tardar un poco en completarse, dado que instala librerías de gran tamaño. En caso de que usted cuente con alguna de las dependencias mencionadas en el apartado "Herramientas utilizadas", puede optar por instalar las otras dependencias de forma manual para reducir el tamaño de los archivos descargados, siguiendo las instrucciones del archivo README.md.

Luego de este paso, puede ejecutar Cypress por medio del comando:

cypress run -C <archivo-config> [flags]

Es necesario que indique el archivo de configuración correspondiente a la versión que quiere utilizar (monkey-config.json o smart-monkey-config.json). Otros flags que funcionan pueden ser los siguientes:

• -b <browser> : permite elegir el navegador en que se va a correr la prueba. Los posibles valores de browser incluyen chrome, chromium, edge, electron, firefox. En caso de no incluir esta opción, Cypress buscará un navegador adecuado.
• --headed : permite ejecutar la prueba en modo headed, lo que quiere decir que ejecuta el navegador como un programa con interfaz en la máquina.
• --headless : permite ejecutar la prueba en modo headless, lo que quiere decir que el navegador no se ejecuta como un programa con interfaz en la máquina.
• -port <num-puerto> : permite configurar otro puerto diferente al puerto por defecto para correr la prueba.

Para este tutorial, ejecute el siguiente comando, que causará que se inicie la prueba:

cypress run -C monkey-config.json

En el siguiente paso se explicará lo que sucede al ejecutar la prueba.

Características

En primer lugar, podrá ver que en la misma terminal donde ejecutó la prueba, habrá una retroalimentación sobre el resultado de la misma. Los registros tienen varias partes. Al inicio, podrá ver una sección de retroalimentación en formato de tabla, brindada por cypress, que indica el inicio de la prueba y la información de la versión de Cypress, el navegador utilizado y el archivo de prueba, como se ve a continuación:

Imagen 6. Encabezado de los registros en consola

Luego de ver esto, habrá una serie de registros generados por la ejecución del monkey. En esta sección podrá ver un registro indicando la semilla, registros que indican los eventos generados, registros que muestran los eventos de consola del navegador y, en caso de que la prueba falle, podrá ver el error que lo causó. A continuación se muestra un ejemplo de esta sección:

Imagen 7. Registros de eventos en consola

Por último, habrá otra sección final brindada por Cypress que muestra los resultados generales de la prueba. A continuación se muestra una captura del resumen, que consiste en un cuadro con resultados que indican cuántas pruebas se corrieron y los resultados que se obtuvieron, información del video resultante y el nombre de las pruebas que se ejecutaron:

Imagen 8. Registros de resultados en consola

Video

Cuando la ejecución de su prueba termina, puede ver que sobre el directorio raíz del proyecto se crea una carpeta denominada "results", en la que podrá encontrar un archivo de video correspondiente a la grabación del navegador ejecutando su prueba. Abra el video y podrá ver una grabación de una interfaz con un panel lateral a la izquierda que lista los eventos de Cypress y un cuadro amplio a la derecha de lo que muestra el browser ante los eventos. A continuación se muestra un ejemplo de un cuadro del video:

Imagen 9. Cuadro del vídeo generado

Reporte

En la misma carpeta "results" mencionada anteriormente, podrá ver un archivo en formato .html, que contiene un reporte indicando los eventos que se indujeron en la aplicación web y su resultado. Abra el reporte en un navegador, y podrá ver una sección inicial con el nombre de la aplicación que se va a probar, la fecha de la ejecución y la semilla utilizada, como se muestra a continuación:

Imagen 10. Encabezado del reporte

Luego de este encabezado, podrá ver el listado de eventos ejecutados y la respuesta, como se muestra a continuación:

Imagen 11. Registros de eventos en el reporte

Además, en caso de que el navegador tenga eventos de consola, estos serán reportados en este archivo´, como se puede ver a continuación, resaltado en negrilla con el nombre "Browser event":

Imagen 12. Registros de eventos de navegador en el reporte

¡Felicidades!

Al completar este tutorial usted pudo realizar pruebas aleatorias de una aplicación web por medio de una herramienta desarrollada en Cypress.

Ahora está en la capacidad de probar otro tipo de aplicaciones web y explorar la herramienta "monkey-cypress" para buscar y rastrear casos extremos en estas aplicaciones y comprender el comportamiento que estas pueden tener ante múltiples secuencias de acciones.

Créditos

Versión 1.0 - Mayo 30, 2020