Empezando con los tests de navegador
Los tests de navegador son escenarios que Datadog ejecuta en tus aplicaciones web. Puedes configurar intervalos periódicos para ejecutar tests desde diferentes localizaciones, dispositivos y navegadores, así como desde tus pipelines CI/CD. Estos tests garantizan que tus usuarios puedan realizar transacciones comerciales clave en tus aplicaciones y que no se vean afectados negativamente por cambios recientes en el código.
Crear un test de navegador
El siguiente ejemplo demuestra la creación de un test de navegador que mapea el recorrido de un usuario desde que añade un artículo al carrito hasta que realiza el pago.
Configurar los detalles de tu test
- En el sitio Datadog, coloca el ratón encima de Experiencia digital en el menú de la izquierda y selecciona Tests (en Monitorización y tests Synthetic).
- En la esquina superior derecha, haz clic en New Test (Nuevo test) > Browser Test (Test de navegador).
Puedes crear un test utilizando una de las siguientes opciones:
Seleccionar localizaciones
Elige una o varias localizaciones gestionadas o localizaciones privadas desde las que ejecutar tu test.
Las localizaciones gestionadas te permiten hacer tests en sitios web y endpoints públicos. Para hacer tests en aplicaciones internas o simular el comportamiento de los usuarios en regiones geográficas discretas, utiliza localizaciones privadas.
La aplicación Shopist está disponible públicamente en https://www.shopist.io/, así que puedes elegir cualquier localización gestionada para ejecutar tu test.
Especificar la frecuencia de los tests
Elige la frecuencia con la que quieres que se ejecute tu test. Si lo prefieres, puedes dejar la frecuencia predeterminada de 1 hora.
Además de ejecutar tu test Synthetic de forma programada, puedes activarlo manualmente o desde tus pipelines de CI/CD.
Definir las condiciones de alerta
Puedes definir las condiciones de alerta para asegurarte de que tu test no se active en situaciones como un incidente breve y esporádico en la red. De este modo, solo recibirás alertas en caso de que haya problemas reales con tu aplicación.
Puedes indicar el número de fallos consecutivos que deberían producirse antes de considerar que una localización ha fallado:
Retry test 2 times after 300 ms in case of failure
También puedes configurar tu test para activar solo una notificación cuando la aplicación deje de funcionar durante cierto tiempo y en un número determinado de localizaciones. En el siguiente ejemplo, la regla de alerta está configurada para enviar una notificación si el test falla durante tres minutos en dos localizaciones distintas:
An alert is triggered if your test fails for 3 minutes from any 2 of 13 locations
Configurar el monitor de tests
Redacta el mensaje de la alerta y añade la dirección de correo electrónico a la que deben enviarse las alertas del test.
También puedes usar integraciones de notificaciones como Slack, PagerDuty, Microsoft Teams y webhooks. Para activar una alerta Synthetic para estas herramientas de notificación, primero deberás configurar la integración correspondiente.
Cuando lo tengas todo listo para guardar la configuración y el monitor de tu prueba, haz clic en Save & Edit Recording (Guardar y editar grabación).
Para obtener más información, consulta Usar monitores de tests Synthetic.
Crear una grabación
Una vez guardada la configuración del test, Datadog te pedirá que descargues e instales la extensión de Chrome Datadog Test Recorder. (Esta extensión de Chrome también puede instalarse en un navegador Microsoft Edge).
Cuando hayas instalado la extensión, haz clic en Start Recording (Iniciar grabación) para empezar a grabar los pasos del test.
Navega por la página en el iframe ubicado a la derecha de la página de grabación. Cuando selecciones un div, una imagen o cualquier área de la página, Datadog grabará y creará el paso correspondiente en el test de navegador.
Para finalizar la grabación de los pasos del test, haz clic en Stop Recording (Detener la grabación).
El siguiente ejemplo muestra cómo mapear el recorrido de un usuario desde que se añade un artículo al carrito hasta que se realiza el pago en https://www.shopist.io:
- Dirígete a alguna de las secciones de muebles en el sitio web de ejemplo, como la de Chairs (Sillas), y selecciona Add to cart (Añadir al carrito).
- Haz clic en Cart (Carrito) y Checkout (Pagar).
- En Add New (Añadir nuevo), selecciona Assertion (Aserción) y haz clic en “Test that some text is present on the active page” (Comprobar que hay texto en la página activa).
- Para confirmar que las palabras “Thank you!” (Gracias) aparecen después de realizar el pago, escribe
Thank you! en el campo Value (Valor). - Haz clic en Save & Quit (Guardar y cerrar).
Es importante finalizar el test de navegador con una aserción para asegurarte de que la aplicación cambie al estado esperado después del recorrido del usuario que hayas definido.
El sitio web de ejemplo genera con frecuencia un error que hace que falle intencionadamente. Si incluyes tu dirección de correo electrónico en el campo Configurar el monitor para el test, recibirás un aviso por correo electrónico cuando el test falle y se recupere.
Consultar los resultados del test
La página de detalles del test de navegador muestra la información general sobre la configuración de tu test, el tiempo de actividad global y por localización, gráficos sobre el tiempo de interacción y la duración del test, ejemplos de resultados de test correctos y fallidos, y una lista con todos los resultados del test. Dependiendo de la duración del test, quizá tengas que esperar unos minutos hasta ver los primeros resultados.
Para solucionar los problemas de un test fallido, selecciona el test que corresponda y repasa las capturas de pantalla hasta encontrar el paso fallido. También puedes consultar los posibles errores y advertencias, recursos y métricas de Core Web Vitals para hacer un diagnóstico del problema.
En el siguiente ejemplo, el test ha fallado debido al tiempo de espera del servidor.
Utiliza la integración de APM con la monitorización Synthetic de Datadog para ver las trazas generadas por tu backend en las ejecuciones del test desde la pestaña Traces (Trazas).
Referencias adicionales
Más enlaces, artículos y documentación útiles:
