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 realizar más mejoras.

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

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

Cómo abrir el panel de Grabadora

1. Abre las 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 siguientes secciones, te explicaremos cómo grabar, volver a reproducir y auditar el siguiente flujo de confirmación de la compra con el panel de 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 de café" en el cuadro de texto Nombre de la grabación.
   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. Se inició 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 en la página del menú. Para ello, coloca el cursor sobre el botón Total y haz 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: USD 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. Para completar el proceso de confirmación de la compra, haz clic en el botón Enviar.
   Nota: Puedes editar pasos y agregar aserciones de forma manual 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 repetición también se muestra en el panel de 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 una grabación del flujo de usuarios, la grabadora espera hasta que el elemento sea visible o se pueda hacer clic en él en la vista del cliente, o bien intenta desplazarlo automáticamente a la vista del cliente antes de volver a reproducir el paso correspondiente.

Cómo simular una red lenta

Puedes simular una conexión de red lenta al definir la Configuración de reproducción. Por ejemplo, expande la opción Configuraciones de volver a reproducir 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 los parámetros de 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 de Grabadora, puedes grabar el flujo de confirmación de la compra una sola 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 de 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 la grabación.

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.

Cómo agregar y quitar 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.

Cómo agregar y quitar pasos

También hay opciones para agregar y quitar pasos. Esto resulta útil si deseas agregar un paso adicional o quitar uno que se agregó por error. 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 que aparece 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.

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

   • tipo: waitForElement
   • selector n.º 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.