Graba, vuelve a reproducir y mide los flujos de usuarios

Jecelyn Yeen

Sofia Emelianova

Echa un vistazo al nuevo panel de Grabadora (función de vista previa) en el siguiente video.

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

Nota: Esta es una función de vista previa en 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.

   

   Como alternativa, puedes usar el menú de comandos para abrir el panel de Grabadora.

   

Introducción

Usaremos esta página de demostración para pedir 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 con 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: Los cuadros de texto Atributo del selector y las casillas de verificación Tipos de selectores para grabar son opcionales. Para este instructivo, deja los valores predeterminados como están. Para obtener más información, consulta Cómo comprender los selectores.
3. Haz clic en el botón Iniciar nueva grabación. Comenzó la grabación. En el panel se muestra Grabando…. Esto 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 en el panel de Grabadora se muestran los pasos que realizaste hasta el momento.
6. Ve a la página del carrito y quita Americano del carrito.
   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 del mouse de forma manual después de terminar la grabación, ya que la grabadora no captura automáticamente los eventos de desplazamiento del mouse.
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 tu flujo de usuarios: ralentizar su repetició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.

Cómo simular 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

Haz clic en el botón Medir rendimiento para medir el rendimiento de un flujo de usuarios. 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 información para analizar el rendimiento del tiempo de ejecución de tu página con el panel de Rendimiento. Puedes habilitar la Casilla de verificación métricas web en el panel de Rendimiento para ver las métricas de Métricas web y detectar oportunidades para mejorar la experiencia de navegación del usuario.

Cómo editar pasos

Analicemos las opciones básicas para editar los pasos del 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 siguiendo un orden. 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, es suficiente con aria/Cappuccino. Coloca el cursor sobre el selector n.° 2 y haz clic en - para quitarlo.

Cómo editar selectores en un paso

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

1. En su lugar, edita el valor del selector a aria/Mocha.

   

   También puedes hacer clic en el botón Seleccionar y, luego, en Mocha en la página.

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

3. Intenta editar otras propiedades del paso, como tipo, objetivo, valor 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 de Desplazar 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, importación y exportación) relacionados con la Grabadora, consulta la referencia de funciones de la Grabadora.