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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

Découvrez comment partager des parcours utilisateur, les modifier et les étapes à suivre dans cette documentation de référence complète sur les 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 afficher un indice 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

Le panneau "Enregistreur" des outils de développement comporte un menu déroulant dans l'en-tête qui vous permet de sélectionner un parcours utilisateur à modifier.

En haut du panneau Enregistreur, vous pouvez:

  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 la liste des enregistrements sauvegardés. Afficher tous les enregistrements

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

    Pour en savoir plus sur les formats, consultez Exporter un flux 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 flux utilisateur

Pour exporter un flux utilisateur:

  1. Ouvrez le flux 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 forme de script Puppeteer Replay.
    • Puppeteer Téléchargez l'enregistrement sous forme de 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 forme de 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.

Chaque option d'exportation par défaut vous permet d'effectuer les opérations suivantes:

  • JSON. Modifiez l'objet JSON lisible par l'humain et import le fichier JSON dans l'Enregistreur.
  • @puppeteer/replay. Rejouez 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) Pour la compatibilité de 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.Relecture pour exécuter le flux utilisateur importé.

Rejouer avec des bibliothèques externes

Puppeteer Replay est une bibliothèque Open Source gérée par l'équipe des outils pour les développeurs Chrome. Il est basé 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.

Transformez les flux utilisateur JSON en scripts personnalisés:

Relisez les flux utilisateur JSON:

Déboguer les parcours utilisateur

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

Pour faciliter le débogage, le panneau Enregistreur vous permet de ralentir les relectures, de définir des points d'arrêt, de suivre l'exécution et d'inspecter du code dans différents formats en parallèle.

Ralentir la relecture

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

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

Relecture 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 une vue côte à côte des étapes et de leur code. 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 étape par étape

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

  1. Pointez sur le cercle Étape. à côté de n'importe quelle étape dans 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. et relancez l'enregistrement. L'exécution est suspendue au point d'arrêt. Interruption de l'exécution.
  3. Pour lancer l'exécution, cliquez sur le bouton Exécutez une étape. Execute one step (Exécuter une étape) sur la barre d'action en haut du panneau Recorder (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. situé à côté, pendant et après l'enregistrement.

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

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 en dépendent.

Pour ajouter une étape manuellement:

  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 relecture échoue après un délai d'inactivité, 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 le clic.
  6. Développez la nouvelle étape. Par défaut, il s'agit du type waitForElement. Cliquez sur la valeur à côté de type, puis sélectionnez hover. Sélection du pointage.
  7. Ensuite, définissez 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. Continuer pour enregistrer le reste du flux utilisateur, puis arrêter l'enregistrement.

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

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

Copier les étapes

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

  1. Effectuez un clic droit sur l'étape à copier ou cliquez sur l'icône à trois points Menu à trois points. située à côté.
  2. Dans le menu déroulant, sélectionnez l'une des options Copier au format.

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, la mise à l'échelle 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 actualiser la page, supprimez l'étape de navigation comme décrit ci-dessus.

Procédure de configuration

Pour configurer une étape:

  1. Spécifiez le 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 obligatoires 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 Propriétés de l'étape.

Pour supprimer une propriété facultative, cliquez sur le bouton Supprimer Supprimer. à côté de celle-ci.

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 avoir les propriétés facultatives suivantes:

  • target : URL de la cible 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'index basés sur zéro qui identifient un iFrame pouvant être imbriqué. 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 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 | deuxième | retour | avant
change value Oui. Valeur finale
keyDown
keyUp		 key Oui. Nom de la clé
scroll x
y		 Positions X et Y du défilement absolu en pixels, 0 par défaut
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 en 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 Actuellement, seule 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 renvoie la valeur "true"
setViewport width
height		 Oui. Largeur et hauteur de la fenêtre d'affichage en pixels
setViewport deviceScaleFactor Oui. Semblable au ratio de pixels de l'appareil (DPR), valeur par défaut 1
setViewport isMobile
hasTouch
isLandscape		 Oui. Options booléennes qui indiquent si :
  • La balise Meta doit être prise en compte
  • Prendre en charge les événements tactiles
  • Affichage en mode Paysage
    		•

    Deux propriétés permettent d'interrompre la relecture:

    • 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 figurent 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 pour les étapes

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

    Pour éviter ce problème, vous pouvez ajuster le délai avant expiration par défaut pour chaque étape en une seule fois ou définir des délais avant expiration distincts pour des étapes spécifiques. Les délais avant expiration 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 relecture.

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

    3. Cliquez sur Revoir.Revoir pour voir concrètement en quoi consiste le délai avant expiration par défaut.

    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> et 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 enregistrement, vous pouvez configurer les éléments suivants :

    Configuration d&#39;un nouvel enregistrement.

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

    • Dans la case 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 langage de chemin XML
      • Case à cocher. Pierce. Sélecteurs semblables à ceux du CSS, mais qui peuvent percer le Shadow DOM.

    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. Cependant, ce n'est pas toujours le cas pour les raisons suivantes:

    • Vos pages Web peuvent utiliser des classes ou des ID dynamiques qui changent.
    • Vos sélecteurs peuvent ne pas fonctionner en raison de modifications du code ou du framework.

    Par exemple, les valeurs CSS class peuvent être générées automatiquement pour les applications développées avec les frameworks JavaScript modernes (React, Angular et Vue, par exemple) et les 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. Il existe déjà des sélecteurs data-* courants que les développeurs utilisent pour l'automatisation. L'Enregistreur les accepte également.

    Si les sélecteurs de test courants suivants sont définis sur votre site Web, l'Enregistreur les détecte automatiquement et les utilise 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 dans l'enregistrement et vérifiez les sélecteurs détectés:

    Sélecteur de test commun 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 d&#39;enregistrement.

    Renseignez 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. Un sélecteur avec le texte unique le plus court s'il est trouvé.
    • Si aucune valeur n'est spécifiée :
      1. Sélecteur ARIA s'il est trouvé.
      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. Un sélecteur avec le texte unique le plus court s'il est trouvé.

    Il peut y avoir plusieurs sélecteurs CSS, XPath et Pierce standards. L'Enregistreur capture:

    • Sélecteurs CSS et XPath standards à chaque niveau racine, c'est-à-dire des 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.