Documentation de référence sur les fonctionnalités

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Découvrez comment partager, modifier et suivre les parcours utilisateur dans cette référence complète des fonctionnalités du panneau Enregistreur des outils pour les développeurs Chrome.

Pour découvrir les principes de base de l'utilisation du panneau Enregistreur, consultez Enregistrer, revoir et évaluer les parcours utilisateur.

Découvrir et personnaliser les raccourcis

Utilisez des raccourcis pour naviguer plus rapidement dans l'Enregistreur. Pour obtenir la liste des raccourcis par défaut, consultez Raccourcis clavier du panneau Enregistreur.

Pour ouvrir une astuce qui liste tous les raccourcis directement dans l'Enregistreur, cliquez sur Afficher les raccourcis en haut à droite.

Bouton "Afficher les raccourcis".

Pour personnaliser les raccourcis de l'Enregistreur:

  1. Ouvrez Paramètres. Paramètres > Raccourcis.
  2. Faites défiler la page jusqu'à la section Enregistreur.
  3. Suivez la procédure décrite dans Personnaliser les raccourcis.

Modifier des parcours utilisateur

Dans les outils de développement, le haut du panneau "Enregistreur" contient un menu déroulant qui vous permet de sélectionner le parcours utilisateur à modifier.

Le menu déroulant en haut du panneau Enregistreur vous offre plusieurs options:

  1. Ajouter un enregistrementAjouter Cliquez sur l'icône + pour ajouter un enregistrement.
  2. Afficher tous les enregistrementsDéveloppez.. Le menu déroulant affiche la liste des enregistrements sauvegardés. Sélectionnez l'option N enregistrement(s) pour développer et gérer cette liste. Afficher tous les enregistrements

  3. Exporter un enregistrementTéléchargement de fichier. Pour personnaliser davantage le script ou le partager à des fins de signalement de bugs, vous pouvez exporter le parcours utilisateur dans l'un des formats suivants:

    Pour en savoir plus sur les formats, consultez Exporter un parcours utilisateur.

  4. Importer un enregistrementImporter un fichier. au format JSON uniquement.

  5. Supprimer un enregistrementSupprimer. Supprimez l'enregistrement sélectionné.

Vous pouvez également modifier le nom d'un enregistrement en cliquant sur le bouton de modification Modifier. à côté du nom concerné.

Partager des parcours utilisateur

Vous pouvez exporter et importer des parcours utilisateur dans l'Enregistreur. Cela est utile pour signaler un bug, car vous pouvez partager un enregistrement exact des étapes permettant de le reproduire. Vous pouvez également l'exporter et le lire avec des bibliothèques externes.

Exporter un parcours utilisateur

Pour exporter un parcours utilisateur:

  1. Ouvrez le parcours utilisateur que vous souhaitez exporter.

  2. Cliquez sur Exporter en haut du panneau Enregistreur.

    Liste des options de format dans le menu "Exporter".

  3. Sélectionnez l'un des formats suivants dans la liste déroulante:

    • Fichier JSON. Téléchargez l'enregistrement au format JSON.
    • @puppeteer/replay. Téléchargez l'enregistrement sous la forme d'un script Puppeteer Replay.
    • Puppeteer Téléchargez l'enregistrement sous la forme d'un script Puppeteer.
    • Puppeteer (pour Firefox) Téléchargez l'enregistrement sous la forme d'un script Puppeteer pour Firefox.
    • Puppeteer (y compris l'analyse Lighthouse) Téléchargez l'enregistrement sous la forme d'un script Puppeteer avec une analyse Lighthouse intégrée.
    • Une ou plusieurs options fournies par les extensions d'exportation de l'Enregistreur.

  4. Enregistrez le fichier.

Vous pouvez effectuer les opérations suivantes avec chaque option d'exportation par défaut:

  • JSON. Modifiez l'objet JSON lisible par l'humain, puis import à nouveau le fichier JSON dans l'enregistreur.
  • @puppeteer/replay. Réexécutez le script avec la bibliothèque Puppeteer Replay. Lors de l'exportation en tant que script @puppeteer/replay, les étapes restent un objet JSON. Cette option est parfaite si vous souhaitez intégrer votre pipeline CI/CD, tout en ayant la possibilité de modifier les étapes au format JSON, puis de les convertir et de les réimporter dans l'Enregistreur.
  • Script Puppeteer Réexécutez le script avec Puppeteer. Étant donné que les étapes sont converties en JavaScript, vous pouvez personnaliser plus précisément les étapes, par exemple en les faisant boucler. Attention : vous ne pouvez pas réimporter ce script dans l'Enregistreur.
  • Puppeteer (pour Firefox) Grâce à la compatibilité avec WebDriver BiDi, vous pouvez exécuter ce script Puppeteer à la fois dans Chrome et Firefox.

  • Puppeteer (y compris l'analyse Lighthouse) Cette option d'exportation est identique à la précédente, mais elle inclut du code qui génère une analyse Lighthouse.

    Exécutez le script et examinez la sortie dans un fichier flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Le rapport Lighthouse s'ouvre dans Chrome.

Exporter au format personnalisé en installant une extension

Consultez la section Extensions de l'Enregistreur.

Importer un parcours utilisateur

Pour importer un parcours utilisateur:

  1. Cliquez sur le bouton ImporterImporter un fichier. en haut du panneau Enregistreur. Importez l'enregistrement.
  2. Sélectionnez le fichier JSON contenant le parcours utilisateur enregistré.
  3. Cliquez sur le bouton Revoir.Rejouer pour exécuter le parcours utilisateur importé.

Replay avec des bibliothèques externes

Puppeteer Replay est une bibliothèque Open Source gérée par l'équipe Chrome DevTools. Il repose sur Puppeteer. Il s'agit d'un outil de ligne de commande qui vous permet de lire des fichiers JSON.

En outre, vous pouvez transformer et lire des fichiers JSON avec les bibliothèques tierces suivantes.

Transformer les flux utilisateur JSON en scripts personnalisés:

Replay des parcours utilisateur JSON:

Déboguer les parcours utilisateur

Comme pour tout code, vous devez parfois déboguer les flux utilisateur enregistrés.

Pour vous aider à déboguer, le panneau Enregistreur vous permet de ralentir les rediffusions, de définir des points d'arrêt, d'exécuter des étapes et d'inspecter le code dans différents formats en parallèle des étapes.

Ralentir la nouvelle lecture

Par défaut, l'Enregistreur lit le parcours utilisateur aussi vite que possible. Pour comprendre ce qui se passe dans l'enregistrement, vous pouvez ralentir la vitesse de la lecture:

  1. Ouvrez le menu déroulant Revoir.Replay (Répétition).
  2. Choisissez l'une des options de vitesse de lecture :
    • Normale (par défaut)
    • Lente
    • Très lente
    • Extrêmement lente

Nouvelle lecture lente.

Inspecter le code

Pour inspecter le code d'un parcours utilisateur dans différents formats:

  1. Ouvrez un enregistrement dans le panneau Enregistreur.
  2. Cliquez sur Afficher le code en haut à droite de la liste des étapes. Bouton "Afficher le code".
  3. L'enregistreur affiche les étapes et leur code côte à côte. Vue côte à côte des étapes et de leur code.
  4. Lorsque vous pointez sur une étape, l'enregistreur met en surbrillance son code respectif dans n'importe quel format, y compris ceux fournis par les extensions.

  5. Développez la liste déroulante des formats pour sélectionner celui que vous utilisez pour exporter les parcours utilisateur.

    Liste déroulante des formats.

    Il peut s'agir de l'un des trois formats par défaut (JSON, @puppeteer/replay, script Puppeteer ou format fourni par une extension).

  6. Pour déboguer votre enregistrement, modifiez les paramètres et les valeurs des étapes. La vue Code n'est pas modifiable, mais elle se met à jour en conséquence lorsque vous modifiez les étapes à gauche.

Définir des points d'arrêt et exécuter le code par étapes

Pour définir un point d'arrêt et exécuter le code étape par étape:

  1. Pointez sur le cercle Étape. à côté d'une étape d'un enregistrement. Le cercle se transforme en icône de point d'arrêt Point d'arrêt..
  2. Cliquez sur l'icône de point d'arrêt Point d'arrêt., puis rejouez l'enregistrement. L'exécution est suspendue au point d'arrêt. Mise en pause de l'exécution.
  3. Pour suivre l'exécution, cliquez sur le bouton Exécutez une étape. Exécuter une étape dans la barre d'action en haut du panneau Enregistreur.
  4. Pour arrêter la lecture, cliquez sur Fais une pause. Ne pas relire.

Modifier les étapes

Vous pouvez modifier n'importe quelle étape de l'enregistrement en cliquant sur le bouton Développez. à côté de celle-ci, pendant ou après l'enregistrement.

Vous pouvez également ajouter des étapes manquantes et supprimer celles enregistrées par accident.

Ajouter des étapes

Il se peut que vous deviez parfois ajouter des étapes manuellement. Par exemple, l'Enregistreur ne capture pas automatiquement les événements hover, car cela pollue l'enregistrement et tous ces événements ne sont pas utiles. Toutefois, les éléments d'interface utilisateur tels que les menus déroulants ne peuvent apparaître que sur hover. Vous pouvez ajouter manuellement des étapes hover aux parcours utilisateur qui dépendent de ces éléments.

Pour ajouter manuellement une étape:

  1. Ouvrez cette page de démonstration et commencez un nouvel enregistrement. Démarrez un enregistrement pour enregistrer un événement de survol.
  2. Pointez sur l'élément dans la fenêtre d'affichage. Un menu d'actions s'affiche. Pointez sur l'élément.
  3. Sélectionnez une action dans le menu, puis arrêtez l'enregistrement. L'enregistreur ne capture que l'événement de clic. En cliquant sur une action et en mettant fin à l'enregistrement.
  4. Essayez de relancer l'enregistrement en cliquant sur Revoir. Rejouer. La lecture échoue après un délai avant expiration, car l'enregistreur ne peut pas accéder à l'élément dans le menu. Échec de la lecture.
  5. Cliquez sur le bouton à trois points Bouton à trois points. à côté de l'étape Cliquer, puis sélectionnez Ajouter une étape avant. Ajout d'une étape avant "Cliquer".
  6. Développez la nouvelle étape. Par défaut, il a le type waitForElement. Cliquez sur la valeur à côté de type, puis sélectionnez hover. Sélectionner le survol.
  7. Définissez ensuite un sélecteur approprié pour la nouvelle étape. Cliquez sur Sélectionner Sélectionner, puis sur une zone de l'élément Hover over me! située en dehors du menu contextuel. Le sélecteur est défini sur #clickable. Définir le sélecteur.
  8. Essayez de lire l'enregistrement à nouveau. Avec l'étape de survol ajoutée, l'enregistreur lit correctement le flux. Replay success.

Ajouter des assertions

Lors de l'enregistrement, vous pouvez affirmer, par exemple, des attributs HTML et des propriétés JavaScript. Pour ajouter une assertion:

  1. Démarrez un enregistrement, par exemple sur cette page de démonstration.

  2. Cliquez sur Add assertion (Ajouter une assertion).

    Bouton "Ajouter une assertion".

    L'enregistreur crée une étape waitForElement configurable.

  3. Spécifiez des sélecteurs pour cette étape.

  4. Configurez l'étape, mais ne modifiez pas son type waitForElement. Par exemple, vous pouvez spécifier:

    • Attribut HTML Cliquez sur Ajouter des attributs, puis saisissez le nom et la valeur de l'attribut utilisé par les éléments de cette page. Par exemple, data-test: <value>.
    • Propriété JavaScript Cliquez sur Ajouter des propriétés, puis saisissez le nom et la valeur de la propriété au format JSON. Par exemple, {".innerText":"<text>"}.
    • Autres propriétés de l'étape Exemple :visible: true

  5. Enregistrez le reste du parcours utilisateur, puis arrêtez l'enregistrement.

  6. Cliquez sur Revoir. Replay (Répétition). Si une assertion échoue, l'enregistreur affiche une erreur après un dépassement du délai.

Regardez la vidéo suivante pour voir ce workflow en action.

Copier les étapes

Au lieu d'exporter l'intégralité du parcours utilisateur, vous pouvez copier une seule étape dans le presse-papiers:

  1. Effectuez un clic droit sur l'étape que vous souhaitez copier ou cliquez sur l'icône à trois points Menu à trois points. à côté d'elle.
  2. Dans le menu déroulant, sélectionnez l'une des options Copier en tant que.

Sélection d&#39;une option de copie dans le menu déroulant.

Vous pouvez copier des étapes dans différents formats: JSON, Puppeteer, @puppeteer/replay et ceux fournis par les extensions.

Supprimer des étapes

Pour supprimer une étape enregistrée par erreur, effectuez un clic droit dessus ou cliquez sur l'icône à trois points Menu à trois points. à côté d'elle, puis sélectionnez Supprimer l'étape.

Supprimez une étape.

De plus, l'Enregistreur ajoute automatiquement deux étapes distinctes au début de chaque enregistrement:

Enregistrement avec le viewport défini et les étapes de navigation.

  • Définir la fenêtre d'affichage Permet de contrôler les dimensions, le scaling et d'autres propriétés de la fenêtre d'affichage.
  • Parcourir Définit l'URL et actualise automatiquement la page à chaque relecture.

Pour effectuer une automatisation sur la page sans recharger la page, supprimez l'étape de navigation comme décrit ci-dessus.

Procédure de configuration

Pour configurer une étape:

  1. Spécifiez son type: click, doubleClick, hover, (entrée) change, keyUp, keyDown, scroll, close, navigate (vers une page), waitForElement, waitForExpression ou setViewport.

    Les autres propriétés dépendent de la valeur type.

  2. Spécifiez les propriétés requises sous type.

    Configurez une étape.

  3. Cliquez sur les boutons correspondants pour ajouter des propriétés facultatives spécifiques au type et les spécifier.

Pour obtenir la liste des propriétés disponibles, consultez la section Propriétés de l'étape.

Pour supprimer une propriété facultative, cliquez sur le bouton Supprimer. Supprimer à côté d'elle.

Pour ajouter ou supprimer un élément d'une propriété de tableau, cliquez sur les boutons + ou - à côté de l'élément.

Propriétés de l'étape

Chaque étape peut comporter les propriétés facultatives suivantes:

  • target : URL de la cible du protocole CDP (Chrome DevTools Protocol). Le mot clé main par défaut fait référence à la page actuelle.
  • assertedEvents qui ne peut être qu'un seul événement navigation.

Voici d'autres propriétés courantes disponibles pour la plupart des types d'étapes:

  • frame : tableau d'indices basés sur zéro qui identifient une iFrame pouvant être imbriquée. Par exemple, vous pouvez identifier la première (0) iFrame dans une deuxième (1) iFrame de la cible principale comme [1, 0].
  • timeout : nombre de millisecondes à attendre avant d'exécuter une étape. Pour en savoir plus, consultez Ajuster les délais avant expiration des étapes.
  • selectors : tableau de sélecteurs. Pour en savoir plus, consultez la page Comprendre les sélecteurs.

Les propriétés spécifiques au type sont les suivantes:

Type Propriété Requis Description
click
doubleClick		 offsetX
offsetY		 Oui. Par rapport à l'angle supérieur gauche de la zone de contenu de l'élément, en pixels
click
doubleClick		 button Bouton du pointeur: principal | auxiliaire | secondaire | arrière | avant
change value Oui. Valeur finale
keyDown
keyUp		 key Oui. Nom de la clé
scroll x
y		 Positions X et Y de défilement absolues en pixels, par défaut 0
navigate url Oui. URL cible
waitForElement operator >= (par défaut) | == | <=
waitForElement count Nombre d'éléments identifiés par un sélecteur
waitForElement attributes Attribut HTML et sa valeur
waitForElement properties Propriété JavaScript et sa valeur au format JSON
waitForElement visible Valeur booléenne. "True" si l'élément se trouve dans le DOM et est visible (il ne comporte pas display: none ou visibility: hidden)
waitForElement
waitForExpression		 asserted events Pour le moment, uniquement type: navigation, mais vous pouvez spécifier le titre et l'URL
waitForElement
waitForExpression		 timeout Durée d'attente maximale en millisecondes
waitForExpression expression Oui. Expression JavaScript qui résout à "true"
setViewport width
height		 Oui. Largeur et hauteur de la fenêtre d'affichage en pixels
setViewport deviceScaleFactor Oui. Semblable au rapport de pixels de l'appareil (DPR), par défaut 1
setViewport isMobile
hasTouch
isLandscape		 Oui. Options booléennes qui indiquent si:
  • Prendre en compte la balise Meta
  • Prendre en charge les événements tactiles
  • Afficher en mode Paysage
    		•

    Deux propriétés permettent de mettre en pause la lecture:

    • La propriété waitForElement fait attendre l'étape la présence (ou l'absence) d'un certain nombre d'éléments identifiés par un sélecteur. Par exemple, l'étape suivante attend que moins de trois éléments correspondant au sélecteur .my-class soient présents sur la page.

        "type": "waitForElement",
  "selectors": [".my-class"],
  "operator": "<=",
  "count": 2,

    • La propriété waitForExpression fait en sorte que l'étape attende qu'une expression JavaScript renvoie la valeur "true". Par exemple, l'étape suivante est mise en pause pendant deux secondes, puis renvoie la valeur "true", ce qui permet à la lecture de continuer.

        "type": "waitForExpression",
  "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",

    Ajuster les délais avant expiration des étapes

    Si votre page comporte des requêtes réseau lentes ou des animations longues, la lecture peut échouer pour les étapes qui dépassent le délai par défaut de 5000 millisecondes.

    Pour éviter ce problème, vous pouvez ajuster le délai par défaut pour chaque étape en même temps ou définir des délais distincts pour des étapes spécifiques. Les délais d'inactivité pour des étapes spécifiques remplacent la valeur par défaut.

    Pour ajuster le délai avant expiration par défaut pour chaque étape à la fois:

    1. Cliquez sur Paramètres de la relecture pour rendre la zone Délai avant expiration modifiable.

      Paramètres de nouvelle lecture.

    2. Dans le champ Timeout (Délai avant expiration), définissez la valeur du délai avant expiration en millisecondes.

    3. Cliquez sur Revoir.Replay (Répéter) pour voir le délai avant expiration par défaut ajusté en action.

    Pour remplacer le délai avant expiration par défaut d'une étape spécifique:

    1. Développez l'étape, puis cliquez sur Ajouter un délai.

      Ajoutez un délai avant expiration.

    2. Cliquez sur timeout: <value>, puis définissez la valeur en millisecondes.

      Définissez la valeur du délai avant expiration.

    3. Cliquez sur Revoir.Replay (Répéter) pour voir l'étape avec le délai avant expiration en action.

    Pour supprimer un forçage de délai avant expiration sur une étape, cliquez sur le bouton SupprimerSupprimer. à côté de celle-ci.

    Comprendre les sélecteurs

    Lorsque vous démarrez un nouvel enregistrement, vous pouvez configurer les éléments suivants:

    Configuration d&#39;un nouvel enregistrement.

    • Dans la zone de texte Attribut du sélecteur, saisissez un attribut de test personnalisé. L'enregistreur utilisera cet attribut pour détecter les sélecteurs au lieu d'une liste d'attributs de test courants.

    • Dans l'ensemble de cases à cocher Types de sélecteurs à enregistrer, choisissez les types de sélecteurs à détecter automatiquement:

      • Case à cocher. CSS. Sélecteurs syntaxiques.
      • Case à cocher. ARIA. Sélecteurs sémantiques
      • Case à cocher. Texte. Sélecteurs avec le texte unique le plus court, le cas échéant.
      • Case à cocher. XPath. Sélecteurs qui utilisent le XML Path Language (Langage de chemin XML).
      • Case à cocher. Pierce. Sélecteurs semblables à ceux du CSS, mais qui peuvent percer le DOM en mode "shadow".

    Sélecteurs de test courants

    Pour les pages Web simples, les attributs id et les attributs CSS class suffisent pour que l'enregistreur détecte les sélecteurs. Toutefois, ce n'est pas toujours le cas:

    • Vos pages Web peuvent utiliser des classes ou des ID dynamiques qui changent.
    • Vos sélecteurs peuvent se briser en raison de modifications apportées au code ou au framework.

    Par exemple, les valeurs CSS class peuvent être générées automatiquement pour les applications développées avec des frameworks JavaScript modernes (React, Angular, Vue, par exemple) et des frameworks CSS.

    Classes CSS générées automatiquement avec des noms aléatoires.

    Dans ce cas, vous pouvez utiliser des attributs data-* pour créer des tests plus résilients. Les développeurs utilisent déjà certains sélecteurs data-* courants pour l'automatisation. L'Enregistreur les accepte également.

    Si vous avez défini les sélecteurs de test courants suivants sur votre site Web, l'enregistreur les détecte et les utilise automatiquement en premier:

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

    Par exemple, inspectez l'élément "Cappuccino" sur cette page de démonstration et consultez les attributs de test:

    Sélecteurs de test définis.

    Enregistrez un clic sur "Cappuccino", développez l'étape correspondante de l'enregistrement et vérifiez les sélecteurs détectés:

    Sélecteur de test courant détecté.

    Personnaliser le sélecteur de l'enregistrement

    Vous pouvez personnaliser le sélecteur d'un enregistrement si les sélecteurs de test courants ne vous conviennent pas.

    Par exemple, cette page de démonstration utilise l'attribut data-automate comme sélecteur. Démarrez un nouvel enregistrement et saisissez data-automate comme attribut de sélecteur.

    Personnalisez le sélecteur de l&#39;enregistrement.

    Saisissez une adresse e-mail et observez la valeur du sélecteur ([data-automate=email-address]).

    Résultat de la sélection du sélecteur personnalisé.

    Priorité du sélecteur

    L'enregistreur recherche les sélecteurs dans l'ordre suivant, selon que vous avez spécifié un attribut sélecteur CSS personnalisé:

    • Si spécifié :
      1. Sélecteur CSS avec votre attribut CSS personnalisé.
      2. Sélecteurs XPath
      3. Sélecteur ARIA, le cas échéant.
      4. Sélecteur avec le texte unique le plus court, le cas échéant.
    • Si aucune valeur n'est spécifiée :
      1. Sélecteur ARIA, le cas échéant.
      2. Sélecteurs CSS avec la priorité suivante :
        1. Voici les attributs les plus courants utilisés pour les tests :
          • data-testid
          • data-test
          • data-qa
          • data-cy
          • data-test-id
          • data-qa-id
          • data-testing
        2. Attributs d'ID, par exemple <div id="some_ID">.
        3. Sélecteurs CSS standards.
      3. Sélecteurs XPath
      4. Sélecteurs de perçage.
      5. Sélecteur avec le texte unique le plus court, le cas échéant.

    Il peut exister plusieurs sélecteurs CSS, XPath et Pierce standards. L'Enregistreur enregistre les éléments suivants:

    • Sélecteurs CSS et XPath standards à chaque niveau racine, c'est-à-dire hôtes fantômes imbriqués, le cas échéant.
    • Sélecteurs de perçage uniques parmi tous les éléments dans toutes les racines d'ombre.