Registro y reproducción de flujos de usuario y medición del rendimiento

Use la herramienta Grabadora para registrar una serie de pasos en la ventana o pestaña del explorador donde se abre DevTools y, a continuación, reproduzca los pasos automáticamente, mientras que, opcionalmente, también mide el rendimiento.

Cuándo usar la herramienta Grabadora

Use la herramienta Grabadora cuando desee acelerar las tareas repetitivas mediante la reproducción automática de una serie de interacciones del usuario en el explorador.

La herramienta Grabadora registra las interacciones del usuario, como clics del mouse, entrada de teclado y eventos de navegación de páginas, y le permite reproducir las interacciones automáticamente. También puede usar la herramienta Grabadora para medir el rendimiento en tiempo de ejecución mientras reproduce las interacciones del usuario grabadas. La herramienta Grabadora le permite grabar tantos flujos de usuario como desee y reproducirlos tantas veces como desee.

En el resto de este artículo, usaremos la herramienta Recorder para automatizar la adición de tareas a la aplicación TODO de demostración.

Abrir la herramienta Grabadora

1. Abra la aplicación TODO en una nueva pestaña o ventana.

2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

3. En DevTools, en la barra de actividad, seleccione la pestaña Grabadora . Si esa pestaña no está visible, haga clic en el botón Más herramientas () y, a continuación, seleccione Grabadora. Se abre la herramienta Grabadora :

   

Registro de un flujo de usuario

Para iniciar la grabación de un nuevo flujo de usuario:

1. Haga clic en Crear una nueva grabación.

2. En Nombre de grabación, escriba un nombre para la grabación, como "Agregar tareas TODO".

3. Haga clic en Iniciar grabación en la parte inferior de la herramienta Grabadora :

   

4. En la página web representada, interactúe con la página. Por ejemplo, escriba "tarea 1" en el cuadro Agregar una entrada de tarea y, a continuación, presione Entrar. Repita estos pasos varias veces.

   Aparece un círculo rojo junto al nombre de la grabación, que indica que la grabación está en curso. La herramienta Grabadora registra las interacciones y las muestra como una lista de pasos:

   

5. Para detener la grabación, en la parte inferior de la lista de interacciones grabadas, haga clic en el botón Finalizar grabación .

   La grabación se detiene y el círculo situado junto al nombre de la grabación se vuelve azul, lo que indica que la grabación está completa:

   

Registro de otros flujos de usuario

Para grabar un nuevo flujo de usuario, después de detener la grabación del flujo de usuario anterior:

1. Haga clic en el botón Crear una nueva grabación () en la esquina superior izquierda de la herramienta Grabadora :

   

2. Repita los pasos descritos anteriormente en Registro de un flujo de usuario.

Reproducción de un flujo de usuario

Puede reproducir flujos de usuario desde la lista de flujos de usuario registrados o al ver los detalles de un flujo de usuario determinado.

• Para ver la lista de flujos de usuario grabados, haga clic en el menú desplegable que se encuentra en la barra de herramientas de la herramienta Grabadora , en la parte superior y, a continuación, seleccione 2 grabaciones. La etiqueta puede mostrar un número diferente de grabaciones, en función del número de grabaciones que haya realizado.

• Para ver los detalles de un flujo de usuario determinado, haga clic en la lista desplegable que se encuentra en la barra de herramientas de la herramienta Grabadora , en la parte superior, y, a continuación, haga clic en el nombre de un flujo de usuario.

Reproducir un flujo de usuario de la lista de grabaciones

1. Haga clic en el botón Reproducir grabación situado junto a una grabación:

   

2. Espere mientras la herramienta Grabadora reproduce las interacciones del usuario grabadas anteriormente. En la herramienta Grabadora aparece una animación de los pasos que se están reproduciendo:

   

   Una vez completada la reproducción, la animación se detiene y la herramienta Grabadora muestra los pasos de la grabación.

Reproducción de un flujo de usuario desde una grabación

1. Haga clic en el botón Reproducir de la esquina superior derecha de la herramienta Grabadora :

   

2. Espere mientras la herramienta Grabadora reproduce las interacciones del usuario grabadas anteriormente. En la herramienta Grabadora aparece una animación de los pasos que se están reproduciendo:

   

   Una vez completada la reproducción, la animación se detiene y la herramienta Grabadora muestra los pasos de la grabación.

Reproducción lenta de un flujo de usuario para investigar problemas

Para ver lo que sucede en la página representada mientras se reproducen las interacciones del usuario, ralentice la velocidad de reproducción. De forma predeterminada, la herramienta Grabadora reproduce los flujos de usuario tan rápido como pueda.

Para ralentizar la velocidad de reproducción:

• Haga clic en la flecha desplegable situada junto a Reproducir en la esquina superior derecha de la herramienta Grabadora y, a continuación, seleccione una velocidad en el menú desplegable, como Lento, Muy lento o Extremadamente lento:

  

Pausar mientras se reproduce un flujo de usuario mediante puntos de interrupción

Para inspeccionar la página web representada en un punto específico del flujo de usuario, detenga la reproducción mediante un punto de interrupción.

Para agregar un punto de interrupción a un flujo de usuario:

1. Junto al paso de flujo en el que se va a pausar, haga clic en el botón Abrir acciones de paso () y, a continuación, seleccione Agregar punto de interrupción:

   

2. Para iniciar el flujo de usuario, haga clic en Reproducir en la esquina superior derecha de la herramienta Grabadora .

   La reproducción se pausa cuando alcanza el paso que tiene un punto de interrupción. Los botones Continuar y Ejecutar un paso también están disponibles en la barra de herramientas:

   

3. Haga clic en el botón Ejecutar un paso para ejecutar el paso siguiente y pausar de nuevo, o bien haga clic en el botón Continuar para continuar con la reproducción hasta que se alcance el siguiente punto de interrupción (o el final del flujo de usuario).

Medir el rendimiento

Para medir la rapidez con la que se ejecuta un sitio web al reproducir una serie de interacciones del usuario, use la herramienta Grabadora . Al grabar un flujo de usuario una vez, puede reproducir la grabación muchas veces, mientras trabaja para mejorar el rendimiento en tiempo de ejecución del sitio web.

1. Para registrar un nuevo flujo de usuario, siga los pasos de Registro de un flujo de usuario.

2. Para reproducir el flujo de usuario al medir el rendimiento, haga clic en el panel Rendimiento en la esquina superior derecha de la herramienta Grabadora :

   

3. Espere mientras la herramienta Grabadora reproduce las interacciones del usuario grabadas anteriormente.

   Se abre la herramienta Rendimiento y muestra una grabación del rendimiento del sitio web mientras se reproducían las interacciones del usuario:

   

Edición de los pasos de un flujo de usuario

Después de registrar un flujo de usuario, puede editar los pasos del flujo de usuario. Por ejemplo, puede agregar nuevos pasos, quitar los pasos existentes o editar los detalles de un paso.

Adición de un nuevo paso

Para agregar un nuevo paso a un flujo de usuario existente:

1. Haga clic en el botón Abrir acciones de paso (") situado junto al paso antes o después del cual desea agregar un nuevo paso y, a continuación, seleccione Agregar paso antes o Agregar paso después:

   

2. Siga las instrucciones de Editar un paso a continuación para editar los detalles del nuevo paso que agregó. El nuevo paso se denomina temporalmente Elemento Wait for.

Edición de un paso

Para editar los detalles de un paso existente:

1. Para abrir la sección de detalles del paso que desea editar, haga clic en el botón triángulo () situado junto al paso. Se abre la sección de detalles del paso:

   

2. Edite los detalles del paso, como el tipo de paso, los selectores del elemento DOM al que se aplica el paso o las propiedades del paso. Los distintos tipos de pasos y sus propiedades se enumeran en la sección siguiente. Los cambios se guardan automáticamente.

Cambiar el tipo de paso

Para cambiar el tipo de paso al editar los detalles de un paso:

1. Haga clic en el cuadro de entrada situado junto al tipo. Por ejemplo, si el paso que está editando tiene el tipo waitForElement, haga clic en el cuadro de entrada que contiene el valor waitForElement.

2. Elimine el contenido del cuadro de entrada y, a continuación, seleccione el nuevo tipo de paso que desea usar en el menú desplegable que aparece:

   

Puede usar los siguientes tipos de pasos al editar un paso en un flujo de usuario. Cada tipo de paso tiene una lista de propiedades que se aplican al paso.

Tipo de paso	Descripción	Propiedades
change	Cambie el valor de un campo de entrada de formulario.	selectores: formas de encontrar el elemento al que se aplica este paso. value: valor en el que se va a establecer el campo de entrada del formulario.
click	Haga clic en un elemento.	selectores: formas de encontrar el elemento al que se aplica este paso. offsetX/offsetY: a qué distancia de la esquina superior izquierda del elemento en el que se va a hacer clic.
close	Cierre la ventana del explorador.	Ninguna.
doubleClick	Haga doble clic en un elemento.	selectores: formas de encontrar el elemento al que se aplica este paso. offsetX/offsetY: a qué distancia de la esquina superior izquierda del elemento se hace doble clic.
emulateNetworkConditions	Emular diferentes condiciones de red.	Descargar/upload: velocidades de descarga y carga, en bytes por segundo. latencia: la latencia mínima de una solicitud que se envía a la respuesta que se recibe, en milisegundos.
hover	Emular el puntero que mantiene el puntero sobre un elemento.	selectores: formas de encontrar el elemento al que se aplica este paso.
keyDown	Presione una tecla hacia abajo.	selectores: formas de encontrar el elemento al que se aplica este paso. tecla: tecla que se va a presionar.
keyUp	Suelte una tecla presionada.	selectores: formas de encontrar el elemento al que se aplica este paso. key: qué clave se va a liberar.
navigate	Vaya a otra página web.	url: dirección URL de la página a la que se va a navegar.
scroll	Desplácese hasta una posición en la página web.	X/y: coordenadas horizontales y verticales opcionales de la posición a la que se va a desplazar en la página.
setViewport	Cambie el tamaño de la ventanilla, la proporción de píxeles del dispositivo y las capacidades.	Ancho/height: tamaño de la ventanilla. deviceScaleFactor: la proporción de píxeles del dispositivo. isMobile: indica si la ventanilla es una ventanilla de dispositivo móvil. hasTouch: indica si la ventanilla admite eventos táctiles. isLandscape: indica si la ventanilla está en una orientación horizontal.
waitForElement	Espere a que un elemento o varios elementos estén presentes en la página web.	selectores: formas de encontrar el elemento al que se aplica este paso.
waitForExpression	Espere hasta que una expresión de JavaScript se evalúe como true.	expresión: expresión de JavaScript que se va a evaluar.

Edición de los selectores de un paso

Muchos tipos de pasos tienen una propiedad selectores , que especifica el elemento DOM al que se aplica el paso. Por ejemplo, un click paso tiene una propiedad selectores para definir qué elemento de la página se hace clic cuando se ejecuta ese paso del flujo de usuario.

La propiedad selectores es una lista de uno o varios selectores. Cada selector de la lista puede ser una manera diferente de encontrar el elemento en la página. La herramienta Grabadora intenta cada selector de la lista, en orden, hasta que encuentra un elemento en la página que coincida con el selector.

Un selector puede ser cualquiera de los siguientes tipos:

• Selector CSS, como #my-element-with-id o .my-class.
• Selector XPath, con xpath/el prefijo , como xpath//html/body/form/div/label.
• Contenido de texto del elemento, con text/el prefijo , como text/Add a task.

Puede editar los selectores de un paso mediante cualquiera de los siguientes enfoques:

• Selección de un elemento en la página web representada.

• Agregue, quite o modifique manualmente un selector.

• Para editar los selectores seleccionando un elemento en la página web representada, haga clic en Seleccionar un elemento de la página para actualizar los selectores y, a continuación, haga clic en el elemento de la página web representada que desea seleccionar. La herramienta Grabadora actualiza la lista de selectores para que coincidan con el elemento seleccionado:

  

• Puede agregar, quitar o modificar manualmente un selector:

  • Para agregar o quitar un selector, en Selectores, mantenga el puntero sobre un selector y, a continuación, haga clic en Agregar un selector o quitar un selector:

    

  • Para modificar el valor de un selector, en Selectores, haga clic en el cuadro de entrada que contiene el valor del selector y, a continuación, escriba el nuevo valor para el selector:

    

Eliminación de un paso

Para eliminar un paso de un flujo de usuario existente:

1. Haga clic en el botón Abrir acciones de paso () situado junto al paso que desea eliminar y, a continuación, seleccione Quitar paso:

   

Eliminación de un flujo de usuario

Para eliminar un flujo de usuario grabado anteriormente, al ver la lista de grabaciones, haga clic en Eliminar grabación () junto a la grabación que desea eliminar:

Exportación e importación de flujos de usuario como archivos

Para compartir un flujo de usuario con otras personas, exporte el flujo de usuario registrado como un archivo JSON. Por ejemplo, el uso compartido de un flujo de usuario puede ayudar a otras personas a reproducir un error mediante la ejecución del mismo conjunto de pasos que usted.

Exportación de un flujo de usuario como un archivo

Para compartir un flujo de usuario con otra persona, exporte el flujo de usuario como un archivo JSON:

1. Al ver los pasos de un flujo de usuario, haga clic en el botón Exportar () de la barra de herramientas de la herramienta Grabadora y, a continuación, seleccione JSON:

   

2. Seleccione una ubicación en la que guardar el archivo. El archivo se guarda con el nombre del flujo de usuario y la extensión .json.

Importación de un flujo de usuario desde un archivo

Para importar un flujo de usuario desde un archivo JSON:

1. En la barra de herramientas de la herramienta Grabadora , haga clic en el botón Importar grabación ():

   

2. En el cuadro de diálogo del selector de archivos que se abre, seleccione un archivo JSON de flujo de usuario y, a continuación, haga clic en el botón Abrir . El flujo de usuario se importa y aparece en la lista de grabaciones de la herramienta Grabadora .

Exportación de un flujo de usuario para la automatización de pruebas

Para generar un script de prueba y ejecutarlo automáticamente con un marco de automatización de pruebas, exporte un flujo de usuario como un .js archivo de script de prueba, como se indica a continuación:

1. Al ver los pasos de un flujo de usuario, en la barra de herramientas de la herramienta Grabadora , haga clic en el botón Exportar () y, a continuación, seleccione un formato de exportación:

   

   Formato de exportación	Marco de automatización de pruebas
   @puppeteer/replay	Exporta el flujo de usuario como un script de prueba para la biblioteca de reproducción . Vea el repositorio de reproducción o titiritero .
   Puppeteer	Exporta el flujo de usuario como un script de prueba para el marco de automatización de pruebas de Puppeteer. Vea Puppeteer.
   Puppeteer (incluido el análisis de Lighthouse)	Exporta el flujo de usuario como un script de prueba para el marco de automatización de pruebas de Puppeteer e incluye un análisis de Lighthouse del rendimiento del sitio web.

   Se abre el cuadro de diálogo Guardar como .

2. Seleccione una ubicación en la que guardar el archivo. El archivo se guarda con el nombre del flujo de usuario y la extensión .js.