Last Updated: 2019-04-30

¿Por qué generar datos de prueba?

Al momento de realizar pruebas sobre un sistema de software, muchas veces se encontrará con la necesidad de incluir datos para probar diferentes funcionalidades. Es muy común que las aplicaciones que quiera probar y validar tengan campos para la entrada de información y, en general, funcionalidades relacionadas con la creación de un usuario o cualquier otra entidad. Utilizar datos simulados permite explorar y validar el comportamiento del sistema ante entradas de un tipo definido.

Otro caso de uso puede ser al momento de requerir poblar la base de datos de un sistema ya construido. Esto es muy común, puesto que la mayoría de las aplicaciones tienen funcionalidades relacionadas con operaciones sobre una fuente de datos y al momento de desarrollar las funcionalidades del sistema no se cuenta con suficientes datos para ejecutar las operaciones. Además, esto permite exponer el sistema a un entorno similar al esperado durante la etapa de producción, donde la información que gobierna al sistema de software no depende del equipo de desarrollo.

¿Qué es faker?

Faker es una de las herramientas más conocidas entre las opciones que existen para generar datos falsos de forma automática dentro de una aplicación. Existen librerías con este nombre para múltiples lenguajes de programación como JavaScript, Ruby, PHP, Python, entre otros, las cuales permiten la integración de ciertas funciones para generar datos de prueba en forma de paquete. Faker recopila varios de los tipos de dato más usuales en la construcción de aplicaciones, por lo cual es adaptable a una amplia variedad de contextos y escenarios.

¿Qué construirá?

Al finalizar este tutorial usted tendrá:

• Una prueba de cypress que llena un formulario expuesto en una URL pública.
• Una respuesta generada automáticamente para dicho formulario.

¿Qué aprenderá?

En este tutorial aprenderá:

• Qué tipos de datos de los más recurrentes en las aplicaciones se encuentran disponibles en la herramienta Faker.js para representar distintas categorías de información.
• Cómo integrar los datos de prueba generados con una prueba creada en un framework E2E.

¿Qué necesita?

• Un navegador web (¡Cualquiera funciona!).
• Conocimientos sobre el uso de Cypress.
• Una versión actualizada de Node.js instalada en su computadora.
• Una versión actualizada del manejador de paquetes npm instalada en su computadora.

Para familiarizarse con las particularidades de Faker.js, ingrese a la documentación oficial del paquete en el siguiente enlace: https://github.com/faker-js/faker/blob/main/README.md. En esta documentación podrá encontrar un apartado con el nombre "Try it Online" como se muestra en la siguiente imagen:

Imagen 1. Sección de la documentación que refiere al demo con el enlace: https://github.com/faker-js/faker/blob/main/README.md.

Haga clic en ese enlace para ver una aplicación de ejemplo que muestra los resultados de varios métodos del API. La siguiente imagen muestra la sección mencionada del demo:

Imagen 2. Sección de generación de datos personales del demo.

Como podrá ver, Faker.js ofrece la posibilidad de generar ejemplos sobre varios de los datos más usuales relacionados con la información personal de un individuo.

No obstante, además de esta categoría, podrá ver que, en las siguientes secciones de la página de documentación se muestran ejemplos para las demás categorías definidas en el API. Note que, si regresa a la documentación oficial del repositorio de GitHub encontrará una sección titulada "API Methods" que especifica los métodos accesibles desde el paquete, y que corresponden a los mostrados en el demo. En el caso de la categoría de direcciones, se puede ver la correspondencia con los métodos indicados en la sección respectiva, como muestra la siguiente imagen:

Imagen 3. Sección API Methods de la documentación oficial del paquete.

Termine de explorar las demás secciones del API en la página de la documentación.

Para este tutorial, trabajará en un proyecto que responda un formulario con datos falsos. Como se indicó en la sección introductoria del tutorial, es necesario que tenga instalado Node.js y npm. La configuración del proyecto consta de la creación de un proyecto en Node.js y la instalación de las dependencias.

Crear un proyecto de Node.js para la prueba

Para comenzar, cree un proyecto de Node.js que contendrá el código necesario para la automatización de la interacción con un navegador para llenar un formulario con datos de prueba. Para esto, abra una terminal en su máquina y ubíquese en el directorio donde guardará el proyecto con el comando cd . Cree un subdirectorio vacío con el comando mkdir y ubíquese en él.

Una vez allí, cree un proyecto con el comando npm init. Este comando le solicitará cierta información para crear el archivo package.json como la de la siguiente imagen:

Imagen 5. Campos de entrada para la creación del package.json

En principio, esta información no influye en la construcción del proyecto y, únicamente, se utiliza para el archivo JSON de configuración del proyecto. Ahora podrá incluir los archivos que necesite para ejecutar la aplicación e instalar sus dependencias.

Instalar las dependencias

Para automatizar el proceso de llenado de un formulario, es necesario un componente que le permita simular una interacción de usuario con un sitio web por medio de un navegador. En este caso, se hará uso de la librería Cypress, dado que permite realizar pruebas del tipo Record & Replay, lo cual permitirá una visualización de cada paso de la creación del formulario con datos aleatorios y permitirá identificar los datos generados en cada ejecución. Para instalar las herramientas de líneas de comandos, abra una terminal ubicada en el directorio del proyecto que acaba de crear y ejecute el siguiente comando para instalar Cypress:

npm install [-g] cypress

El flag -g es completamente opcional. En caso de incluirlo, Cypress será instalado a nivel de usuario y podrá acceder al comando cypress desde cualquier directorio de su máquina. En caso de no incluirlo, el comando cypress no será accesible de forma global y debe ser referenciado por medio de su ruta absoluta (típicamente /node_modules/.bin/cypress)

Nota: es posible que ya cuente con Cypress instalado en su máquina a nivel global, o en forma de ejecutable. De ser así, no es necesario que instale nuevamente la dependencia para este directorio en particular, pues podrá utilizar las funcionalidades de Cypress en cualquier forma para correr la prueba.

Ahora instale la dependencia Faker para poder hacer uso de las funcionalidades de generación aleatoria de datos. En la misma terminal, ejecute el siguiente comando:

npm install @faker-js/faker --save-dev

Cuando termine de ejecutar los comandos, contará con las funcionalidades básicas necesarias para la prueba.

Crear el directorio de Cypress

Para poder ejecutar la prueba, es necesario que cree un archivo de spec que contenga el escenario de prueba, sin embargo, típicamente este archivo debe ser parte de un subdirectorio llamado integration dentro de otro directorio llamado cypress. La creación de estos directorios se hace automáticamente por Cypress según el medio que se utiliza para la prueba. Si cuenta con el programa ejecutable, ábralo a partir del explorador de archivos. Desde la terminal también puede lanzar el programa y utilizar su interfaz gráfica. Para esto, ejecute el siguiente comando

cypress open

Esto lanzará una interfaz como la de la siguiente imagen:

Imagen 6. Interfaz de Cypress mostrando pruebas de ejemplo.

Esta interfaz muestra un directorio que contiene un gran número de archivos de prueba que se crean por defecto como parte de cada proyecto de Cypress. Podrá ver que esto también creará un directorio llamado cypress en el directorio raíz, con varios subdirectorios de forma automática, como se ve en la siguiente imagen:

Imagen 7. Subdirectorios creados por Cypress.

En el directorio integration encontrará el subdirectorio examples que contiene todos los archivos de la imagen. En el mismo directorio integration, cree un archivo llamado form.js, donde ubicará el código fuente para la automatización del proceso de llenar un formulario.

Conocer el contenido del sitio web y sus identificadores

Antes de definir las interacciones que el programa debe tener con el sitio web de destino, es necesario comprender su contenido. Para el caso de este tutorial se decidió crear un formulario por medio de un servicio online para crear y compartir encuestas llamado JotForm, dado que es uno de los contextos donde, por su naturaleza, la validación de información es más importante. Para ver el formulario creado, ingrese a la siguiente URL: https://form.jotform.com/201874033274654.

Note que, a pesar de que el formulario fue creado con una herramienta que facilita el proceso, este se traduce adecuadamente al formato HTML requerido. Desde su navegador, abra las herramientas del desarrollador (Típicamente presionando F12 o Ctrl+Shift+i) e inspeccione cada uno de los campos para reconocer el selector que permite ubicarlos desde la prueba de Cypress.

Las siguientes imágenes muestran el identificador de cada uno de los campos de texto del formulario del sitio web. Sin embargo, en cualquier momento usted puede consultar el identificador de cada uno a nivel individual con las herramientas del desarrollador e inspeccionando cada elemento.

Imagen 8. Campos de entrada y sus identificadores (1 de 3).

Imagen 9. Campos de entrada y sus identificadores (2 de 3).

Imagen 10. Campos de entrada y sus identificadores (3 de 3).

Para cada uno de los campos, busque una función de Faker.js que genere el tipo de dato correspondiente. En el caso de algunos campos del formulario como los elementos select o los elementos check será necesario un tipo diferente de interacción a partir de clics.

Establecer las interacciones necesarias para llenar el formulario

Ahora que reconoce los identificadores de cada elemento en el DOM y reconoció los tipos de datos que requiere, abra en un editor de texto el archivo forms.js que creó previamente y escriba el siguiente código para definir la prueba de Cypress:

import {faker} from '@faker-js/faker'
describe( `Filling example form`, function() {
    it(`Visits jotform and fills an example form`, function() { 
        cy.visit('https://form.jotform.com/201874033274654')
        cy.get('#first_3').scrollIntoView().focus().type(faker.name.firstName())
        cy.get('#last_3').scrollIntoView().focus().type(faker.name.lastName())
        cy.get('#input_4_addr_line1').scrollIntoView().focus().type(faker.address.streetAddress())
        cy.get('#input_4_addr_line2').scrollIntoView().focus().type(faker.address.secondaryAddress())
        cy.get('#input_4_city').scrollIntoView().focus().type(faker.address.city())
        cy.get('#input_4_state').scrollIntoView().focus().type(faker.address.state())
        cy.get('#input_4_postal').scrollIntoView().focus().type(faker.address.zipCode())
        cy.get('#input_5_full').scrollIntoView().focus().type(faker.phone.phoneNumber())
        cy.get('#input_15').scrollIntoView().focus().type(faker.company.companyName())
        cy.get('#input_16').scrollIntoView().focus().type(faker.name.jobTitle())
        cy.get('#input_6').scrollIntoView().focus().type(faker.internet.email())
        cy.get('#input_8').scrollIntoView().focus().select('Newspaper')
        cy.get('#input_11').scrollIntoView().focus().type(faker.lorem.paragraph())
        cy.get('#input_12').scrollIntoView().focus().type(faker.lorem.paragraph())
        cy.get('#input_13_0').scrollIntoView().focus().click({force:true})
        cy.get('#input_14_0_0').scrollIntoView().focus().type(faker.name.firstName()+faker.name.lastName())
        cy.get('#input_14_0_1').scrollIntoView().focus().type(faker.address.streetAddress())
        cy.get('#input_14_0_2').scrollIntoView().focus().type(faker.phone.phoneNumber())
        cy.get('#input_14_1_0').scrollIntoView().focus().type(faker.name.firstName()+faker.name.lastName())
        cy.get('#input_14_1_1').scrollIntoView().focus().type(faker.address.streetAddress())
        cy.get('#input_14_1_2').scrollIntoView().focus().type(faker.phone.phoneNumber())
        cy.get('#input_2').click()
        cy.wait(1000)
    })
})

Podrá ver que el código que usted creó define una prueba que ingresa a la URL del formulario y para cada campo ingresa un valor correspondiente a la categoría y tipo de dato respectivo.

Desde la interfaz que abrió en pasos previos con el comando cypress open, o bien abriendo el archivo ejecutable, podrá ver el archivo forms.js que contiene la prueba de interés. Haga clic sobre este y Cypress lanzará una instancia de Chrome donde la prueba será ejecutada. Podrá ver a la izquierda la serie de eventos ejecutados y a la derecha el resultado de estos eventos sobre el navegador en tiempo real.

La siguiente imagen muestra un ejemplo de ejecución de la prueba:

Imagen 11. Animación de una ejecución de la prueba.

Note que no existen errores en la validación gracias a que Faker.js ayudó a elegir el formato adecuado para cada dato que se ingresó al formulario.

Además, gracias a Cypress puede replicar los valores exactos que fueron ingresados dentro de cada campo en caso de que en sus pruebas encuentre que un dato de prueba genere comportamientos extraños sobre la aplicación.

¡Felicidades!

Al completar este tutorial usted pudo familiarizarse con el proceso de utilizar datos de prueba para verificar el comportamiento de una aplicación.

Ahora podrá generar datos de prueba para integrarlos con sus aplicaciones sin importar el contexto y contando con la gran variedad de tipos de datos ofrecidos por Faker.js.

Créditos

Versión 1.0 - Mayo 30, 2020