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 de funciones completa del panel Recorder de las Herramientas para desarrolladores de Chrome.

Para aprender los conceptos básicos para trabajar con el panel de Grabadora, consulta Graba, vuelve a reproducir y mide los flujos de usuarios.

Aprende a usar y personalizar los accesos directos

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

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

El botón Mostrar combinaciones de teclas.

Para personalizar los accesos directos de la Grabadora, haz lo siguiente:

  1. Abre Configuración. 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 los accesos directos.

Cómo editar flujos de usuarios

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

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, puedes ver la lista de las grabaciones guardadas. Selecciona la opción N grabaciones para expandir y administrar la lista de grabaciones guardadas. Ver todas las grabaciones

  3. Exportar una grabaciónDescarga de archivos. Para personalizar aún más la secuencia de comandos o compartirla con el fin de 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 Cómo exportar un flujo de usuarios.

  4. Importa una grabaciónCarga de archivos. Solo en formato JSON.

  5. Borrar 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 ella.

Cómo compartir flujos de usuarios

Puedes exportar e importar flujos de usuarios en la grabadora. Esto es útil para los informes de errores, ya que 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, sigue estos pasos:

  1. Abre el flujo de usuarios que deseas exportar.

  2. Haz clic en Exportar en la parte superior del panel Grabadora.

    Una lista de opciones de formato en el menú Exportar.

  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 (para Firefox). Descarga la grabación como una secuencia de comandos de Puppeteer para Firefox.
    • Puppeteer (incluido el análisis de Lighthouse) Descarga la grabación como una secuencia de comandos de Puppeteer con un análisis de Lighthouse incorporado.
    • 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 por humanos y import el archivo JSON al Registrador.
  • @puppeteer/replay. Vuelve a reproducir la secuencia de comandos con la biblioteca Puppeteer Replay. Cuando se exporta como una secuencia de comandos de @puppeteer/replay, los pasos siguen siendo un objeto JSON. Esta opción es perfecta si deseas realizar la integración con tu canalización de CI/CD, pero aún tienes la flexibilidad de editar los pasos como JSON y, luego, convertirlos e importarlos nuevamente al Registrador.
  • Secuencia de comandos de Puppeteer. Vuelve a reproducir la secuencia de comandos con Puppeteer. Como los pasos se convierten en JavaScript, puedes tener una personalización más detallada, por ejemplo, hacer un bucle de los pasos. Sin embargo, no puedes volver a importar esta secuencia de comandos en el Grabador.
  • Puppeteer (para Firefox). Como parte de la compatibilidad con WebDriver BiDi, puedes ejecutar esta secuencia de comandos de Puppeteer en Chrome y Firefox.

  • 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 revisa el resultado en un archivo flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Se abrió el informe de Lighthouse 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, sigue estos pasos:

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

Cómo volver a reproducir con bibliotecas externas

Puppeteer Replay es una biblioteca de código abierto que mantiene 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, 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:

  • Cypress Chrome Recorder. Puedes usarlo para convertir archivos JSON de flujo de usuarios en secuencias de comandos de prueba de Cypress. Mira esta demostración para verla en acción.
  • Nightwatch Chrome Recorder. Puedes usarlo para convertir archivos JSON de flujo de usuarios en secuencias de comandos de prueba de Nightwatch.
  • CodeceptJS Chrome Recorder. Puedes usarlo para convertir archivos JSON de flujo de usuarios en secuencias de comandos de prueba de CodeceptJS.

Vuelve a reproducir flujos de usuarios JSON:

Cómo depurar flujos de usuarios

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

Para ayudarte a depurar, el panel Grabadora te permite ralentizar las repeticiones, establecer puntos de interrupción, recorrer la ejecución y, además, inspeccionar el código en varios formatos en paralelo con los pasos.

Disminuye la velocidad de la repetición

De forma predeterminada, la Grabadora vuelve a reproducir el flujo de usuarios lo más rápido posible. Para comprender qué sucede en la grabación, puedes ralentizar la velocidad de repetición:

  1. Abre el menú desplegable Volver a reproducir.Repetir.
  2. Elige una de las siguientes opciones de velocidad de repetición:
    • Normal (predeterminada)
    • Lenta
    • Muy lento
    • Muy lenta

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. La grabadora muestra una vista en paralelo de los pasos y su código. La vista en paralelo de los pasos y su código
  4. Cuando colocas el cursor sobre un paso, el Registrador destaca su código respectivo en cualquier formato, incluidos los que proporcionan las extensiones.

  5. Expande la lista desplegable de formatos para seleccionar uno que uses para exportar flujos de usuarios.

    La lista desplegable de formato.

    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. Para depurar la grabación, edita los parámetros y valores de los pasos. 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útalos 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 cualquier 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. Pausa de la ejecución.
  3. Para seguir la ejecución, haz clic en el botón Ejecuta un paso. Ejecutar un paso en la barra de acciones que se encuentra en la parte superior del panel Grabadora.
  4. Para detener la repetición, haz clic en Haz una pausa. Cancelar repetición.

Cómo editar pasos

Para editar cualquier paso de la grabación, haz 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 grabaron por accidente.

Agrega pasos

En ocasiones, es posible que debas agregar pasos de forma manual. Por ejemplo, la grabadora no captura automáticamente los eventos hover porque contaminan la grabación y no todos son útiles. Sin embargo, los elementos de la IU, como los menús desplegables, solo pueden aparecer en hover. Puedes agregar manualmente hover pasos 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 del mouse.
  2. Coloca el cursor sobre el elemento en la ventana de visualización. Aparecerá un menú de acciones. Colocar el cursor sobre el elemento
  3. Elige una acción del menú y finaliza la grabación. La grabadora solo captura 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. Repetir. La repetición falla después de un tiempo de espera porque la grabadora no puede acceder al elemento del menú. No se pudo volver a reproducir.
  5. Haz clic en el botón de tres puntos Botón de tres puntos. junto al paso Click y selecciona Agregar paso antes. Agrega un paso antes de hacer clic.
  6. Expande el paso nuevo. De forma predeterminada, tiene el tipo waitForElement. Haz clic en el valor junto a type y selecciona hover. Selecciona el desplazamiento del mouse.
  7. A continuación, establece un selector adecuado para el paso nuevo. 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. Vuelve a reproducir la grabación. Con el paso de desplazamiento agregado, el registrador vuelve a reproducir el flujo correctamente. Se volvió a reproducir correctamente.

Cómo agregar aserciones

Durante la grabación, puedes confirmar, por ejemplo, los atributos HTML y las 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.

    El Registrador crea un paso waitForElement configurable.

  3. Especifica los 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 pasos Por ejemplo, visible: true

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

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

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

Cómo 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 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….

Selecciona una opción de copia del menú desplegable.

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

Cómo quitar pasos

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

Quita un paso.

Además, la grabadora agrega automáticamente dos pasos independientes al comienzo de cada grabación:

Una grabación con la vista de portabilidad y los pasos de navegación establecidos

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

Para realizar la automatización en la página sin volver a cargarla, quita el paso de navegación como se describió anteriormente.

Pasos de configuración

Para configurar un paso, sigue estos pasos:

  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 de type.

  2. Especifica las propiedades requeridas debajo de type.

    Configura un paso.

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

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

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

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

Propiedades del paso

Cada paso puede tener las siguientes propiedades opcionales:

  • target: Es una URL para el objetivo del protocolo de Chrome DevTools (CDP). La palabra clave main predeterminada hace referencia a la página actual.
  • assertedEvents que solo puede ser un solo evento 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 objetivo 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 Cómo ajustar los tiempos de espera de los pasos.
  • selectors: Es un array de selectores. Para obtener más información, consulta Cómo comprender los selectores.

Las propiedades específicas de los tipos son las siguientes:

Tipo Propiedad Obligatorio Descripción
click
doubleClick		 offsetX
offsetY		 Listo. En relación con la esquina superior izquierda del cuadro de contenido del elemento, en píxeles
click
doubleClick		 button Botón de puntero: principal | auxiliar | segundo | atrás | adelante
change value Listo. Valor final
keyDown
keyUp		 key Listo. Nombre de la clave
scroll x
y		 Posiciones de desplazamiento absoluto en X e Y en píxeles, el valor predeterminado es 0
navigate url Listo. URL objetivo
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 Es el tiempo máximo de espera en milisegundos.
waitForExpression expression Listo. Una 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 relación de píxeles del dispositivo (DPR), el valor predeterminado es 1.
setViewport isMobile
hasTouch
isLandscape		 Listo. Marcas booleanas que especifican si se debe hacer lo siguiente:
  • Ten en cuenta la metaetiqueta
  • Cómo admitir eventos táctiles
  • Cómo mostrar contenido en modo horizontal
    		•

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

    • La propiedad waitForElement hace que el paso espere la presencia (o ausencia) de una cantidad 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 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))",

    Cómo ajustar los tiempos de espera de los pasos

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

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

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

    1. Haz clic en Configuración de repetición para que el cuadro Tiempo de espera sea editable.

      Configuración de repetición.

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

    3. Haz clic en Volver a reproducir.Repetir 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.

      Agrega un tiempo de espera.

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

      Establece el valor de tiempo de espera.

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

    Para quitar una anulación de tiempo de espera en un paso, haz clic en el botón BorrarBorrar. junto a él.

    Comprende los selectores

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

    Configuración de una grabación nueva

    • En el cuadro de texto Selector attribute, ingresa un atributo de prueba personalizado. El registrador 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 grabar, 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á disponible
      • Casilla de verificación. XPath. Selectores que usan XML Path Language.
      • Casilla de verificación. Pierce. Son selectores similares a los de CSS, pero que pueden atravesar 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 el Registrador detecte los selectores. Sin embargo, esto no siempre es así por los siguientes motivos:

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

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

    Clases 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 definidos los siguientes selectores de prueba comunes en tu sitio web, la grabadora los detectará y usará automáticamente primero:

    • 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 observa los atributos de prueba:

    Selectores de prueba definidos

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

    Se detectó un selector de prueba común.

    Personaliza el selector de la grabación

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

    Por ejemplo, esta página de demostración 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 la grabación.

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

    Es el resultado de la selección del selector personalizado.

    Prioridad del selector

    El registrador busca selectores en el siguiente orden, según si especificaste un atributo selector de CSS personalizado:

    • Si se especifica, haz lo siguiente:
      1. Selector de CSS con tu 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, ocurrirá lo siguiente:
      1. Selector ARIA si se 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 normales.
      3. Selectores XPath.
      4. Selectores de perforación
      5. Un selector con el texto único más corto si se encuentra

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

    • Selectores CSS y XPath normales en todos los niveles raíz, es decir, hosts en sombra anidados, si los hay
    • Selectores de perforación que son únicos entre todos los elementos dentro de todas las raíces de sombra.