Información general

Los tests de navegador de Synthetic se utilizan para monitorizar tus aplicaciones mediante la reproducción de cómo tus clientes experimentan tus páginas web de extremo a extremo. Cuando testees un flujo de registro o inicio de sesión, incorpora a tu test un código de acceso de único uso (OTP) enviado a una dirección de correo electrónico para la autenticación. Este token OTP se puede extraer del cuerpo de un correo electrónico para testearlo dentro de una aplicación.

Esta guía te muestra cómo configurar la extracción de OTP para un test de navegador de Synthetic.

Configuración

Paso 1: crear una variable de correo electrónico

Sigue los pasos que se indican a continuación para crear una variable de correo electrónico para el test del navegador. Esto genera una dirección de correo electrónico de Datadog Synthetic única para la ejecución del test de Synthetic.

1. En un test de navegador nuevo o existente, en Variables haz clic en Add Variable (Añadir variable).

2. A continuación, selecciona Email Address (Dirección de correo electrónico) en el menú desplegable.

3. Asigna un nombre a la variable y haz clic en Create (Crear).

   Esto añade la variable de correo electrónico a la sección Variables de la interfaz de usuario:

Paso 2: inyectar la variable de dirección de correo electrónico

A continuación, registra los pasos para insertar la variable de dirección de correo electrónico en un campo de entrada para imitar cómo un usuario añadiría la dirección de correo electrónico dentro de tu aplicación.

1. En primer lugar, haz clic en Record (Registrar) en la parte superior del test. Esto añade automáticamente pasos al test basándose en las interacciones y entradas detectadas.

2. Haz clic en el campo de entrada de correo electrónico, lo que crea un paso Click (Clic).

3. Busca la variable de correo electrónico creada anteriormente, llamada DD_EMAIL_ADDRESS en este ejemplo. A la derecha, haz clic en Inject variable in a text input (Inyectar variable en una entrada de texto) y haz clic en el cuadro de texto deseado, que aparece resaltado en la interfaz de usuario. El correo electrónico se inserta.

Una vez enviado el correo electrónico que contiene el OTP, el test de navegador puede acceder al cuerpo del correo electrónico para utilizarlo en el resto del flujo de registro.

Paso 3: extraer el OTP del cuerpo del correo electrónico

El siguiente paso consiste en definir un paso de test que extraiga el OTP del cuerpo del correo electrónico una vez enviado y lo almacene en una variable. En este ejemplo, la variable se denomina OTP_FROM_EMAIL para su posterior consulta en la guía.

1. En Add a variable (Añadir una variable), selecciona from Email body (del cuerpo del correo electrónico).

2. En Parsing Regex (Expresión regular de parseo), añade el patrón de expresión regular que corresponda al OTP.

A continuación, se muestran patrones de expresión regular de ejemplo para analizar el token OTP del cuerpo del correo electrónico:

El OTP será almacenado en la variable para ser usado en tu test de navegador.

Paso 4: utilizar una aserción de JavaScript para insertar el OTP

JavaScript te permite desencadenar un evento en un elemento DOM mediante programación, lo que hace posible imitar las interacciones del usuario u otros eventos. Según cómo estés creado tu elemento de entrada, el envío de un evento puede ser necesario para habilitar comportamientos personalizados o testear oyentes de eventos vinculados al elemento. Puedes utilizar una aserción de JavaScript para añadir el OTP guardado del correo electrónico e insertarlo en tu aplicación.

1. Añade un paso de aserción de JavaScript para introducir la variable de OTP almacenada, en nuestro ejemplo OTP_FROM_EMAIL, en el campo apropiado de tu aplicación.

2. En Custom JavaScript (JavaScript personalizado) añade el código de extracción. El formato del código varía en función de si el OTP se inserta en un campo de texto simple o en los respectivos campos de entrada. A continuación, se muestran ejemplos que ilustran ambos escenarios:

Campo de texto simple

Para insertar la OTP en un campo de texto simple, utiliza lo siguiente:

function (vars, element) {
  element.setAttribute('value', vars.OTP_FROM_EMAIL);
  element.dispatchEvent(new Event("input", { bubbles: true }));
  return true;
}

A continuación, se muestra un ejemplo visual de una configuración OTP con un simple campo de texto para el que se puede utilizar la consulta anterior:

Nota: En ambos ejemplos de JavaScript, debes sustituir el campo OTP_FROM_EMAIL por el nombre de la variable de correo electrónico que hayas definido si se denomina de otro modo en el test de navegador.

Campos de entrada respectivos

Para insertar el OTP en campos definidos por separado, utiliza lo siguiente:

function (vars) {
  const inputList = document.querySelectorAll('input');
  inputList.forEach((element) => {
      element.setAttribute('value', vars.OTP_FROM_EMAIL);
      element.dispatchEvent(new Event("input", { bubbles: true }));
  });
  return true;
}

A continuación, se muestra un ejemplo visual de una configuración OTP con campos definidos por separado para los que se puede utilizar la consulta anterior:

Siguientes pasos

Una vez insertado y verificado el OTP, puedes continuar añadiendo pasos a tu test de navegador para verificar que el usuario ha completado el flujo de registro de tu aplicación, como añadir una aserción de que un texto específico está presente en la página. Desde aquí, puedes continuar registrando el resto de tu test de navegador y luego verificar tus resultados del test de navegador.

Referencias adicionales

Más enlaces, artículos y documentación útiles:

Más información sobre tests de navegador de SyntheticDOCUMENTACIÓN Más información sobre las variables de test SyntheticDOCUMENTACIÓN Más información sobre la validación del correo electrónico en los tests de navegadorDOCUMENTACIÓN Solución de problemas de Synthetic MonitoringDOCUMENTACIÓN Prácticas recomendadas para la creación de tests de extremo a extremoBLOG