Graba, vuelve a reproducir y mide los flujos de usuarios

Jecelyn Yeen

Sofia Emelianova

Echa un vistazo al nuevo panel Grabadora (función de vista previa) en el video que aparece a continuación.

Completa este instructivo para aprender a usar el panel Grabadora para grabar, volver a reproducir y medir los flujos de usuarios.

Nota: Esta es una función de vista previa de Chrome 97. Nuestro equipo está trabajando activamente en esta función y esperamos tus comentarios para seguir mejorando.

Para obtener más información sobre cómo compartir los flujos de usuarios grabados y cómo editarlos, consulta la referencia de las funciones de la grabadora.

Nota: Esta función está disponible solo en Chrome, no en Chromium.

Cómo abrir el panel de Grabadora

1. Abre Herramientas para desarrolladores.

2. Haz clic en Más opciones     > Más herramientas > Grabadora.

   

   También puedes usar el menú de comandos para abrir el panel de Grabadora.

   

Introducción

Usaremos esta página de demostración de pedidos de café. La confirmación de la compra es un flujo de usuarios común entre los sitios web de compras.

En las próximas secciones, te explicaremos cómo grabar, volver a reproducir y auditar el siguiente flujo de confirmación de la compra en el panel Grabadora:

1. Agrega un café al carrito.
2. Agrega otro café al carrito.
3. Ve a la página del carrito.
4. Quita un café del carrito.
5. Inicia el proceso de confirmación de la compra.
6. Completa los detalles del pago.
7. Confirme la compra.

Cómo grabar un flujo de usuarios

1. Abre esta página de demostración. Haz clic en el botón Iniciar nueva grabación para comenzar.
2. Ingresa “confirmación de la compra en café” en el cuadro de texto Nombre del registro.
   Nota: El cuadro de texto Atributo del selector y las casillas de verificación Tipos de selectores que se registrarán son opcionales. Para este instructivo, deja los valores predeterminados como están. Para obtener más información, consulta Información sobre los selectores.
3. Haz clic en el botón Iniciar una nueva grabación. Comenzó la grabación. En el panel, se muestra Grabando..., lo que indica que la grabación está en curso.
4. Haz clic en Cappuccino para agregarlo al carrito.
5. Haz clic en Americano para agregarlo al carrito. Observa que la Grabadora muestra los pasos que realizaste hasta el momento.
6. Ve a la página del carrito y quita Americano.
   Nota: De manera opcional, puedes quitar Americano de la página del menú colocando el cursor sobre el botón Total y haciendo clic en - junto a Americano en el menú emergente. Sin embargo, deberás agregar el paso de desplazamiento manual después de terminar la grabación, ya que la Grabadora no captura eventos de desplazamiento automáticamente.
7. Haz clic en el botón Total: $19.00 para comenzar el proceso de confirmación de la compra.
8. En el formulario de detalles del pago, completa los cuadros de texto Nombre y Correo electrónico, y marca la casilla de verificación Deseo recibir actualizaciones de pedidos y mensajes promocionales.
9. Haz clic en el botón Enviar para completar el proceso de confirmación de la compra.
   Nota: Puedes editar los pasos y agregar aserciones manualmente, incluso antes de finalizar la grabación.
10. En el panel Grabadora, haz clic en el botón Finalizar grabación para finalizar la grabación.

Cómo volver a reproducir un flujo de usuarios

Después de grabar un flujo de usuarios, puedes volver a reproducirlo haciendo clic en el botón Volver a reproducir.

Puedes ver la reproducción del flujo de usuarios en la página. El progreso de la reproducción también se muestra en el panel de la Grabadora.

Si hiciste un clic incorrecto durante la grabación o algo no funciona, puedes depurar el flujo de usuarios: ralentizar la reproducción, establecer un punto de interrupción y ejecutarlo paso a paso.

Punto clave: Cuando se vuelve a reproducir un registro de flujo de usuarios, la Grabadora espera hasta que el elemento sea visible o se pueda hacer clic en él en el viewport, o intenta desplazarlo automáticamente hasta el viewport antes de volver a reproducir el paso correspondiente.

Simula una red lenta

Puedes simular una conexión de red lenta si estableces los parámetros de configuración de repetición. Por ejemplo, expande la opción de configuración de la reproducción y selecciona 3G lenta en el menú desplegable Red.

Es posible que se admitan más parámetros de configuración en el futuro. Comparte con nosotros la configuración de reproducción que te gustaría tener.

Cómo medir un flujo de usuarios

Puedes medir el rendimiento de un flujo de usuarios si haces clic en el botón Medir rendimiento. Por ejemplo, la confirmación de la compra es un flujo de usuarios fundamental de un sitio web de compras. Con el panel Grabadora, puedes registrar el flujo de confirmación de la compra una vez y medirlo periódicamente.

Si haces clic en el botón Medir rendimiento, primero se activará una reproducción del flujo de usuarios y, luego, se abrirá el registro del rendimiento en el panel Rendimiento.

Obtén más información para analizar el rendimiento del entorno de ejecución de tu página con el panel Rendimiento. Puedes habilitar la casilla de verificación de Métricas web en el panel Rendimiento para ver las métricas de Métricas web y detectar oportunidades para mejorar la experiencia de navegación del usuario.

Editar pasos

Analicemos las opciones básicas para editar los pasos en el flujo de trabajo grabado.

Para obtener una lista completa de las opciones de edición, consulta Pasos para editar en la referencia de funciones.

Expandir pasos

Expande cada paso para ver los detalles de la acción. Por ejemplo, expande el paso Haz clic en el elemento "Cappuccino".

En el paso anterior, se muestran dos selectores. Para obtener más información, consulta Información sobre el selector de grabaciones.

Cuando vuelves a reproducir el flujo de usuarios, la Grabadora intenta consultar el elemento con uno de los selectores por secuencia. Por ejemplo, si la Grabadora consulta correctamente el elemento con el primer selector, omitirá el segundo y continuará con el siguiente paso.

Agrega y quita selectores de un paso

Puedes agregar o quitar cualquier selector. Por ejemplo, puedes quitar el selector n° 2 porque, en este caso, basta con aria/Cappuccino. Coloca el cursor sobre el selector n° 2 y haz clic en - para quitarlo.

Edita los selectores en un paso

El selector también se puede editar. Por ejemplo, si quieres seleccionar Mocha en lugar de Cappuccino, puedes hacer lo siguiente:

1. Edita el valor del selector a aria/Mocha.

   

   Como alternativa, haz clic en el botón Select y, luego, en Mocha en la página.

2. Vuelve a reproducir el flujo ahora; debería seleccionar Mocha en lugar de Cappuccino.

3. Intenta editar otras propiedades del paso, como type, target, value y muchas más.

Agregar y quitar pasos

También hay opciones para agregar y quitar pasos. Esto es útil si deseas agregar un paso adicional o quitar uno que se agregó accidentalmente. En lugar de volver a grabar el flujo de usuarios, puedes editarlo:

1. Haz clic con el botón derecho en el paso que deseas editar o en el ícono de tres puntos junto a él.

   

2. Puedes seleccionar Quitar paso para quitarlo. Por ejemplo, el evento Desplazarse después del paso Mocha no es necesario.

3. Supongamos que quieres esperar hasta que se muestren los 9 cafés en la página antes de realizar cualquier paso. En el menú de pasos Mocha, selecciona Agregar paso antes (Add step before).

4. En Assert Element, edita el paso nuevo con los siguientes detalles:

   • tipo: waitForElement
   • selector n.o 1: .cup
   • operador: == (haz clic en el botón agregar operador)
   • cantidad: 9 (haz clic en el botón agregar cantidad)

5. Vuelve a reproducir el flujo ahora para ver los cambios.

Próximos pasos

¡Felicitaciones! Completaste el instructivo.

Para explorar más funciones y flujos de trabajo (por ejemplo, importar y exportar) relacionados con la Grabadora, consulta la referencia de las funciones de la Grabadora.