Echa un vistazo al nuevo panel de la Grabadora (función de vista previa) con el video que aparece a continuación.
Completa este instructivo para aprender a usar el panel de la Grabadora para grabar, volver a reproducir y medir los flujos de usuarios.
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.
Cómo abrir el panel de Grabadora
- Abre Herramientas para desarrolladores.
Haz clic en Más opciones
> Más herramientas > Grabadora.
Como alternativa, usa el Menú de comandos para abrir el panel Grabadora.
Introducción
Utilizaremos 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 con el panel Grabadora:
- Agrega un café al carrito.
- Agrega otro café al carrito.
- Ve a la página del carrito.
- Quita un café del carrito.
- Comienza el proceso de confirmación de la compra.
- Completa los detalles del pago.
- Confirme la compra.
Cómo registrar un flujo de usuarios
- Abre esta página de demostración. Para comenzar, haz clic en el botón Iniciar nueva grabación.
- Ingresa “confirmación de la compra” en el cuadro de texto Nombre de la grabación.
Para obtener más información, consulta Información sobre los selectores.
1. Haz clic en el botón Iniciar una nueva grabación. Comenzó la grabación. En el panel, se muestra Recording..., lo que indica que la grabación está en curso.
1. Haz clic en Cappuccino para agregarlo al carrito.
1. Haz clic en Americano para agregarlo al carrito. Observa que la Grabadora muestra los pasos que realizaste hasta ahora.
1. Ve a la página del carrito y quita Americano del carrito.
1. Haz clic en el botón Enviar para completar el proceso de confirmación de la compra.
1. 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 con el botón 
Volver a reproducir.
Puedes ver la repetición del flujo de usuarios en la página. El progreso de la repetició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: ralentiza su reproducción, establece un punto de interrupción y ejecútalo paso a paso.
Simula una red lenta
Puedes simular una conexión de red lenta al definir la Configuración de reproducción. Por ejemplo, expande la Configuración de repetició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
Para medir el rendimiento de un flujo de usuarios, haz clic en el botón Medir el rendimiento. Por ejemplo, la confirmación de la compra es un flujo de usuarios fundamental de un sitio web de compras. Con el panel de la Grabadora, puedes grabar el flujo de confirmación de la compra una vez y medirlo con regularidad.
Si haces clic en el botón Medir rendimiento, primero se activará una repetició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 Rendimiento. Puedes habilitar la casilla de verificación Métricas web en el panel Rendimiento para ver las métricas de Métricas web y, así, identificar oportunidades para mejorar la experiencia de navegación del usuario.
Editar pasos
Veamos las opciones básicas para editar los pasos dentro del flujo de trabajo registrado.
Para obtener una lista completa de las opciones de edición, consulta Pasos para editar en la referencia de los atributos.
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 por secuencia. Por ejemplo, si la Grabadora consulta correctamente el elemento con el primer selector, omitirá el segundo y continuará con el paso siguiente.
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, solo es suficiente con aria/Cappuccino. Coloca el cursor sobre el selector n.° 2 y haz clic en - para quitarlo.
Edita los selectores de un paso
El selector también se puede editar. Por ejemplo, si quieres seleccionar Mocha en lugar de Cappuccino, puedes hacer lo siguiente:
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.Vuelve a reproducir el flujo ahora. Debería seleccionar Mocha en lugar de Cappuccino.
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 resulta ú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:
Haz clic con el botón derecho en el paso que deseas editar o haz clic en el ícono de tres puntos
junto a él. 
Puedes seleccionar Quitar paso para quitarlo. Por ejemplo, el evento de Desplazar después del paso Mocha no es necesario.
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 Add step before.
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)
- recuento: 9 (haz clic en el botón agregar cantidad)
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 funciones de la grabadora.