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, relire et mesurer des 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 de l'Enregistreur.

Pour afficher un indice qui liste tous les raccourcis directement dans l'Enregistreur, cliquez sur aide 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 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.. Uniquement au format JSON.

  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 les 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 flux 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: <ph type="x-smartling-placeholder">
      </ph>
    • 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.

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 importez 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 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. Rejouez le script avec Puppeteer. Étant donné que les étapes sont converties en JavaScript, vous pouvez les personnaliser avec plus de précision, par exemple en les mettant en boucle. Sachez que 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&#39;est ouvert dans Chrome.

Exportez les résultats dans un format personnalisé en installant une extension.

Consultez la section Extensions de l'Enregistreur.

Importer un flux utilisateur

Pour importer un flux utilisateur:

  1. Cliquez sur le bouton ImporterImporter un fichier. en haut du panneau Enregistreur. Importer l&#39;enregistrement.
  2. Sélectionnez le fichier JSON contenant le flux 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. 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:

Relisez les flux utilisateur JSON:

Déboguer les flux 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 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 relecture: <ph type="x-smartling-placeholder">
      </ph>
    • Normale (par défaut)
    • Lente
    • Très lente
    • Extrêmement lent

Relecture 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 &quot;Afficher le code&quot;
  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 et sélectionnez le format que vous utilisez pour exporter des parcours utilisateur.

    Liste déroulante de mise en forme.

    Il peut s'agir de l'un des trois formats par défaut (JSON, @puppeteer/replay, script Puppeteer ou d'un 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é de n'importe quelle étape dans un enregistrement. Le cercle se transforme en icône de point d'arrêt Point d&#39;arrêt..
  2. Cliquez sur l'icône de point d'arrêt Point d&#39;arrêt. et relancez l'enregistrement. Les exécutions s'interrompent au niveau du point d'arrêt. Interruption de l&#39;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 relecture, cliquez sur Fais une pause. Annuler la relecture.

Modifier les étapes

Vous pouvez modifier n'importe quelle étape de l'enregistrement en cliquant sur le bouton Développer. 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

Dans certains cas, vous devrez peut-être 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 dans 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 capturer un événement de pointage.
  2. Pointez sur l'élément dans la fenêtre d'affichage. Un menu d'actions s'affiche. Pointez sur l&#39;é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&#39;enregistrement ;
  4. Essayez de relire 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 du menu. Échec de la relecture.
  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&#39;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. Une fois l'étape de survol ajoutée, l'Enregistreur relance correctement le flux. Rediffusion du jeu réussie.

Ajouter des assertions

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

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

  2. Cliquez sur Ajouter une assertion.

    Bouton &quot;Ajouter une assertion&quot;

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

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

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

    • Attribut HTML : Cliquez sur Ajouter des attributs, puis saisissez le nom et la valeur de l'attribut que les éléments de cette page utilisent. 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. 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. Revoir. 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 les é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:

Un enregistrement avec la fenêtre d&#39;affichage et les étapes de navigation définies.

  • 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 nouvelle lecture.

Pour automatiser les encarts 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 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 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 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 le premier iFrame de la cible principale comme [1, 0].
  • timeout : nombre de millisecondes d'attente avant l'exécution d'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 à un 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 | seconde | 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) | &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 en 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 Délai d'attente maximal 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. Indicateurs booléens spécifiant s'il faut:
  • La balise Meta doit être prise en compte
  • Prendre en charge les événements tactiles
  • Afficher en mode Paysage
    		•

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

    • La propriété waitForElement oblige l'étape à attendre 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 oblige l'étape à attendre la résolution d'une expression JavaScript sur "true". Par exemple, l'étape suivante s'interrompt pendant deux secondes, puis est résolue en "true" ce qui permet à la relecture 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 en même temps:

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

      Paramètres de relecture.

    2. Dans la zone 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 à une étape spécifique:

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

      Ajouter un délai d&#39;inactivité.

    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 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 CSS class suffisent pour que l'Enregistreur détecte les sélecteurs. Cependant, ce n'est pas toujours le cas pour les raisons suivantes:

    • Il est possible que vos pages Web utilisent des classes ou 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 des frameworks JavaScript modernes (par exemple, React, Angular et Vue) et CSS.

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

    Dans ce cas, vous pouvez utiliser les 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 prend également en charge.

    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

    Examinez par exemple le "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 commun détecté.

    Personnaliser le sélecteur d'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 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é: <ph type="x-smartling-placeholder">
        </ph>
      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: <ph type="x-smartling-placeholder">
        </ph>
      1. Sélecteur ARIA s'il est trouvé.
      2. Sélecteurs CSS ayant la priorité suivante: <ph type="x-smartling-placeholder">
          </ph>
        1. Voici les attributs les plus couramment utilisés pour les tests: <ph type="x-smartling-placeholder">
            </ph>
          • 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 Pierce.
      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 Shadow imbriqués, le cas échéant
    • Sélecteurs de pierce uniques parmi tous les éléments au sein de toutes les racines de l'ombre.