Convertir les événements de session en test E2E

Découvrez comment transformer vos enregistrements de session OpenReplay en code de test E2E automatisé pour Cypress, Playwright et Puppeteer

Convertir les événements de session en test E2E

La fonctionnalité Convertir les événements de session en test E2E vous permet de transformer les sessions utilisateur enregistrées en code de test de bout en bout automatisé. Cette puissante capacité comble le fossé entre le comportement réel des utilisateurs et l’automatisation des tests, vous permettant de reproduire rapidement les parcours utilisateur dans le framework de test de votre choix.

Comment ça fonctionne : convertir les sessions en code de test E2E

Section titled Comment ça fonctionne : convertir les sessions en code de test E2E
  1. Accédez à la vue Sessions dans le tableau de bord
  2. Sélectionnez n’importe quelle session enregistrée pour ouvrir la vue Session Replay
  3. Cliquez sur l’onglet Activity pour afficher la chronologie des événements
  4. Repérez l’icône Copy Events à côté de la barre de recherche
  5. Cliquez sur l’icône pour ouvrir le menu déroulant des options d’exportation
Convertir les événements de session en test E2E

Utilisation de Convertir les événements de session en test E2E

Section titled Utilisation de Convertir les événements de session en test E2E
  1. Cliquez sur l’icône Copy Events dans la vue Activity
  2. Dans le menu déroulant, sélectionnez le framework de test souhaité (Cypress, Playwright ou Puppeteer)
  3. Choisissez entre Events Only ou Complete Test
  4. Appliquez « Select events on the timeline » pour sélectionner les événements à inclure
  5. Cliquez sur Copy pour copier le code généré dans votre presse-papiers
  6. Collez-le directement dans votre fichier de test

La fonctionnalité prend en charge l’exportation vers trois frameworks de test populaires :

  • Cypress - Framework de test web axé sur l’expérience développeur et la fiabilité
  • Playwright - Bibliothèque de test moderne avec prise en charge multi-navigateurs
  • Puppeteer - Bibliothèque d’automatisation de navigateur headless
Frameworks de test

Vous pouvez choisir entre deux types d’exportation :

  • Events Only - Génère uniquement les commandes d’action sans aucune structure de test
  • Complete Test - Crée un test entièrement structuré avec le code standard approprié

L’outil de sélection sur la chronologie vous permet de :

  • Sélectionner une plage spécifique d’événements à inclure dans votre exportation
  • Faire glisser les poignées pour ajuster les points de début et de 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 vous rencontrez des problèmes pour créer des tests E2E à partir de vos sessions, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !