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 parcourir l'Enregistreur plus rapidement. 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évelopper.. Le menu déroulant affiche la liste des enregistrements sauvegardés. Sélectionnez l'option [nombre] 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 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. situé à côté.

Partager des parcours utilisateur

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

Exporter un flux utilisateur

Pour exporter un flux utilisateur:

  1. Ouvrez le parcours utilisateur que vous souhaitez exporter.
  2. Cliquez sur Téléchargement de fichier. Exporter en haut du panneau Enregistreur. Options de format d'exportation.
  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 (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.

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

  • JSON. Modifiez l'objet JSON lisible par l'humain et import 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 idéale 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 (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 vérifiez le résultat dans un fichier flow.report.html:

    # npm i puppeteer lighthouse
node your_export.js

    Le rapport Lighthouse s'est ouvert dans Chrome.

Exporter au format personnalisé en installant une extension

Consultez la section Extensions de l'Enregistreur.

Importer un flux utilisateur

Pour importer un parcours utilisateur :

  1. Cliquez sur le bouton ImporterImporter un fichier. en haut du panneau Enregistreur. Importer l'enregistrement.
  2. Sélectionnez le fichier JSON contenant le flux utilisateur enregistré.
  3. Cliquez sur le bouton Revoir.Rejouer pour exécuter le parcours 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 repose sur Puppeteer. C'est un outil de ligne de commande qui vous permet de l'utiliser pour relire des fichiers JSON.

En outre, vous pouvez transformer et relire des fichiers JSON à l'aide des bibliothèques tierces suivantes.

Transformez 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 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 relance le flux 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 relecture:
    • Normale (par défaut)
    • Lente
    • Très lente
    • Extrêmement lent

Nouvelle lecture lente.

Inspecter le code

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

  1. Ouvrez un enregistrement dans le panneau Enregistreur.
  2. Cliquez sur Afficher le code dans l'angle supérieur droit 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 et sélectionnez le format que vous utilisez pour exporter des 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. Procédez au débogage de votre enregistrement en modifiant les paramètres et les valeurs des étapes. La vue Code n'est pas modifiable, mais elle est mise à jour en conséquence à mesure que vous apportez des modifications aux étapes de gauche.

Définir des points d'arrêt et exécuter étape par étape

Pour définir un point d'arrêt et l'exécuter é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. 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évelopper. à 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 capturer 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. Choisissez une action dans le menu et mettez fin à 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 Revoir.. 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! qui se trouve en dehors du menu contextuel. Le sélecteur est défini sur #clickable. Définir le sélecteur.
  8. Essayez de relire l'enregistrement. Avec l'étape de survol ajoutée, l'enregistreur lit correctement le flux. Rediffusion du jeu réussie.

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 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 ci-dessous pour découvrir ce processus 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 sur l'étape, ou cliquez sur l'icône à trois points Menu à trois points. située à côté, 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, l'échelle et d'autres propriétés de la fenêtre d'affichage.
  • Naviguer 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.

Étapes 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 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 la section 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 dans 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 actuellement ê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 pour les é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 | secondaire | arrière | 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) | &lt;=
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 (sans display: none ni 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 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. Indicateurs booléens spécifiant s'il faut:
  • Prendre en compte la balise Meta
  • Prendre en charge les événements tactiles
  • Afficher 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 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 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 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 en même temps:

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

      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 à une étape spécifique:

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

      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.Rejouer pour voir l'étape avec le délai d'inactivité en action.

    Pour supprimer le remplacement du délai avant expiration d'une étape, cliquez sur le bouton SupprimerSupprimer. situé à côté de celle-ci.

    Comprendre les sélecteurs

    Lorsque vous lancez un nouvel 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 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 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 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 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 :

    Définition des sélecteurs de test.

    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 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 d&#39;enregistrement.

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

    Résultat de la sélection d&#39;un sélecteur personnalisé.

    Priorité du sélecteur

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

    • Si spécifié:
      1. Sélecteur CSS avec votre attribut CSS personnalisé.
      2. Sélecteurs XPath
      3. Sélecteur ARIA s'il est trouvé.
      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, le cas échéant.
      2. Sélecteurs CSS avec la priorité suivante :
        1. Voici les attributs les plus couramment 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 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 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.