Referencia de las funciones

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Descubre formas de compartir flujos de usuarios, editarlos y sus pasos en esta referencia completa de funciones del panel Grabadora de Herramientas para desarrolladores de Chrome.

Para aprender los conceptos básicos para trabajar con el panel de Grabadora, consulta Cómo grabar, volver a reproducir y medir flujos de usuarios.

Aprende y personaliza las combinaciones de teclas

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

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

El botón Mostrar combinaciones de teclas

Sigue estos pasos para personalizar las combinaciones de teclas de la Grabadora:

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

Editar flujos de usuarios

El panel Grabadora de Herramientas para desarrolladores tiene un menú desplegable en el encabezado que te permite seleccionar el flujo de usuarios que deseas editar.

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

  1. Agregar una grabación nuevaAgrega. Haz clic en el ícono + para agregar una grabación nueva.
  2. Ver todas las grabacionesExpandir más. En el menú desplegable, se muestra la lista de las grabaciones guardadas. Selecciona la opción [número] grabación(es) para expandir y administrar la lista de grabaciones guardadas. Ver todas las grabaciones

  3. Exportar una grabaciónDescarga del archivo.. Para personalizar aún más la secuencia de comandos o compartirla para generar informes de errores, puedes exportar el flujo de usuarios en uno de los siguientes formatos:

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

  4. Importa una grabaciónSe subió el archivo.. Solo en formato JSON.

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

También puedes editar el nombre de la grabación haciendo clic en el botón de edición Editar. junto a la grabación.

Comparte flujos de usuarios

Puedes importar y exportar flujos de usuarios en la grabadora. Esto es útil para informar errores porque puedes compartir un registro exacto de los pasos que reproducen un error. También puedes exportarlo y volver a reproducirlo con bibliotecas externas.

Cómo exportar un flujo de usuarios

Para exportar un flujo de usuarios:

  1. Abre el flujo de usuarios que deseas exportar.
  2. Haz clic en Descarga del archivo. Exportar en la parte superior del panel Grabadora. Opciones de formato de Exportación.
  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 un guion de Puppeteer Replay.
    • Puppeteer. Descarga la grabación como un guion de Puppeteer.
    • Puppeteer (incluido el análisis de Lighthouse). Descarga la grabación como un guion de Puppeteer con un análisis incorporado de Lighthouse.
    • Una o más opciones proporcionadas por 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, luego, importa el archivo JSON de nuevo a la Grabadora.
  • @puppeteer/replay. Vuelve a reproducir la secuencia de comandos con la biblioteca de Puppeteer Replay. Cuando exportas como una secuencia de comandos @puppeteer/replay, los pasos siguen siendo un objeto JSON. Esta opción es perfecta si deseas realizar una integración con tu canalización de CI/CD, pero tienes la flexibilidad de editar los pasos en formato JSON, luego convertirlos y, luego, importarlos de nuevo a la Grabadora.
  • Guion de Puppeteer Vuelve a reproducir la secuencia de comandos con Puppeteer. Dado 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 puedes volver a importar esta secuencia de comandos a la Grabadora.

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

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

    # npm i puppeteer lighthouse
node your_export.js

    El informe de Lighthouse abierto en Chrome.

Instala una extensión para exportar en un formato personalizado

Consulta Extensiones de la grabadora.

Cómo importar un flujo de usuarios

Para importar un flujo de usuarios, haz lo siguiente:

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

Volver a reproducir con bibliotecas externas

Puppeteer Replay es una biblioteca de código abierto mantenida por el equipo de Herramientas para desarrolladores de Chrome. Se basa en Puppeteer. Es una herramienta de línea de comandos con la que puedes volver a reproducir archivos JSON.

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

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

Vuelve a reproducir los flujos de usuarios de JSON:

Cómo depurar flujos de usuarios

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

Para ayudarte a realizar la depuración, el panel Recorder te permite ralentizar las repeticiones, establecer puntos de interrupción, revisar código en varios formatos en paralelo con pasos.

Reduce la velocidad de reproducción

De forma predeterminada, la Grabadora vuelve a reproducir el flujo del usuario 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.Volver a reproducir.
  2. Elige una de las opciones de velocidad de repetición:
    • Normal (predeterminada)
    • Lenta
    • Muy lento
    • Extremadamente lento

Reproducción lenta.

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. El botón Mostrar código
  3. En la Grabadora, se muestra una vista en paralelo de los pasos y su código. Vista en paralelo de los pasos y su código.
  4. Cuando coloques el cursor sobre un paso, la Grabadora destacará su código respectivo en cualquier formato, incluidos los que proporcionan las extensiones.

  5. Expande la lista desplegable de formatos a fin de seleccionar el formato que uses para exportar flujos de usuarios.

    La lista desplegable de formatos.

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

  6. Edita los parámetros y los valores de los pasos para depurar tu registro. La vista de código no se puede editar, pero se actualiza según corresponda 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 Paso. junto a cada paso de una grabación. El círculo se convierte en un ícono de punto de interrupción Punto de interrupción.
  2. Haz clic en el ícono de punto de interrupción Punto de interrupción y vuelve a reproducir la grabación. Las ejecuciones se detienen en el punto de interrupción. Se detuvo la ejecución.
  3. Para avanzar por la ejecución, haz clic en el botón Ejecuta un paso. Ejecutar un paso en la barra de acciones ubicada en la parte superior del panel Grabadora.
  4. Para detener la repetición, haz clic en Haz una pausa. Cancelar repetición.

Editar pasos

Puedes editar cualquier paso de la grabación haciendo clic en el botón Expandir. 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 debas agregar los pasos de forma manual. Por ejemplo, la Grabadora no captura los eventos hover automáticamente, ya que eso 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 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. Inicia una grabación para capturar un evento de desplazamiento.
  2. Coloca el cursor sobre el elemento en el viewport. Aparece un menú de acciones. Desplázate sobre el elemento.
  3. Elige una acción del menú y finaliza la grabación. La Grabadora captura solo el evento de clic. Hacer clic en una acción y finalizar la grabación
  4. Para volver a reproducir la grabación, haz clic en Volver a reproducir. Volver a reproducir. La reproducción falla luego de un tiempo de espera porque la Grabadora no puede acceder al elemento en el menú. No se pudo volver a reproducir el contenido.
  5. Haz clic en el botón de tres puntos Botón de tres puntos. junto al paso Clic (Click) y selecciona Agregar paso anterior (Add step before). Se está agregando un paso antes de hacer clic.
  6. Expande el nuevo paso. De forma predeterminada, tiene el tipo waitForElement. Haz clic en el valor junto a type y selecciona hover. Seleccionando el cursor.
  7. A continuación, establece un selector apropiado para el nuevo paso. Haz clic en Selecciona Seleccionar y, luego, en un área del elemento Hover over me! que está fuera del menú emergente. El selector se establece en #clickable. Configuración del selector.
  8. Intenta volver a reproducir la grabación. Con el paso adicional de colocar el cursor sobre un elemento, la Grabadora vuelve a reproducir el flujo de forma correcta. Se volvió a reproducir correctamente.

Cómo agregar aserciones

Durante la grabación, puedes confirmar, 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.

    El botón Agregar aserción.

    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 y el valor del atributo 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 los pasos. Por ejemplo, visible: true

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

  6. Haz clic en Volver a reproducir. 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 Menú de tres puntos junto a él.
  2. En el menú desplegable, selecciona una de las opciones Copiar como ....

Seleccionar una opción de copia en el menú desplegable.

Puedes copiar los pasos en varios formatos: JSON, Puppeteer, @puppeteer/replay y los que proporcionan las extensiones.

Quitar pasos

Para quitar un paso que se registró accidentalmente, haz clic con el botón derecho en el paso correspondiente o haz clic en el ícono de tres puntos Menú de tres puntos que aparece a su lado y selecciona Quitar paso.

Quita un paso.

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

Una grabación con el viewport y los pasos de navegación establecidos.

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

Para automatizar los 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, sigue estos pasos:

  1. Especifica el 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.

    Configura un paso.

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

Para obtener una lista de las propiedades disponibles, consulta Propiedades de los pasos.

Para quitar una propiedad opcional, haz clic en el botón Quitar. Quitar que se encuentra a su lado.

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

Propiedades del paso

Cada paso puede tener las siguientes propiedades opcionales:

Estas son otras propiedades comunes disponibles para la mayoría de los tipos de pasos:

  • 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 una cantidad de milisegundos que se debe esperar antes de ejecutar un paso. Para obtener más información, consulta Ajusta los tiempos de espera de 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		 Listo. Relativo a 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 | avanzar
change value Listo. Valor final
keyDown
keyUp		 key Listo. Nombre de la clave
scroll x
y		 Posiciones x e y de desplazamiento absoluto en píxeles, valor predeterminado 0
navigate url Listo. URL del destino
waitForElement operator >= | == (predeterminado) | &lt;=
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 es type: navigation, pero puedes especificar el título y la URL
waitForElement
waitForExpression		 timeout Tiempo máximo de espera en milisegundos
waitForExpression expression Listo. Expresión de JavaScript que se resuelve como verdadera
setViewport width
height		 Listo. Ancho y altura del viewport en píxeles
setViewport deviceScaleFactor Listo. Similar a la proporción de píxeles del dispositivo (DPR), predeterminado 1.
setViewport isMobile
hasTouch
isLandscape		 Listo. 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 reproducción se detenga:

    • La propiedad waitForElement hace que el paso espere la presencia (o ausencia) de una serie de elementos identificados por un selector. Por ejemplo, el siguiente paso 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 pausa 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))",

    Ajustar los tiempos de espera de los pasos

    Si tu página tiene solicitudes de red lentas o animaciones largas, la repetición puede fallar en pasos que superen el tiempo de espera predeterminado de 5000 milisegundos.

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

    Para ajustar el tiempo de espera predeterminado de cada paso a la vez, haz lo siguiente:

    1. Haz clic en Configuración de repetición para poder editar la casilla Tiempo de espera.

      Configuración de repetición.

    2. En el cuadro Tiempo de espera, configura el valor en milisegundos.

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

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

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

      Agregar tiempo de espera.

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

      Establece el valor del tiempo de espera.

    3. Haz clic en Volver a reproducir.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 BorrarBorrar. que está junto a él.

    Comprende los selectores

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

    Configurando una nueva grabación.

    • 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 que se registrarán, elige los tipos de selectores que se detectarán automáticamente:

      • Casilla de verificación CSS Selectores sintácticos
      • Casilla de verificación: ARIA Selectores semánticos.
      • Casilla de verificación Texto Selectores con el texto único más corto, si están disponibles.
      • Casilla de verificación XPath Selectores que usan lenguaje de ruta XML.
      • Casilla de verificación Pierce. Selectores similares a los de CSS, pero que pueden perforar el shadow DOM.

    Selectores de prueba comunes

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

    • Es posible que tus páginas web usen IDs o clases dinámicos que cambian.
    • Los selectores pueden fallar debido a cambios en el código o el framework.

    Por ejemplo, los valores class de CSS podrían generarse automáticamente para aplicaciones desarrolladas con frameworks modernos de JavaScript (por ejemplo, React, Angular, Vue) y frameworks de CSS.

    Clases de CSS generadas automáticamente con nombres aleatorios.

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

    Si tienes los siguientes selectores de prueba comunes definidos en tu sitio web, la Grabadora los detecta automáticamente y los usa primero:

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

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

    Se definieron selectores de prueba.

    Graba un clic en "Cappuccino", expande el paso correspondiente en la grabación y verifica los selectores detectados:

    Se detectó el selector de prueba común.

    Personaliza el selector de grabación

    Puedes personalizar el selector de una grabación si los selectores de prueba comunes no funcionan en tu caso.

    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 selector.

    Personaliza el selector de grabación.

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

    El resultado de la selección del selector personalizado.

    Prioridad del selector

    La Grabadora busca selectores en el siguiente orden, según si especificaste un atributo selector CSS personalizado:

    • Si se especifica:
      1. Selector de CSS con tu atributo CSS personalizado.
      2. selectores de XPath.
      3. Selector de ARIA si lo encuentra.
      4. Un selector con el texto único más corto si se encuentra
    • Si no se especifica:
      1. Selector de ARIA si lo encuentra.
      2. Selectores CSS con la siguiente prioridad:
        1. Estos son 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 regulares
      3. selectores de XPath.
      4. Perforar los selectores.
      5. Un selector con el texto único más corto si se encuentra

    Puede haber varios selectores regulares de CSS, XPath y Pierce. La Grabadora captura lo siguiente:

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