Partager via

Enregistrer et relire des flux utilisateur et mesurer les performances

  • Article

Utilisez l’outil Enregistreur pour enregistrer une série d’étapes dans la fenêtre ou l’onglet du navigateur où DevTools est ouvert, puis relire les étapes automatiquement, tout en mesurant également les performances.

Quand utiliser l’outil Enregistreur

Utilisez l’outil Enregistreur lorsque vous souhaitez accélérer les tâches répétitives en relectant automatiquement une série d’interactions utilisateur dans le navigateur.

L’outil Enregistreur enregistre les interactions utilisateur, telles que les clics de souris, l’entrée au clavier et les événements de navigation de page, et vous permet de relire automatiquement les interactions. Vous pouvez également utiliser l’outil Enregistreur pour mesurer les performances d’exécution lors de la relecture des interactions utilisateur enregistrées. L’outil Enregistreur vous permet d’enregistrer autant de flux utilisateur que vous le souhaitez et de les relire autant de fois que vous le souhaitez.

Pour le reste de cet article, nous allons utiliser l’outil Enregistreur pour automatiser l’ajout de tâches à l’application TODO de démonstration.

Ouvrir l’outil Enregistreur

  1. Ouvrez l’application TODO dans un nouvel onglet ou une nouvelle fenêtre.

  2. Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspect. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.

  3. Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Enregistreur . Si cet onglet n’est pas visible, cliquez sur le bouton Autres outils (icône Autres outils), puis sélectionnez Enregistreur. L’outil Enregistreur s’ouvre :

    L’application TODO de démonstration et l’outil Enregistreur dans DevTools, à côté de celle-ci

Enregistrer un flux d’utilisateur

Pour commencer à enregistrer un nouveau flux d’utilisateur :

  1. Cliquez sur Créer un enregistrement.

  2. Sous Nom de l’enregistrement, entrez un nom pour l’enregistrement, par exemple « Ajout de tâches TODO ».

  3. Cliquez sur Démarrer l’enregistrement en bas de l’outil Enregistreur :

    Nom de l’enregistrement et bouton Démarrer l’enregistrement

  4. Dans la page web rendue, interagissez avec la page. Par exemple, entrez « tâche 1 » dans la zone d’entrée Ajouter une tâche , puis appuyez sur Entrée. Répétez ces étapes plusieurs fois.

    Un cercle rouge apparaît en regard du nom de l’enregistrement, indiquant que l’enregistrement est en cours. L’outil Enregistreur enregistre vos interactions et les affiche sous la forme d’une liste d’étapes :

    Interactions utilisateur enregistrées affichées sous forme de liste dans l’outil Enregistreur

  5. Pour arrêter l’enregistrement, en bas de la liste des interactions enregistrées, cliquez sur le bouton Terminer l’enregistrement .

    L’enregistrement s’arrête et le cercle en regard du nom de l’enregistrement devient bleu, indiquant que l’enregistrement est terminé :

    L’enregistrement finalisé et le bouton Relire

Enregistrer d’autres flux d’utilisateurs

Pour enregistrer un nouveau flux utilisateur, après avoir arrêté l’enregistrement du flux utilisateur précédent :

  1. Cliquez sur le bouton Créer un enregistrement (bouton Créer un enregistrement) dans le coin supérieur gauche de l’outil Enregistreur :

    Bouton « Créer un enregistrement »

  2. Répétez les étapes décrites ci-dessus dans Enregistrer un flux utilisateur.

Relire un flux d’utilisateur

Vous pouvez relire des flux utilisateur à partir de la liste des flux utilisateur enregistrés ou lors de l’affichage des détails d’un flux utilisateur donné.

  • Pour afficher la liste des flux utilisateur enregistrés, cliquez sur le menu déroulant qui se trouve dans la barre d’outils Enregistreur , en haut, puis sélectionnez 2 enregistrements. L’étiquette peut afficher un nombre différent d’enregistrements, en fonction du nombre d’enregistrements que vous avez effectués.

  • Pour afficher les détails d’un flux utilisateur donné, cliquez sur la liste déroulante qui se trouve dans la barre d’outils Enregistreur , en haut, puis cliquez sur le nom d’un flux utilisateur.

Relire un flux utilisateur à partir de la liste des enregistrements

  1. Cliquez sur le bouton Lire l’enregistrement en regard d’un enregistrement :

    Liste des enregistrements, avec un bouton « Lire l’enregistrement » en regard de chaque enregistrement

  2. Patientez pendant que l’outil Enregistreur relit les interactions utilisateur enregistrées précédemment. Une animation des étapes en cours de relecture s’affiche dans l’outil Enregistreur :

    Interactions relues affichées sous forme d’animation dans l’outil Enregistreur

    Une fois la relecture terminée, l’animation s’arrête et l’outil Enregistreur affiche les étapes de l’enregistrement.

Relire un flux utilisateur à partir d’un enregistrement

  1. Cliquez sur le bouton Relire en haut à droite de l’outil Enregistreur :

    Bouton Relire sur une page de détails de flux d’utilisateur enregistrée

  2. Patientez pendant que l’outil Enregistreur relit les interactions utilisateur enregistrées précédemment. Une animation des étapes en cours de relecture s’affiche dans l’outil Enregistreur :

    Interactions relues affichées sous forme d’animation dans l’outil Enregistreur

    Une fois la relecture terminée, l’animation s’arrête et l’outil Enregistreur affiche les étapes de l’enregistrement.

Relire lentement un flux utilisateur pour examiner les problèmes

Pour voir ce qui se passe dans la page rendue pendant la relecture des interactions utilisateur, ralentissez la vitesse de relecture. Par défaut, l’outil Enregistreur relit les flux utilisateur aussi rapidement que possible.

Pour ralentir la vitesse de relecture :

  • Cliquez sur la flèche déroulante en regard de Relire dans le coin supérieur droit de l’outil Enregistreur , puis sélectionnez une vitesse dans le menu déroulant, telle que Lente, Très lente ou Extrêmement lente :

    Le bouton Relire et le menu déroulant Vitesse

Suspendre lors de la relecture d’un flux utilisateur, à l’aide de points d’arrêt

Pour inspecter la page web rendue à un point spécifique du flux utilisateur, suspendez la relecture à l’aide d’un point d’arrêt.

Pour ajouter un point d’arrêt à un flux d’utilisateur :

  1. En regard de l’étape de flux à laquelle effectuer une pause, cliquez sur le bouton Ouvrir les actions d’étape (icône Ouvrir les actions d’étape), puis sélectionnez Ajouter un point d’arrêt :

    Le bouton « Ouvrir les actions d’étape » et l’élément de menu « Ajouter un point d’arrêt »

  2. Pour démarrer le flux utilisateur, cliquez sur Relecture dans le coin supérieur droit de l’outil Enregistreur .

    La relecture s’interrompt lorsqu’elle atteint l’étape qui a un point d’arrêt. Les boutons Continuer et Exécuter en une étape deviennent également disponibles dans la barre d’outils :

    La relecture suspendue à une étape avec un point d’arrêt

  3. Cliquez sur le bouton Exécuter une étape pour exécuter l’étape suivante et suspendre à nouveau, ou cliquez sur le bouton Continuer pour continuer la relecture jusqu’à ce que le point d’arrêt suivant (ou la fin du flux d’utilisateur) soit atteint.

Mesurer les performances

Pour mesurer la vitesse d’exécution d’un site web lors de la relecture d’une série d’interactions utilisateur, utilisez l’outil Enregistreur . En enregistrant un flux utilisateur une seule fois, vous pouvez relire l’enregistrement plusieurs fois, tout en travaillant sur l’amélioration des performances d’exécution du site web.

  1. Pour enregistrer un nouveau flux d’utilisateur, suivez les étapes décrites dans Enregistrer un flux utilisateur.

  2. Pour relire le flux utilisateur tout en mesurant les performances, cliquez sur le panneau Performances dans le coin supérieur droit de l’outil Enregistreur :

    Bouton du panneau Performances

  3. Patientez pendant que l’outil Enregistreur relit les interactions utilisateur enregistrées précédemment.

    L’outil Performance s’ouvre et affiche un enregistrement des performances du site web pendant la relecture des interactions utilisateur :

    L’outil Performance affichant un enregistrement des performances du site web

Modifier les étapes d’un flux utilisateur

Une fois que vous avez enregistré un flux utilisateur, vous pouvez modifier les étapes du flux utilisateur. Par exemple, vous pouvez ajouter de nouvelles étapes, supprimer des étapes existantes ou modifier les détails d’une étape.

Ajouter une nouvelle étape

Pour ajouter une nouvelle étape à un flux utilisateur existant :

  1. Cliquez sur le bouton Ouvrir les actions d’étape (icône Ouvrir les actions d’étape) en regard de l’étape avant ou après laquelle vous souhaitez ajouter une nouvelle étape, puis sélectionnez Ajouter une étape avant ou Ajouter une étape après :

    L’icône « Ouvrir les actions d’étape » et le bouton « Ajouter une étape »

  2. Suivez les instructions fournies dans Modifier une étape ci-dessous pour modifier les détails de la nouvelle étape que vous avez ajoutée. La nouvelle étape est temporairement nommée Wait for element.

Modifier une étape

Pour modifier les détails d’une étape existante :

  1. Pour ouvrir la section détails de l’étape que vous souhaitez modifier, cliquez sur le bouton triangle (icône de développement du triangle) en regard de l’étape. La section détails de l’étape s’ouvre :

    Section détaillée pour une étape du flux d’utilisateur

  2. Modifiez les détails de l’étape, tels que le type d’étape, les sélecteurs de l’élément DOM auquel l’étape s’applique ou les propriétés de l’étape. Les différents types d’étapes et leurs propriétés sont répertoriés dans la section ci-dessous. Vos modifications sont enregistrées automatiquement.

Modifier le type d’étape

Pour modifier le type d’étape lors de la modification des détails d’une étape :

  1. Cliquez sur la zone d’entrée en regard de taper. Par exemple, si l’étape que vous modifiez a le type waitForElement, cliquez sur la zone d’entrée qui contient la valeur waitForElement.

  2. Supprimez le contenu de la zone d’entrée, puis sélectionnez le nouveau type d’étape que vous souhaitez utiliser dans le menu déroulant qui s’affiche :

    Menu déroulant Type

Vous pouvez utiliser les types d’étapes suivants lors de la modification d’une étape dans un flux utilisateur. Chaque type d’étape a une liste de propriétés qui s’appliquent à l’étape.

Type d’étape Description Propriétés
change Modifiez la valeur d’un champ d’entrée de formulaire. sélecteurs : méthodes permettant de rechercher l’élément auquel cette étape s’applique.
value : valeur sur laquelle définir le champ d’entrée de formulaire.
click Cliquez sur un élément. sélecteurs : méthodes permettant de trouver l’élément auquel cette étape s’applique.
offsetX/offsetY : distance à partir du coin supérieur gauche de l’élément à cliquer.
close Fermez la fenêtre du navigateur. Aucune.
doubleClick Double-cliquez sur un élément. sélecteurs : méthodes permettant de rechercher l’élément auquel cette étape s’applique.
offsetX/offsetY : distance du coin supérieur gauche de l’élément pour double-cliquer.
emulateNetworkConditions Émulez différentes conditions réseau. Télécharger/upload : vitesse de téléchargement et de chargement, en octets par seconde.
latence : latence minimale d’une requête envoyée à la réponse reçue, en millisecondes.
hover Émulez le pointeur pointant sur un élément. sélecteurs : méthodes permettant de rechercher l’élément auquel cette étape s’applique.
keyDown Appuyez sur une touche vers le bas. sélecteurs : méthodes permettant de rechercher l’élément auquel cette étape s’applique.
touche : touche sur laquelle appuyer.
keyUp Relâchez une touche enfoncée. sélecteurs : méthodes permettant de rechercher l’élément auquel cette étape s’applique.
key : clé à libérer.
navigate Accédez à une autre page web. url : URL de la page à laquelle accéder.
scroll Faites défiler jusqu’à une position dans la page web. X/y : coordonnées horizontales et verticales facultatives de la position vers laquelle faire défiler la page.
setViewport Modifiez la taille de la fenêtre d’affichage, le ratio de pixels de l’appareil et les fonctionnalités. Largeur/height : taille de la fenêtre d’affichage.
deviceScaleFactor : ratio de pixels de l’appareil.
isMobile : indique si la fenêtre d’affichage est une fenêtre d’affichage d’appareil mobile.
hasTouch : indique si la fenêtre d’affichage prend en charge les événements tactiles.
isLandscape : indique si la fenêtre d’affichage est dans une orientation paysage.
waitForElement Attendez qu’un élément, ou plusieurs éléments, soient présents dans la page web. sélecteurs : méthodes permettant de rechercher l’élément auquel cette étape s’applique.
waitForExpression Attendez qu’une expression JavaScript soit évaluée à true. expression : expression JavaScript à évaluer.
Modifier les sélecteurs d’une étape

De nombreux types d’étapes ont une propriété sélecteurs , qui spécifie l’élément DOM auquel l’étape s’applique. Par exemple, une click étape a une propriété selectors pour définir l’élément sur lequel l’utilisateur clique sur l’élément de la page lors de l’exécution de cette étape du flux utilisateur.

La propriété sélecteurs est une liste d’un ou plusieurs sélecteurs. Chaque sélecteur de la liste peut être un moyen différent de rechercher l’élément dans la page. L’outil Enregistreur tente chaque sélecteur dans la liste, dans l’ordre, jusqu’à ce qu’il trouve un élément dans la page qui correspond au sélecteur.

Un sélecteur peut être de l’un des types suivants :

  • Un sélecteur CSS, tel que #my-element-with-id ou .my-class.
  • Sélecteur XPath, préfixé par xpath/, tel que xpath//html/body/form/div/label.
  • Contenu texte de l’élément, préfixé de text/, tel que text/Add a task.

Vous pouvez modifier les sélecteurs d’une étape par l’une ou l’autre approche :

  • Sélection d’un élément dans la page web rendue.

  • Ajouter, supprimer ou modifier manuellement un sélecteur.

  • Pour modifier les sélecteurs en sélectionnant un élément dans la page web rendue, cliquez sur Sélectionner un élément dans la page pour mettre à jour les sélecteurs, puis cliquez sur l’élément de la page web rendue que vous souhaitez sélectionner. L’outil Enregistreur met à jour la liste des sélecteurs pour qu’ils correspondent à l’élément sélectionné :

    Bouton Sélectionner l’élément

  • Vous pouvez ajouter, supprimer ou modifier manuellement un sélecteur :

    • Pour ajouter ou supprimer un sélecteur, sous Sélecteurs, pointez sur un sélecteur, puis cliquez sur Ajouter un sélecteur ou Sur Supprimer un sélecteur :

      Boutons Ajouter et supprimer un sélecteur

    • Pour modifier la valeur d’un sélecteur, sous Sélecteurs, cliquez sur la zone d’entrée qui contient la valeur du sélecteur, puis entrez la nouvelle valeur du sélecteur :

      Zone d’entrée de la valeur du sélecteur

Supprimer une étape

Pour supprimer une étape d’un flux utilisateur existant :

  1. Cliquez sur le bouton Ouvrir les actions d’étape (icône Ouvrir les actions d’étape) en regard de l’étape à supprimer, puis sélectionnez Supprimer l’étape :

    Le bouton « Ouvrir les actions d’étape » et le bouton « Supprimer l’étape »

Supprimer un flux d’utilisateur

Pour supprimer un flux utilisateur précédemment enregistré, lorsque vous affichez la liste des enregistrements, cliquez sur Supprimer l’enregistrement (icône Supprimer l’enregistrement) en regard de l’enregistrement que vous souhaitez supprimer :

La liste des enregistrements et le bouton « Supprimer l’enregistrement » en regard de chaque enregistrement

Exporter et importer des flux utilisateur sous forme de fichiers

Pour partager un flux utilisateur avec d’autres personnes, exportez votre flux utilisateur enregistré sous forme de fichier JSON. Par exemple, le partage d’un flux utilisateur peut aider d’autres personnes à reproduire un bogue en exécutant le même ensemble d’étapes que vous.

Exporter un flux d’utilisateur en tant que fichier

Pour partager un flux d’utilisateur avec une autre personne, exportez le flux utilisateur sous la forme d’un fichier JSON :

  1. Lorsque vous affichez les étapes d’un flux utilisateur, cliquez sur le bouton Exporter (bouton Exporter) dans la barre d’outils de l’outil Enregistreur , puis sélectionnez JSON :

    Le menu déroulant du bouton Exporter et l’option JSON

  2. Sélectionnez un emplacement où enregistrer le fichier. Le fichier est enregistré avec le nom du flux d’utilisateur et l’extension .json.

Importer un flux utilisateur à partir d’un fichier

Pour importer un flux utilisateur à partir d’un fichier JSON :

  1. Dans la barre d’outils de l’outil Enregistreur, cliquez sur le bouton Importer l’enregistrement (icône Importer l’enregistrement) :

    Bouton Importer l’enregistrement

  2. Dans la boîte de dialogue du sélecteur de fichiers qui s’ouvre, sélectionnez un fichier JSON de flux utilisateur, puis cliquez sur le bouton Ouvrir . Le flux utilisateur est importé et apparaît dans la liste des enregistrements de l’outil Enregistreur .

Exporter un flux utilisateur pour l’automatisation des tests

Pour générer un script de test et l’exécuter automatiquement avec une infrastructure d’automatisation de test, exportez un flux utilisateur en tant que .js fichier de script de test, comme suit :

  1. Lorsque vous affichez les étapes d’un flux utilisateur, dans la barre d’outils de l’outil Enregistreur , cliquez sur le bouton Exporter (bouton Exporter), puis sélectionnez un format d’exportation :

    Le menu déroulant du bouton Exporter et les différents formats d’automatisation des tests

    Format d’exportation Infrastructure d’automatisation des tests
    @puppeteer/replay Exporte le flux utilisateur en tant que script de test pour la bibliothèque Replay . Consultez le référentiel marionnettiste/relecture .
    Marionnettiste Exporte le flux utilisateur en tant que script de test pour l’infrastructure d’automatisation des tests Puppeteer. Voir Marionnettiste.
    Marionnettiste (y compris l’analyse lighthouse) Exporte le flux utilisateur en tant que script de test pour l’infrastructure d’automatisation des tests Puppeteer et inclut une analyse Lighthouse des performances du site web.

    La boîte de dialogue Enregistrer sous s’ouvre .

  2. Sélectionnez un emplacement dans lequel enregistrer le fichier. Le fichier est enregistré avec le nom du flux d’utilisateur et l’extension .js.