Graba, vuelve a reproducir y mide el flujo de usuarios con las Herramientas para desarrolladores de Chrome

1. Introducción

Usa el panel de Grabadora para grabar, volver a reproducir y medir los flujos de usuarios.

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

Qué aprenderás

• Cómo grabar un flujo de usuarios
• Cómo volver a reproducir un flujo de usuarios
• Cómo editar un flujo de usuarios
• Cómo medir un flujo de usuarios

Requisitos

• Una computadora que funcione y una red Wi-Fi confiable
• Chrome 101 o versiones posteriores

2. Cómo abrir el panel de Grabadora

Para abrir el panel de Grabadora, sigue estos pasos:

1. Abre las 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. 

3. Inicio

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 secciones siguientes, te explicaremos cómo grabar, volver a reproducir y medir el siguiente flujo de confirmación de la compra en 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 pago.
6. Completa los detalles del pago.
7. Paga.

Abrir la página

4. Cómo grabar un flujo de usuarios

1. Abre la página de demostración. Haz clic en el botón Iniciar nueva grabación para comenzar.
2. Escribe "confirmación de la compra de café" en el cuadro de texto Nombre de la grabación.
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.
7. Quita Americano del carrito.
8. Haz clic en el botón Total: $19.00 para comenzar el proceso de confirmación de la compra.
9. 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.
10. Para completar el proceso de confirmación de la compra, haz clic en el botón Enviar.
11. En el panel de Grabadora, haz clic en el botón Finalizar grabación para finalizar la grabación.

5. Cómo volver a reproducir un flujo de usuarios

Después de grabar un flujo de usuarios, puedes volver a reproducirlo al hacer 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 Grabadora.

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.

También puedes establecer un tiempo de espera más largo para todos los pasos.

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.

6. 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 sobre cómo 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.

7. Cómo editar flujos de usuarios

Veamos las opciones para editar los flujos de usuarios.

En la parte superior del panel de Grabadora, tienes las siguientes opciones:

1. Agregar una grabación nueva. Haz clic en el ícono + para agregar una grabación nueva.
2. Ver todas las grabaciones. En el menú desplegable, puedes ver la lista de las grabaciones guardadas. Selecciona la opción [número] grabación(es) para expandir y administrar la lista de grabaciones guardadas.
3. Exportar una grabación. Puedes exportar el flujo de usuarios como una secuencia de comandos Puppeteer. Así, podrás personalizar aún más la secuencia de comandos.
4. Borrar una grabación. Borra la grabación seleccionada.

También puedes editar el nombre de la grabación al hacer clic en el botón para editar junto a ella.

8. Cómo editar pasos

Analicemos las opciones para editar los pasos de un flujo de trabajo.

Expande los pasos

1. Expande cada paso para ver los detalles de la acción. Por ejemplo, expande el paso Haz clic en el elemento "Cappuccino".
2. En el paso anterior, se muestran dos selectores. Para obtener más información, consulta la sección Prioridad del selector. 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.
3. 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.
4. El selector también se puede editar. Por ejemplo, si deseas seleccionar Mocha en lugar de Cappuccino, puedes editar el valor del selector a aria/Mocha. También puedes hacer clic en el botón de selección y, luego, en Mocha en la página.
5. Cuando vuelvas a reproducir el flujo, debería seleccionarse Mocha en lugar de Cappuccino.
6. 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. Haz clic sobre el menú de 3 puntos verticales junto al paso para abrir el menú.

1. Por ejemplo, el evento de Desplazar después del paso Mocha no es necesario. Puedes seleccionar Quitar paso para quitarlo.
2. Supongamos que quieres esperar hasta que se muestren los 9 cafés en la página antes de realizar cualquier paso.
3. 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. Para ver los cambios aplicados, vuelve a reproducir el flujo.

9. Felicitaciones.

Felicitaciones. Completaste este codelab correctamente.

Por cierto, también puedes personalizar el selector para las grabaciones. Consulta nuestra documentación para obtener más información.

¿Qué te parece este codelab?

Me parece aburrido. Genial, me gusta.