Referencia de las funciones

Sofia Emelianova

Jecelyn Yeen

Descubre formas de compartir flujos de usuarios, editarlos y sus pasos en esta referencia integral de funciones del panel Grabadora de Chrome DevTools.

Para conocer los aspectos básicos del trabajo con el panel de la Grabadora, consulta Cómo grabar, volver a reproducir y medir los flujos de usuarios.

Aprende y personaliza combinaciones de teclas

Usa las combinaciones de teclas para navegar más rápido por la Grabadora. Para ver la lista de combinaciones de teclas predeterminadas, consulta Combinaciones de teclas del panel de la grabadora.

Para abrir una sugerencia que enumera todas las combinaciones de teclas directamente en la Grabadora, haz clic en Mostrar combinaciones de teclas en la esquina superior derecha.

Para personalizar las combinaciones de teclas de la Grabadora, haz lo siguiente:

1. Abre Configuración > Accesos directos.
2. Desplázate hacia abajo hasta la sección Grabadora.
3. Sigue los pasos que se indican en Cómo personalizar las combinaciones de teclas.

Cómo editar flujos de usuarios

En la parte superior del panel de la Grabadora, puedes hacer lo siguiente:

1. Agregar una grabación nueva. Haz clic en el ícono + para agregar una grabación nueva.
2. Ver todas las grabaciones. El menú desplegable muestra la lista de grabaciones guardadas. Selecciona la opción [número] grabaciones para expandir y administrar la lista de grabaciones guardadas.

3. Exportar una grabación. Para personalizar aún más la secuencia de comandos o compartirla con el objetivo de informar errores, puedes exportar el flujo de usuarios en uno de los siguientes formatos:

   • Archivo JSON.
   • @puppeteer/replay.
   • [Puppeteer](/docs/puppeteer/ script.
   • Puppeteer (incluido el análisis de Lighthouse)

   Para obtener más información sobre los formatos, consulta Exporta un flujo de usuarios.

4. Importa una grabación. Solo en formato JSON.

5. Borra una grabación. Borra la grabación seleccionada.

También puedes editar el nombre de la grabación si haces clic en el botón de edición junto a ella.

Cómo compartir flujos de usuarios

Puedes importar y exportar flujos de usuarios en la Grabadora. Esto es útil para informar errores, ya que puedes compartir un registro exacto de los pasos para reproducir un error. También puedes exportarlo y reproducirlo con bibliotecas externas.

Cómo exportar un flujo de usuarios

Para exportar un flujo de usuarios, haz lo siguiente:

1. Abre el flujo de usuarios que deseas exportar.
2. Haz clic en Exportar en la parte superior del panel Grabadora.
3. Selecciona uno de los siguientes formatos de la lista desplegable:
   • Archivo JSON. Descarga la grabación como un archivo JSON.
   • @puppeteer/replay. Descarga la grabación como una secuencia de comandos de Puppeteer Replay.
   • Puppeteer. Descarga la grabación como una secuencia de comandos de Puppeteer.
   • Puppeteer (incluido el análisis de Lighthouse). Descarga la grabación como una secuencia de comandos de Puppeteer con un análisis incorporado de Lighthouse.
   • Corresponde a una o más opciones que proporcionan las extensiones de exportación de la Grabadora.
4. Guarda el archivo.

Puedes hacer lo siguiente con cada opción de exportación predeterminada:

• JSON. Edita el objeto JSON legible y vuelve a import el archivo JSON a la Grabadora.
• @puppeteer/replay. Vuelve a reproducir la secuencia de comandos con la biblioteca Puppeteer Replay. Cuando exportas como una secuencia de comandos @puppeteer/replay, los pasos siguen siendo un objeto JSON. Esta opción es perfecta si quieres integrar tu canalización de CI/CD, pero aún tienes la flexibilidad de editar los pasos en formato JSON y, luego, convertirlos y, luego, importarlos a la Grabadora.
• Secuencia de comandos de Puppeteer. Vuelve a reproducir la secuencia de comandos con Puppeteer. Debido a que los pasos se convierten en JavaScript, puedes tener una personalización más detallada, por ejemplo, repetir los pasos en bucle. Ten en cuenta que no podrás volver a importar esta secuencia de comandos a la Grabadora.

• Puppeteer (incluido el análisis de Lighthouse). Esta opción de exportación es igual a la anterior, pero incluye el código que genera un análisis de Lighthouse.

  Ejecuta la secuencia de comandos y verifica el resultado en un archivo flow.report.html:

  # npm i puppeteer lighthouse
  node your_export.js
  

  

Instala una extensión para exportar en un formato personalizado

Consulta Extensiones de la grabadora.

Importa un flujo de usuarios

Para importar un flujo de usuarios, haz lo siguiente:

1. Haz clic en el botón Import en la parte superior del panel Recorder.
2. Selecciona el archivo JSON con el flujo de usuarios registrado.
3. Haz clic en el botón Volver a reproducir para ejecutar el flujo de usuarios importado.

Cómo volver a reproducir contenido con bibliotecas externas

Puppeteer Replay es una biblioteca de código abierto que mantiene el equipo de Herramientas para desarrolladores de Chrome. Está compilado sobre Puppeteer. Es una herramienta de línea de comandos con la que puedes volver a reproducir archivos JSON.

Además, puedes transformar y reproducir archivos JSON con las siguientes bibliotecas de terceros.

Transforma los flujos de usuarios JSON en secuencias de comandos personalizadas:

• Grabadora de Chrome Cypress. Puedes usarlo para convertir archivos JSON de flujo de usuarios en secuencias de comandos de prueba de Cypress. Mira esta demostración para ver cómo funciona.
• Grabadora de Chrome para el reloj nocturno. Puedes usarlo para convertir archivos JSON de flujo de usuarios en secuencias de comandos de prueba de Nightwatch.
• Grabadora de Chrome CodeceptJS. Puedes usarlo para convertir archivos JSON de flujo de usuarios en secuencias de comandos de prueba de CodeceptJS.

Repite los flujos de usuarios JSON:

• Vuelve a reproducir contenido con Testcafe. Puedes usar TestCafe para reproducir archivos JSON de flujo de usuarios y generar informes de prueba para estas grabaciones.
• Vuelve a jugar con Sauce Labs. Puedes volver a reproducir los archivos JSON en Sauce Labs con saucectl.

Punto clave: Caso de uso avanzado: Integración con la biblioteca de Puppeteer Replay Al igual que en las bibliotecas de terceros anteriores, también puedes compilar tu propia biblioteca en la reproducción de Puppeteer. La biblioteca de Replay de Puppeteer te ofrece formas de personalizar la ejecución de una grabación y “encadenar” los archivos JSON de flujo de usuarios, es decir, convertirlos en otro elemento.

Cómo depurar flujos de usuarios

Como cualquier código, a veces debes depurar los flujos de usuarios registrados.

Para ayudarte a depurar el código, el panel de la Grabadora te permite ralentizar las repeticiones, establecer interrupciones, inspeccionar código en varios formatos y, en paralelo, seguir pasos por la ejecución.

Ralentiza la reproducción

De forma predeterminada, la grabadora vuelve a reproducir el flujo de usuarios lo más rápido posible. Para comprender lo que sucede en la grabación, puedes disminuir la velocidad de reproducción. Para ello, haz lo siguiente:

1. Abre el menú desplegable Volver a reproducir.
2. Elige una de las opciones de velocidad de reproducción:
   • Normal (predeterminado)
   • Suscriptor
   • Muy lento
   • Extremadamente lenta

Punto clave: Puedes usar estas opciones de repetición lenta solo en la Grabadora. Si quieres agregar tiempos de espera a la grabación, consulta Cómo ajustar los tiempos de espera para ver los pasos.

Cómo inspeccionar el código

Para inspeccionar el código de un flujo de usuarios en varios formatos, haz lo siguiente:

1. Abre una grabación en el panel Grabadora.
2. Haz clic en Mostrar código en la esquina superior derecha de la lista de pasos.
3. La Grabadora muestra una vista en paralelo de los pasos y su código.
4. Cuando colocas el cursor sobre un paso, la Grabadora destaca su código respectivo en cualquier formato, incluidos los que proporcionan las extensiones.

5. Expande la lista desplegable de formatos y selecciona un formato que uses para exportar flujos de usuarios.

   

   Puede tener uno de los tres formatos predeterminados (JSON, @puppeteer/replay, secuencia de comandos de Puppeteer o un formato proporcionado por una extensión).

6. Para continuar con la depuración de la grabación, edita los parámetros y valores de los pasos. La vista de código no se puede editar, pero se actualiza en consecuencia a medida que realizas cambios en los pasos de la izquierda.

Establece puntos de interrupción y ejecútalo paso a paso

Para establecer un punto de interrupción y ejecutarlo paso a paso, haz lo siguiente:

1. Coloca el cursor sobre el círculo junto a cualquier paso de una grabación. El círculo se convierte en un ícono de punto de interrupción .
2. Haz clic en el ícono del punto de interrupción y vuelve a reproducir la grabación. Las ejecuciones se pausan en el punto de interrupción.
3. Para ver la ejecución, haz clic en el botón Ejecutar un paso en la barra de acciones ubicada en la parte superior del panel Grabadora.
4. Para detener la reproducción, haz clic en Cancelar repetición.

Editar pasos

Para editar cualquier paso de la grabación, haz clic en el botón que se encuentra junto a él, tanto durante la grabación como después.

También puedes agregar los pasos que faltan y quitar los que se registraron accidentalmente.

Agregar pasos

A veces, es posible que deba agregar pasos manualmente. Por ejemplo, la Grabadora no captura los eventos hover automáticamente porque esto contamina la grabación y no todos esos eventos son útiles. Sin embargo, los elementos de la IU, como los menús desplegables, solo pueden aparecer en hover. Puedes agregar de forma manual pasos de hover a los flujos de usuarios que dependen de esos elementos.

Para agregar un paso de forma manual, sigue estos pasos:

1. Abre esta página de demostración y comienza una nueva grabación.
2. Coloca el cursor sobre el elemento en el viewport. Aparecerá un menú de acciones.
3. Elige una acción del menú y finaliza la grabación. La grabadora solo captura el evento de clic.
4. Para volver a reproducir la grabación, haz clic en Volver a reproducir. La repetición falla después del tiempo de espera porque la grabadora no puede acceder al elemento en el menú.
5. Haz clic en el botón de tres puntos junto al paso Hacer clic (Click) y selecciona Agregar paso antes (Add step before).
6. Expande el paso nuevo. De forma predeterminada, tiene el tipo waitForElement. Haz clic en el valor junto a type y selecciona hover.
7. A continuación, establece un selector adecuado para el paso nuevo. Haz clic en Seleccionar y, luego, en un área del elemento Hover over me! que esté fuera del menú emergente. El selector está configurado en #clickable.
8. Intenta volver a reproducir la grabación. Con el paso de colocar el cursor sobre un elemento, la grabadora vuelve a reproducir el flujo de forma correcta.

Cómo agregar aserciones

Durante el registro, puedes afirmar, por ejemplo, atributos HTML y propiedades de JavaScript. Para agregar una aserción, haz lo siguiente:

1. Inicia una grabación, por ejemplo, en esta página de demostración.

2. Haz clic en Add assertion.

   

   La grabadora crea un paso waitForElement configurable.

3. Especifica selectores para este paso.

4. Configura el paso, pero no cambies su tipo de waitForElement. Por ejemplo, puedes especificar lo siguiente:

   • Atributo HTML. Haz clic en Agregar atributos y escribe el nombre del atributo y el valor que usan los elementos de esta página. Por ejemplo, data-test: <value>.
   • Propiedad de JavaScript Haz clic en Agregar propiedades y escribe el nombre y el valor de la propiedad en formato JSON. Por ejemplo, {".innerText":"<text>"}.
   • Otras propiedades de pasos. Por ejemplo, visible: true

5. Continúa con la grabación del resto del flujo de usuarios y, luego, detén la grabación.

6. Haz clic en Volver a reproducir. Si una aserción falla, la Grabadora muestra un error después de un tiempo de espera.

Mira el siguiente video para ver este flujo de trabajo en acción.

Copiar pasos

En lugar de exportar todo el flujo de usuarios, puedes copiar un solo paso en el portapapeles:

1. Haz clic con el botón derecho en el paso que deseas copiar o haz clic en el ícono de tres puntos junto a él.
2. En el menú desplegable, selecciona una de las opciones de Copiar como ....

Puedes copiar los pasos en varios formatos: JSON, Puppeteer, @puppeteer/replay y los proporcionados por extensiones.

Quitar pasos

Para quitar un paso registrado accidentalmente, haz clic con el botón derecho en el paso o en el ícono de tres puntos junto a él, y selecciona Quitar paso.

Además, la Grabadora agrega automáticamente dos pasos separados al inicio de cada grabación:

• Establece el viewport. Te permite controlar las dimensiones, el escalamiento y otras propiedades del viewport.
• Navegar Establece la URL y actualiza la página automáticamente para cada repetición.

Para realizar la automatización de anuncios in-page sin volver a cargar la página, quita el paso de navegación como se describió anteriormente.

Configurar pasos

Para configurar un paso, haz lo siguiente:

1. Especifica su tipo: click, doubleClick, hover, (entrada) change, keyUp, keyDown, scroll, close, navigate (a una página), waitForElement, waitForExpression o setViewport.

   Otras propiedades dependen del valor type.

2. Especifica las propiedades obligatorias debajo de type.

   

3. Haz clic en los botones correspondientes para agregar propiedades opcionales específicas del tipo y especificarlas.

Si deseas obtener una lista de las propiedades disponibles, consulta Propiedades del paso.

Para quitar una propiedad opcional, haz clic en el botón Quitar junto a ella.

Para agregar un elemento a una propiedad de array o quitarlo de ella, haz clic en los botones + o - que se encuentran junto al elemento.

Propiedades de pasos

Cada paso puede tener las siguientes propiedades opcionales:

• target: Es una URL para el destino del protocolo de Herramientas para desarrolladores de Chrome (CDP). La palabra clave main predeterminada hace referencia a la página actual.
• assertedEvents que, por el momento, solo puede ser un único evento de navigation

Otras propiedades comunes disponibles para la mayoría de los tipos de pasos son las siguientes:

• frame: Es un array de índices basados en cero que identifican un iframe que se puede anidar. Por ejemplo, puedes identificar el primer (0) iframe dentro de un segundo (1) iframe del destino principal como [1, 0].
• timeout: Es la cantidad de milisegundos que se debe esperar antes de ejecutar un paso. Para obtener más información, consulta Ajusta los tiempos de espera para los pasos.
• selectors: Es un array de selectores. Para obtener más información, consulta Información sobre los selectores.

Las propiedades específicas del tipo son las siguientes:

Tipo	Propiedad	Obligatorio	Descripción
click doubleClick	offsetX offsetY		En relación con la parte superior izquierda del cuadro de contenido del elemento, en píxeles
click doubleClick	button		Botón del puntero: principal | auxiliar | segundo | atrás | adelante
change	value		Valor final
keyDown keyUp	key		Nombre de la clave
scroll	x y		Desplazamiento absoluto en las posiciones x e y en píxeles; el valor predeterminado es 0
navigate	url		URL del destino
waitForElement	operator		>= | == (predeterminado) | <=
waitForElement	count		Cantidad de elementos identificados por un selector
waitForElement	attributes		Atributo HTML y su valor
waitForElement	properties		Propiedad de JavaScript y su valor en JSON
waitForElement	visible		Booleano. Es verdadero si el elemento está en el DOM y es visible (no tiene display: none ni visibility: hidden).
waitForElement waitForExpression	asserted events		Actualmente, solo type: navigation, pero puedes especificar el título y la URL
waitForElement waitForExpression	timeout		Tiempo máximo de espera en milisegundos
waitForExpression	expression		Expresión de JavaScript que se resuelve como verdadero
setViewport	width height		Ancho y altura del viewport en píxeles
setViewport	deviceScaleFactor		Similar a la proporción de píxeles del dispositivo (DPR), el valor predeterminado es 1.
setViewport	isMobile hasTouch isLandscape		Marcas booleanas que especifican lo siguiente: Ten en cuenta la metaetiqueta Compatibilidad con eventos táctiles Mostrar en modo horizontal

Hay dos propiedades que hacen que la repetición se detenga:

• La propiedad waitForElement hace que el paso espere la presencia (o ausencia) de varios elementos identificados por un selector. Por ejemplo, el paso siguiente espera a que haya menos de tres elementos en la página que coincidan con el selector .my-class.

    "type": "waitForElement",
    "selectors": [".my-class"],
    "operator": "<=",
    "count": 2,
  

• La propiedad waitForExpression hace que el paso espere a que una expresión de JavaScript se resuelva como verdadera. Por ejemplo, el siguiente paso se detiene durante dos segundos y, luego, se resuelve como verdadero, lo que permite que la repetición continúe.

    "type": "waitForExpression",
    "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
  

Ajusta los tiempos de espera de los pasos

En caso de que tu página tenga solicitudes de red lentas o animaciones largas, la reproducción puede fallar en pasos que excedan el tiempo de espera predeterminado de 5000 milésimas de segundo.

Para evitar este problema, puedes ajustar el tiempo de espera predeterminado para cada paso a la vez o configurar tiempos de espera separados para pasos específicos. Los tiempos de espera en pasos específicos reemplazan al valor predeterminado.

Para ajustar el tiempo de espera predeterminado para cada paso a la vez, sigue estos pasos:

1. Haz clic en Configuración de reproducción para que el cuadro Tiempo de espera se pueda editar.

   

2. En el cuadro Tiempo de espera, establece el valor del tiempo de espera en milisegundos.

3. Haz clic en Volver a reproducir para ver el tiempo de espera predeterminado ajustado en acción.

Para reemplazar el tiempo de espera predeterminado de un paso específico, sigue estos pasos:

1. Expande el paso y haz clic en Agregar tiempo de espera.

   

2. Haz clic en timeout: <value> y establece el valor en milisegundos.

   

3. Haz clic en Volver a reproducir para ver el paso con el tiempo de espera en acción.

Para quitar un reemplazo de tiempo de espera en un paso, haz clic en el botón Borrar que se encuentra junto a él.

Información sobre los selectores

Cuando inicias una grabación nueva, puedes configurar lo siguiente:

• En el cuadro de texto Atributo del selector, ingresa un atributo de prueba personalizado. La Grabadora usará este atributo para detectar selectores en lugar de una lista de atributos de prueba comunes.

• En el conjunto de casillas de verificación Tipos de selectores para registrar, elige los tipos de selectores que detectarán automáticamente:

  • CSS. Selectores sintácticos.
  • ARIA. Selectores semánticos.
  • Texto. Selectores con el texto único más corto si está disponible
  • XPath. Selectores que usan XML Path Language.
  • Pierce. Selectores similares a los de CSS, pero que pueden atravesar shadow DOM

Nota: Para obtener más información, consulta Selectores sintácticos frente a selectores semánticos y Prioridad del selector.

Selectores de prueba comunes

En el caso de páginas web simples, los atributos id y los atributos class de CSS son suficientes para que la Grabadora detecte los selectores. Sin embargo, podría no ser siempre el caso por los siguientes motivos:

• Tus páginas web pueden usar clases dinámicas o ID que cambian.
• Los selectores pueden fallar debido a cambios en el código o el framework.

Por ejemplo, los valores class de CSS se pueden generar automáticamente para aplicaciones desarrolladas con frameworks modernos de JavaScript (por ejemplo, React, Angular, Vue) y frameworks de CSS.

En estos casos, puedes usar los atributos data-* para crear pruebas más resilientes. Ya hay algunos selectores data-* comunes que los desarrolladores usan para la automatización. La grabadora también las admite.

Si defines los siguientes selectores de prueba comunes en tu sitio web, la Grabadora los detecta y usa primero de manera automática:

• data-testid
• data-test
• data-qa
• data-cy
• data-test-id
• data-qa-id
• data-testing

Por ejemplo, inspecciona el elemento "Cappuccino" en esta página de demostración y consulta los atributos de prueba:

Graba un clic en “Cappuccino”, expande el paso correspondiente de la grabación y revisa los selectores detectados:

Cómo personalizar el selector de la grabación

Si los selectores de prueba comunes no funcionan en tu caso, puedes personalizar el selector de una grabación.

Por ejemplo, en esta página de demostración, se usa el atributo data-automate como selector. Inicia una nueva grabación y, luego, ingresa data-automate como el atributo del selector.

Completa una dirección de correo electrónico y observa el valor del selector ([data-automate=email-address]).

Prioridad del selector

La grabadora busca selectores en el siguiente orden, dependiendo de si especificaste un atributo selector CSS personalizado:

• Si se especifica:
  1. Selector de CSS con el atributo CSS personalizado.
  2. Selectores XPath.
  3. Selector ARIA si se encuentra.
  4. Un selector con el texto único más corto si se encuentra
• Si no se especifica:
  1. Selector ARIA si se encuentra.
  2. Selectores CSS con la siguiente prioridad:
     1. Los atributos más comunes que se usan para las pruebas:
        • data-testid
        • data-test
        • data-qa
        • data-cy
        • data-test-id
        • data-qa-id
        • data-testing
     2. Atributos de ID, por ejemplo, <div id="some_ID">.
     3. Selectores CSS normales.
  3. Selectores XPath.
  4. Selectores Pierce.
  5. Un selector con el texto único más corto si se encuentra

Puede haber múltiples selectores CSS, XPath y Pierce normales. La Grabadora captura lo siguiente:

• Selectores CSS y XPath normales en cada nivel de raíz, es decir, hosts paralelos anidados, si los hay
• Selectores de Pierce que son únicos entre todos los elementos dentro de todas las shadow roots.