Converter eventos da sessão em teste E2E

Saiba como transformar suas gravações de sessão do OpenReplay em código de teste E2E automatizado para Cypress, Playwright e Puppeteer

Converter eventos da sessão em teste E2E

O recurso Converter eventos da sessão em teste E2E permite transformar sessões de usuários gravadas em código de teste end-to-end automatizado. Essa capacidade poderosa aproxima o comportamento real dos usuários da automação de testes, permitindo replicar rapidamente jornadas de usuários no framework de testes de sua preferência.

Como funciona: converta sessões em código de teste E2E

Section titled Como funciona: converta sessões em código de teste E2E
  1. Acesse a visualização Sessions no dashboard
  2. Selecione qualquer sessão gravada para abrir a visualização Session Replay
  3. Clique na aba Activity para ver a linha do tempo de eventos
  4. Procure o ícone Copy Events ao lado da barra de busca
  5. Clique no ícone para abrir o menu suspenso com as opções de exportação
Converter eventos da sessão em teste E2E

Usando Converter eventos da sessão em teste E2E

Section titled Usando Converter eventos da sessão em teste E2E
  1. Clique no ícone Copy Events na visualização Activity
  2. No menu suspenso, selecione o framework de testes desejado (Cypress, Playwright ou Puppeteer)
  3. Escolha entre Events Only ou Complete Test
  4. Use “Select events on the timeline” para selecionar quais eventos incluir
  5. Clique em Copy para copiar o código gerado para a área de transferência
  6. Cole diretamente no seu arquivo de teste

O recurso permite exportar para três frameworks de teste populares:

  • Cypress - Framework de testes web focado na experiência do desenvolvedor e na confiabilidade
  • Playwright - Biblioteca de testes moderna com suporte a vários navegadores
  • Puppeteer - Biblioteca de automação de navegador headless
Frameworks de teste

Você pode escolher entre dois tipos de exportação:

  • Events Only - Gera apenas os comandos de ação, sem nenhuma estrutura de teste
  • Complete Test - Cria um teste totalmente estruturado, com o código boilerplate apropriado

A ferramenta de seleção na linha do tempo permite:

  • Selecionar um intervalo específico de eventos para incluir na exportação
  • Arrastar as alças para ajustar os pontos inicial e final

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()
  })
})

Se você tiver algum problema ao criar testes E2E a partir das suas sessões, entre em contato conosco na nossa comunidade do Slack e fale diretamente com nossos desenvolvedores!