Monitorización de Experiencia de Usuario WEB (WUX)

La Monitorización de Experiencia de Usuario WEB (User Experience Monitoring, UX Monitoring o simplemente WUX en terminología de Pandora FMS) es el proceso de recopilar, analizar y evaluar datos sobre cómo los usuarios interactúan con un sitio web o una aplicación web en tiempo real. Su objetivo es detectar problemas de rendimiento, usabilidad y accesibilidad para mejorar la experiencia del usuario.

Pandora FMS WUX realiza monitorización sintética (Synthetic Monitoring) empleando un backend especializado a tal efecto (Selenium®). Esto significa que Pandora FMS utiliza un navegador real para interactuar con webs remotas (Google Chrome®, Mozilla Firefox®, etcétera).

• Permite detectar problemas antes de que los usuarios reales los experimenten. Recoge datos de navegación de usuarios reales en tiempo real (webscrapping).
• Mide métricas como tiempo de carga, interacciones, errores y comportamiento del usuario (análisis web).
• Ejemplos: Medición de carga de páginas, tiempos de respuesta, capturas de pantalla (de la web), pruebas en diferentes dispositivos, test de aplicaciones complejas que requieren registro, interacción JavaScript®, inputs de texto, pasar datos de un campo a otro como si lo hiciera un usuario, los clic de ratón, tiempos de espera, etcétera.

El WEB Server utiliza peticiones HTTP básicas, y aunque puede simular sesiones, no es un navegador real, por lo que no puede ejecutar JavaScript ni emular un navegador moderno. Las pruebas WEB normales están bien para pruebas sencillas WEB, WUX es mucho más potente.

• WUX basado en agente (Selenium versión 2), hasta la versión 740.
• WUX centralizado en el WUX Server (Selenium 3), hasta la version 780.
• WUX centralizado como plugin de Discovery PFMS (Selenium 4), desde la versión 780.

WUX centralizado en Discovery PFMS además está basado en Selenium 4 y se puede utilizar (opcionalmente) desde un agente como plugin. Los ficheros transaccionales (.side) que funcionaban en un WUX Server funcionarán en WUX Discovery PFMS.

Podrá encontrar información sobre como usar WUX Server (Selenium 3) en el anexo Monitorización WUX.

El funcionamiento de este plugin para Selenium 4 se lleva a cabo gracias al servidor Discovery de Pandora FMS. Como se ha mencionado, anteriormente se utilizaba exclusivamente un servidor dedicado conocido como WUX Server y es posible hacer uso también de Discovery PFMS para ello.

Ahora es capaz de realizar ejecuciones usando Selenium 4, de ahí su nombre y también es compatible con transacciones de Selenium 3 (que pudieran estar siendo ejecutadas previamente en un entorno gracias a un WUX Server).

En cuanto a las ejecuciones de las transacciones, existen 4 métodos diferentes de conexión con Selenium, que se verán a continuación de manera más detallada, junto con los requisitos que se deben de cumplir para asegurar un correcto funcionamiento.

El principal requisito es que el servidor desde donde se ejecute el plugin sea capaz de conectar con el stack de Selenium 4, y éste a su vez tenga comunicación con las URL de los sitios web que vaya a monitorizar.

Este plugin WUX cuenta con cuatro métodos de conexión con Selenium distintos para ejecutarse en cada transacción, por lo que tendrá que ajustar los requisitos al modo de ejecución deseado para cada caso.

El plugin usará los drivers para Google Chrome o Mozilla Firefox que se encuentren en el equipo donde se ejecute. Por defecto, se buscarán estos componentes en las siguientes rutas, aunque se podrán especificar unas rutas distintas en caso de ser necesario.

Binario Google Chrome:

/usr/share/pandora_server/util/selenium_headless_drivers/chrome/google-chrome

Chromedriver:

/usr/share/pandora_server/util/selenium_headless_drivers/chromedriver

Binario Mozilla Firefox:

/usr/share/pandora_server/util/selenium_headless_drivers/firefox/firefox

Geckodriver:

/usr/share/pandora_server/util/selenium_headless_drivers/geckodriver

Para que los navegadores se puedan iniciar en este modo, también serán necesarias sus dependencias concretas instaladas en el sistema.

• Para Mozilla Firefox: gtk3, alsa-lib, libX11-xcb.
• Para Google Chrome: nss, libdrm, mesa-libgbm.

El plugin se conectará a un servidor de Selenium 4 indicado mediante su URL, por lo que será necesario contar con acceso desde el servidor que ejecute el plugin hacia el servidor de Selenium 4 mediante el puerto que tenga a la escucha (por defecto 4444 TCP).

El plugin iniciará un contenedor de Docker en el servidor donde se ejecute usando una imagen que contenga los drivers indicados para el modo driver local, permitiendo abstraer las dependencias del equipo real.

Por defecto se usará la imagen pandorafms/pandora_selenium_headless (aunque será posible indicar una distinta para cada ejecución), y los drivers se buscarán dentro del Docker en las siguientes rutas:

• Binario Google Chrome: /tmp/lib/chrome/google-chrome.
• Chromedriver: /tmp/lib/chromedriver.
• Binario Mozilla Firefox: /tmp/lib/firefox/firefox.
• Geckodriver: /tmp/lib/geckodriver.

El plugin conectará mediante SSH con usuario y contraseña a un servidor remoto, en el cual ejecutará una copia del propio plugin (copiada en el momento) en modo docker local. Por lo tanto, junto a los requisitos del modo anterior, se debe permitir también la conectividad con el servidor remoto por SSH con las credenciales indicadas en el puerto indicado (por defecto 22 TCP).

El usuario indicado para la conexión SSH deberá contar con permisos suficientes para iniciar el contenedor de Docker y acceder los ficheros copiados en el directorio temporal. Se usará un directorio temporal para copiar los ficheros al servidor remoto (por defecto /tmp), aunque se podrá indicar una ruta distinta en cada ejecución.

Para todos los modos de ejecución será posible, si se desea, hacer uso de perfiles de Google Chrome o Mozilla Firefox para cada transacción. En caso de hacer uso de esta característica, se deberá asegurar que en el servidor donde se inicie la transacción (ya sea local o remoto) se encuentren las rutas a dichos perfiles.

En los modos de ejecución de Docker (local, remoto), será el servidor anfitrión el que deba tener las rutas a las carpetas de los perfiles, ya que el plugin montará dichas carpetas como volúmenes del contenedor que inicie.

También será posible realizar una monitorización de estadísticas de conexión a la URL principal del SIDE indicado en cada ejecución. Para ello será necesario contar con el ejecutable curl instalado en el equipo donde se lance el plugin.

Para poder hacer uso de la monitorización WUX con Selenium 4 se deberá instalar previamente el .disco en la sección de Discovery de la Consola web de Pandora FMS. Esto se puede hacer desde la vista Manage disco packages, seleccionando el fichero de tipo .disco a descargar desde la biblioteca de Pandora FMS para dicho plugin:

Para poder ejecutar dichas transacciones, deberán ser previamente grabadas haciendo uso de la extensión de Selenium IDE disponible para navegadores Google Chrome o Mozilla Firefox. Tras abrir la extensión, se pedirá elegir si se quiere grabar en un nuevo proyecto, abrir uno ya existente, crear un proyecto nuevo o simplemente cerrar la extensión.

Si se elige la primera opción, se pedirá darle un nombre al proyecto que se está creando y posteriormente indicar la dirección URL base para la grabación.

En caso de elegir la tercera opción, solamente se pedirá indicar el nombre del proyecto, por lo que en caso de no contar con grabaciones anteriores, se deberá indicar también manualmente la dirección URL base para poder comenzar a grabar.

Una vez se tiene lista la extensión con estos pasos previos, lo siguiente que se deberá hacer es pulsar sobre el botón REC ubicado en la parte superior derecha de la pantalla. Se abrirá una ventana nueva en el navegador seleccionado y cargará la página indicada en la sección de base URL. Desde este momento, cualquier acción que se lleve a cabo sobre dicha ventana quedará grabada en el proyecto de la extensión de Selenium IDE.

Una vez se hayan realizado todas las acciones que se van a monitorizar posteriormente en la ejecución de la transacción, se deberá pulsar en el botón Stop recording (donde se encontraba el botón REC previamente) para detener la grabación. Se solicitará introducir un nombre al test de la transacción. Un proyecto en una grabación está compuesto por uno o varios tests, que se ejecutarán de manera secuencial posteriormente, en caso de haber más de uno, al cargarlo después en Pandora FMS. Se creará un agente nuevo por cada test que haya en un proyecto.

Posteriormente, aparecerá una vista similar a la siguiente:

Si se desea, existe la posibilidad de agregar comandos adicionales de manera manual, como pueden ser los separadores de fases, comentarios o comandos de espera (wait).

En la sección Comandos de los ficheros SIDE está el listado completo de comandos soportados.

Para agregarlos a la grabación actual, se deberá pulsar con clic derecho en cualquiera de los comandos ya existentes y pulsar en la opción Insert new command:

Esto insertará una línea de comando vacía sobre el comando al que se le dio clic, y que se podrá editar para así añadir el comando de manera manual. Bastará con introducir el comando deseado en el campo Command:

Por ejemplo, para agregar un comando de inicio de fase se debe utilizar:

Cuando se haya finalizado la grabación y y se haya terminado de configurar los comandos adicionales que se quieran usar, se podrá generar el fichero .side, cuyo contenido será el que se puede usar en la configuración de la ejecución del plugin. Para ello se debe dar clic en el icono del disquete que se encuentra en la parte superior derecha de la ventana de Selenium IDE, otorgarle un nombre al fichero en una ruta que sea fácilmente localizable y guardarlo.

Una vez se haya generado el fichero .side, si se abre se verá que su interior en realidad es un JSON. Este contenido en formato JSON es lo que se debe copiar y pegar en el recuadro Selenium IDE JSON del paso Test setup de la configuración del plugin, que se verá a continuación.

Para poder ejecutar las grabaciones desde la herramienta de Discovery en la Consola web de Pandora FMS, se debe crear una tarea usando Selenium 4 desde el menú de Aplicaciones (menú Management → Discovery → Applications):

Se debe indicar un nombre para dicha tarea y asignarle un grupo. Es posible agregar una descripción y modificar otros parámetros importantes como el tiempo de intervalo o tipo de ejecución:

En el siguiente paso aparecerán los siguientes parámetros:

Estos permitirán elegir uno de los cuatro modos de ejecución disponibles mencionados anteriormente, además de indicar en cuál navegador web se ejecutará la transacción. Por términos de compatibilidad, se recomienda que sea el mismo navegador donde se haya grabado la transacción con Selenium IDE.

Una vez indicado el tipo de ejecución, dependiendo cuál de las opciones se haya elegido, aparecerán distintas opciones de configuración.

Por defecto se indica la imagen a utilizar, por lo que no se debe rellenar nada salvo que se quiera usar una imagen diferente. En caso de que sea necesario usar el perfil de un usuario concreto en la ejecución de la transacción se debe indicar el usuario. También se podrá indicar la ruta para los perfiles del navegador que se utilice.

Se deben indicar los datos necesarios para conectar mediante SSH al servidor remoto que ejecutará la tarea. Para los datos de conexión se requerirán los campos dirección IP o FQDN, puerto SSH, y las credenciales de acceso.

La ruta temporal alojará los ficheros necesarios para llevar a cabo la ejecución, y el resto de campos son los mismos que en la ejecución de Docker Local.

En este tipo de ejecución se podrá indicar la ruta a los drivers necesarios para llevar a cabo la ejecución y que pueden ser descargados desde la biblioteca de Pandora FMS.

En cuanto a los tokens que se pueden encontrar en la parte inferior:

• Virtual display: Se utiliza para que la ejecución use un escritorio virtual. Si no se indica, se requiere que el servidor que ejecute la tarea tenga un escritorio físico (monitor) conectado.
• Headless driver: Para que el navegador utilizado se ejecute en ese modo, el cual es indicado para entornos sin escritorio.

Se recomienda es dejar ambos tokens marcados.

En el cuarto modo disponible, se debe indicar la URL de conexión con el driver remoto. El funcionamiento de los parámetros de usuario y perfil es el mencionado anteriormente.

Tras seleccionar el modo de conexión, se debe configurar un último paso antes de finalizar la configuración de la tarea.

Es posible indicar que se acepten certificados no seguros y la monitorización de estadísticas de tiempo. También hay otros parámetros de configuración como la resolución de pantalla a la que se ejecutará la transacción, el tiempo global de timeout y el tiempo de espera entre los comandos de la grabación.

Por último, como se indica en el paso de grabación de la transacción, se debe introducir el contenido JSON del formato .side en el último campo llamado Selenium IDE JSON.

Tras terminar de configurar la tarea, esta se ejecutará automáticamente a los pocos segundos, o bien será necesario forzar la ejecución manualmente, dependiendo de como se haya indicado en el primer paso.

Cuando finalice la ejecución, se puede verificar la vista resumen, que indicará los agentes han sido creados a partir de la tarea, cuál o cuáles pertenecen a agentes de tests y cuántos hay de cada tipo.

En el caso del ejemplo, el proyecto de Selenium ha sido llamado Selenium 4 y cuenta con dos tests diferentes llamados Test 1 y Test 2. Si durante la configuración de la tarea está marcada la opción de Monitor time statistics, se creará un agente con el nombre del proyecto que albergará los datos de rendimiento.

Por otra parte, se crearán también los agentes de las transacciones grabadas, uno por cada test. En este caso serán dos agentes con los nombres de Test 1 y Test 2:

Tras la ejecución se crearán agentes con los datos sobre las transacciones y contendrán los módulos de la ejecución dicha transacción. El agente con los datos de rendimiento también contendrá los módulos para dicha información y deberá estar previamente habilitada la opción Monitor time statistics en el último paso de la configuración de la tarea.

Los módulos que se añaden a los agentes de los tests son como mínimo los tres siguientes:

1. Global status: Indica si el test se ha completado correctamente o ha fallado en algún punto.
2. Global time: Es un módulo de tipo numérico que indica los segundos que ha tardado en completarse el test.
3. Last error screenshot: Si el test ha fallado, se almacena en este módulo un captura de pantalla de lo que aparece en el navegador en el momento que sucedió el fallo.

En caso de haber configurado fases en la transacción, se crean, además de los anteriores, lo módulos que indican el status y el time de cada fase. Es importante saber que el Global time no tiene porqué ser un sumatorio de los módulos de time de cada fase, ya que en el Global time se incluyen también los tiempos utilizados que toma el navegador para abrir y cerrarse, por nombrar unos ejemplos.

En cuanto a los datos de rendimiento, indican el tiempo en milisegundos que tardó en realizar cada una de las operaciones hasta llegar al sitio. En este caso serían:

• URL stat DNS: Tiempo para la resolución DNS de la URL.
• URL stat TSSL: Tiempo en establecer conexión SSL.
• URL stat TST: Tiempo hasta recibir el primer byte.
• URL stat TT: Tiempo total de la transacción para acceder a la URL.
• URL stat TTC: Tiempo de conexión TCP.
• URL stat TTCP: Tiempo hasta que la conexión está lista para transferir datos.
• URL status: Monitoriza si se puede realizar la conexión a la URL.

También existe una vista en el agente dedicada únicamente a los datos WUX. Se puede encontrar en las solapas de la parte superior derecha:

Además de widgets para los Dashboards que hacen referencia concreta a módulos de WUX:

La grabación mostrada anteriormente se trata de una grabación simple. En caso de que se haya configurado la grabación para estar dividida en diferentes fases, también se diferenciarán en la vista de datos WUX:

Y lo mismo con los widgets:

Por último, mencionar que también se podrá realizar una captura de datos de la web (webscrapping) que será descrito a más adelante.

Para la ejecución manual se puede configurar un EndPoint dentro del propio servidor de Pandora FMS que aloje el plugin de Selenium 4 para realizar dichas ejecuciones y que genere los ficheros XML por cada una de ellas, para obtener distintos agentes, y cada uno con sus respectivos módulos.

Para ello, se podrá configurar a modo de plugin de agente el plugin de Selenium 4 utilizando rutas absolutas, de manera que se pueda indicar la ruta del fichero del plugin y los ficheros de configuración necesarios.

La plantilla que es posible utilizar para configurar el plugin de agente usando Selenium 4 luce de la siguiente manera:

Es importante tener en cuenta que se debe configurar a mano previamente tanto el fichero de configuración de la tarea como disponer del fichero .SIDE cargado en la máquina.

Para preparar el fichero de configuración se puede ir a la sección de “Parámetros y configuración”, donde está la plantilla de datos a rellenar. En el caso del fichero .SIDE bastará con copiar el propio fichero generado por la extensión de Selenium IDE.

Es importante aplicar el parámetro -x ya que se encarga de generar los datos de la ejecución en formato XML para poder ser procesado posteriormente. En el caso de ejecuciones por defecto a través de Discovery, el formato de datos recibido es JSON:

Si se desea, también es posible ejecutar el plugin desde un EndPoint que no esté instalado en el mismo servidor que Pandora FMS. Para ello es necesario descargar de manera local en el servidor que aloje el EndPoint el paquete .disco del plugin, renombrarlo para modificar su formato a .zip y descomprimir el contenido para tener acceso al binario y al resto de ficheros que pueda necesitar para funcionar.

En cuanto a la configuración necesaria, el fichero también deberá ser creado de manera manual, como se menciona más arriba, y también se deben usar los parámetros -x para el envío de datos en formato XML y -S para indicar la dirección IP y el puerto del Tentacle server que recibirá dicho XML, que habitualmente suele ser la misma máquina que aloja el Pandora FMS server. La ejecución tendría un aspecto similar al siguiente:

Es importante recordar que cada XML generado con este tipo de ejecuciones correspondería a un agente distinto, de manera que no se alojarían los módulos dentro del agente donde se está ejecutando el plugin.

Archivo de configuración (--conf)

{
"worker_mode" : "<local | remote>",
"run_mode" : "<driver | docker>",
"browser" : "<chrome | firefox>",
"driver_url" : "http://<selenium_ip>:<selenium_port>/wd/hub",
"ssh_address" : "<ssh_ip>",
"ssh_port" : "<ssh_port>",
"ssh_user" : "<ssh_user>",
"ssh_password" : "<ssh_password>",
"ssh_password_encrypt" : "<1 | 0>",
"ssh_temp_folder" : "<ssh_temp_folder_path>",
"docker_image": "<docker_image>",
"chromedriver_path": "<chromedriver_path>",
"chrome_binary_path": "<chrome_binary_path>",
"chrome_user_data_dir" : "<chrome_user_data_dir>",
"chrome_profile" : "<chrome_profile>",
"geckodriver_path": "<geckodriver_path>",
"firefox_binary_path": "<firefox_binary_path>",
"firefox_profile" : "<firefox_profile>",
"accept_insecure_certs" : "<1 | 0>",
"monitor_stats" : "<1 | 0>",
"browser_width" : "<width>",
"browser_height" : "<height>",
"global_timeout" : "<seconds>",
"wait_between_commands" : "<seconds>"
}

Siendo cada elemento de la configuración:

Por ejemplo:

{
    "worker_mode" : "local",
    "run_mode" : "driver",
    "browser" : "chrome",
    "driver_url" : "",
    "ssh_address" : "",
    "ssh_port" : "",
    "ssh_user" : "",
    "ssh_password" : "",
    "ssh_password_encrypt" : "",
    "ssh_temp_folder" : "",
    "docker_image": "",
    "chromedriver_path": "",
    "chrome_binary_path": "",
    "chrome_user_data_dir" : "",
    "chrome_profile" : "",
    "geckodriver_path": "",
    "firefox_binary_path": "",
    "firefox_profile" : "",
    "accept_insecure_certs" : "0",
    "monitor_stats" : "1",
    "browser_width" : "1920",
    "browser_height" : "1080",
    "global_timeout" : "10",
    "wait_between_commands" : "0.2"
}

Se podrán configurar los siguientes comandos personalizados para generar módulos adicionales (todos los comandos personalizados deben comenzar con //):

Los comandos de los ficheros SIDE habilitados para ejecutarse con el plugin son los siguientes (consultese la documentación de Selenium IDE para su uso):

Es posible hacer webscrapping con Pandora FMS, aunque se diseñó para medir rendimiento y resultados de transacciones complejas, pero es factible hacerlo.

El web scraping es una técnica utilizada para extraer información de sitios web de manera automatizada. En lugar de recopilar datos manualmente, se emplean programas o scripts que navegan por páginas web, identifican la información relevante y la almacenan en una base de datos o archivo estructurado.

Para ello existen dos formas básicas de hacerlo, la más sencilla es tomar un valor directamente de un ID de una página web (usando el propio inspector de la extensión de consola de Selenium y pasándoselo a Pandora FMS) o usando una regexp para procesar un dato HTML en crudo. En ambos casos se tiene que introducir un comando adicional a la transacción Selenium.

Ejemplo, usándolo como webscrapper para leer el número de valoraciones de un artículo en Amazon Store®, utilizando la captura del valor y almacenándolo en una variable:

Se almacenará como tipo TEXT en una variable llamada REVIEW. Y se creará un comando adicional echo para mostrar el valor de esa variable:

Acá se puede observar los dos últimos pasos en el código .side generado por la extensión de Selenium:

{
  "id": "55546183-fc2f-45b5-af7e-2ff27464798f",
  "comment": "",
  "command": "storeText",
  "target": "css=.a-spacing-medium > .a-size-base",
  "targets": [
    [
      "css=.a-spacing-medium > .a-size-base",
      "css:finder"
    ],
    [
      "xpath=//div[@id='cm_cr_dp_d_rating_histogram']/div[3]/span",
      "xpath:idRelative"
    ],
    [
      "xpath=//span/div/div/div/div/div/div[3]/span",
      "xpath:position"
    ]
  ],
  "value": "REVIEW"
}

{
  "id": "69cd3cea-5981-4011-bb3d-88a1b58dc18e",
  "comment": "",
  "command": "echo",
  "target": "${REVIEW}",
  "targets": [],
  "value": ""
}

La desventaja de este método es que se guardará como cadena de texto, ya que al usar un ID (en este caso un span), se guarda todo lo que hay entre etiquetas de ese ID.

Si se quiere obtener un valor de manera más “refinada” se debe utilizar el método de parsear con expresión regular para procesar el texto:

• Para este caso se tomará un número y se convertirá a módulo numérico en Pandora FMS
• Como código fuente del .side, el comando creado se convertirá en un código similar a este. Es importante notar cómo se escapan caracteres como las comillas dobles " o el carácter \.
• Lo que se debe hacer es determinar el pedazo de código HTML con el texto a capturar, para ello analizar con un inspector HTML la zona de código donde se va a tomar el valor, ejemplo:

Se busca lo que está entre los tags:

<span id="acrCustomerReviewText" class="a-size-base">''

y

</span>

Si se aplica una regexp quedará como:

<span id="acrCustomerReviewText" class="a-size-base">(\d+) valoraciones</span>

Esto se tiene que hacer creando un comando “ficticio” (comentado con //) al final de la secuencia de Selenium (escapando cualquier carácter con " o \) y usando el comando getValue para crear un módulo llamado AMZ_001, de tipo generic_data (es decir, numérico) y proporcionando el regexp escapado:

{
  "id": "ae557b25-b096-4d6e-baa7-f7219ac16e04",
  "comment": "",
  "command": [
    "//getValue;AMZ_001;generic_data;",
    "<span id=\"acrCustomerReviewText\"",
    " class=\"a-size-base\">(\\d+) valoraciones</span>"
  ],
  "target": "",
  "targets": [],
  "value": ""
}

Esto después de la ejecución devolverá un dato convencional de Pandora FMS, con el que se podrá aplicar alertas, incluir en gráficas, informes y muchas más cosas.

Documentación descrita en el anexo técnico “Monitorización WUX con WUX server y Selenium 3”.

Volver al índice de documentación de Pandora FMS