Convertir eventos de sesión en pruebas E2E

Aprende cómo transformar tus grabaciones de sesión de OpenReplay en código de pruebas E2E automatizadas para Cypress, Playwright y Puppeteer

Convertir eventos de sesión en pruebas E2E

La función Convertir eventos de sesión en pruebas E2E te permite transformar las sesiones de usuario grabadas en código de pruebas de extremo a extremo automatizadas. Esta potente capacidad cierra la brecha entre el comportamiento real del usuario y la automatización de pruebas, lo que te permite replicar rápidamente los recorridos de los usuarios en el framework de pruebas que elijas.

Cómo funciona: convertir sesiones en código de pruebas E2E

Section titled Cómo funciona: convertir sesiones en código de pruebas E2E
  1. Ve a la vista Sessions en el panel de control
  2. Selecciona cualquier sesión grabada para abrir la vista Session Replay
  3. Haz clic en la pestaña Activity para ver la línea de tiempo de eventos
  4. Busca el icono Copy Events junto a la barra de búsqueda
  5. Haz clic en el icono para abrir el menú desplegable de opciones de exportación
Convertir eventos de sesión en pruebas E2E

Uso de Convertir eventos de sesión en pruebas E2E

Section titled Uso de Convertir eventos de sesión en pruebas E2E
  1. Haz clic en el icono Copy Events en la vista Activity
  2. En el menú desplegable, selecciona el framework de pruebas que desees (Cypress, Playwright o Puppeteer)
  3. Elige entre Events Only o Complete Test
  4. Aplica “Select events on the timeline” para seleccionar qué eventos incluir
  5. Haz clic en Copy para copiar el código generado a tu portapapeles
  6. Pégalo directamente en tu archivo de pruebas

La función admite la exportación a tres frameworks de pruebas populares:

  • Cypress - Framework de pruebas web centrado en la experiencia del desarrollador y la fiabilidad
  • Playwright - Biblioteca de pruebas moderna con soporte multinavegador
  • Puppeteer - Biblioteca de automatización de navegador headless
Frameworks de pruebas

Puedes elegir entre dos tipos de exportación:

  • Events Only - Genera únicamente los comandos de acción sin ninguna estructura de prueba
  • Complete Test - Crea una prueba totalmente estructurada con el código base adecuado

La herramienta de selección en la línea de tiempo te permite:

  • Seleccionar un rango específico de eventos para incluir en tu exportación
  • Arrastrar los controladores para ajustar los puntos de inicio y fin

Events Only:

cy.visit('/en/deployment/')
cy.get('a:nth-of-type(9)').click()
cy.visit('/en/deployment/deploy-docker/')
cy.get('.active li:nth-of-type(13) > a').click()
cy.visit('/en/deployment/upgrade/')
cy.get('.active > .justify-between').click()
cy.get('.left-nav-parent > li:nth-of-type(4) > .flex').click()
cy.get('.active li:nth-of-type(5) > a').click()
cy.visit('/en/using-or/next/')
cy.get('.left-nav-parent > li:nth-of-type(5) > .flex').click()
cy.get('.left-nav-parent > li:nth-of-type(6) > .flex').click()
cy.visit('/en/installation/')
cy.get('.active li:nth-of-type(2) > a').click()
cy.visit('/en/installation/identify-user/')
cy.get('li:nth-of-type(7) > .flex').click()
cy.get('.logo-clickarea').click()

Complete Test:

// cypress/e2e/session_replay_test.cy.js

describe('Deployment - OpenReplay Documentation', () => {
  it('Navigates through /en/deployment/', () => {
    cy.visit('/en/deployment/')
    cy.get('a:nth-of-type(9)').click()
    cy.visit('/en/deployment/deploy-docker/')
    cy.get('.active li:nth-of-type(13) > a').click()
    cy.visit('/en/deployment/upgrade/')
    cy.get('.active > .justify-between').click()
    cy.get('.left-nav-parent > li:nth-of-type(4) > .flex').click()
    cy.get('.active li:nth-of-type(5) > a').click()
    cy.visit('/en/using-or/next/')
    cy.get('.left-nav-parent > li:nth-of-type(5) > .flex').click()
    cy.get('.left-nav-parent > li:nth-of-type(6) > .flex').click()
    cy.visit('/en/installation/')
    cy.get('.active li:nth-of-type(2) > a').click()
    cy.visit('/en/installation/identify-user/')
    cy.get('li:nth-of-type(7) > .flex').click()
    cy.get('.logo-clickarea').click()
  })
})

Si tienes algún problema al crear pruebas E2E a partir de tus sesiones, contáctanos en nuestra comunidad de Slack y pregunta directamente a nuestros desarrolladores.