Découvrez comment partager des parcours utilisateur, les modifier et les étapes correspondantes dans ce document de référence complet sur les fonctionnalités du panneau Enregistreur des outils pour les développeurs Chrome.
Pour découvrir les principes de base du panneau Enregistreur, consultez Enregistrer, relire et mesurer des parcours utilisateur.
Découvrir et personnaliser les raccourcis
Utilisez des raccourcis pour naviguer plus rapidement dans Enregistreur. Pour obtenir la liste des raccourcis par défaut, consultez l'article Raccourcis clavier du panneau Enregistreur.
Pour afficher une liste de tous les raccourcis dans l'Enregistreur, cliquez sur Aide Afficher les raccourcis en haut à droite.
Pour personnaliser les raccourcis de l'Enregistreur:
- Ouvrez Paramètres > Raccourcis.
- Faites défiler la page jusqu'à la section Enregistreur.
- Suivez la procédure Personnaliser les raccourcis.
Modifier les parcours utilisateur
En haut du panneau Enregistreur, vous disposez des options suivantes:
- Ajouter un enregistrement. Cliquez sur l'icône + pour ajouter un enregistrement.
- Affichez tous les enregistrements. 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.
Exporter un enregistrement. Pour personnaliser davantage le script ou le partager à des fins de création de rapports de bugs, vous pouvez exporter le flux utilisateur dans l'un des formats suivants:
- JSON.
- @puppeteer/replay.
- Puppeteer.
- Puppeteer (y compris l'analyse Lighthouse)
Pour en savoir plus sur les formats, consultez Exporter un parcours utilisateur.
Importer un enregistrement. Uniquement au format JSON.
Supprimer un enregistrement. Supprimez l'enregistrement sélectionné.
Vous pouvez également modifier le nom d'un enregistrement en cliquant sur le bouton de modification situé à côté.
Partager des flux utilisateur
Vous pouvez exporter et importer des parcours utilisateur dans l'Enregistreur. Cette option est utile pour les rapports de bugs, car vous pouvez 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:
- Ouvrez le flux utilisateur que vous souhaitez exporter.
- Cliquez sur Export (Exporter) en haut du panneau Recorder (Enregistreur).
- 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.
- 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. Relancez 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. Relancez le script avec Puppeteer. Comme les étapes sont converties en JavaScript, vous pouvez effectuer une personnalisation plus précise (par exemple, en boucler les étapes). Sachez que vous ne pouvez pas réimporter ce script dans l'Enregistreur.
Puppeteer (y compris l'analyse Lighthouse) Cette option d'exportation est la même que 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
Exporter dans un format personnalisé en installant une extension
Consultez la section Extensions Enregistreur.
Importer un flux utilisateur
Pour importer un flux utilisateur:
- Cliquez sur le bouton Import (Importer) en haut du panneau Recorder (Enregistreur).
- Sélectionnez le fichier JSON avec le flux utilisateur enregistré.
- Cliquez sur le bouton Replay (Revoir) pour exécuter le flux utilisateur importé.
Rejouer avec des bibliothèques externes
La bibliothèque 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 relire des fichiers JSON.
En outre, vous pouvez transformer et relire des fichiers JSON avec les bibliothèques tierces suivantes.
Transformer des flux utilisateur JSON en scripts personnalisés:
- Cypress Chrome Recorder Vous pouvez l'utiliser pour convertir les fichiers JSON de flux utilisateur en scripts de test Cypress. Regardez cette démonstration pour la voir en action.
- l'Enregistreur Chrome de Nightwatch Vous pouvez l'utiliser pour convertir des fichiers JSON de flux utilisateur en scripts de test Nightwatch.
- Enregistreur Chrome CodeceptJS Vous pouvez l'utiliser pour convertir les fichiers JSON de flux utilisateur en scripts de test CodeceptJS.
Revoir les parcours utilisateur JSON:
- Rejouez avec Testcafe. Vous pouvez utiliser TestCafe pour relire des fichiers JSON de flux utilisateur et générer des rapports de test pour ces enregistrements.
- Rejouez avec Sauce Labs. Vous pouvez relire les fichiers JSON sur Sauce Labs à l'aide de saucectl.
Déboguer les parcours utilisateur
Comme pour tout code, vous devez parfois déboguer les parcours 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, d'exécuter l'exécution et d'inspecter le code dans différents formats en parallèle avec des étapes.
Ralentir la rediffusion
Par défaut, l'Enregistreur relance le parcours utilisateur aussi vite que possible. Pour comprendre ce qu'il se passe dans l'enregistrement, vous pouvez ralentir la vitesse de relecture:
- Ouvrez le menu déroulant Revoir.
- Choisissez l'une des options de vitesse de relecture :
- Normale (par défaut)
- Lente
- Très lente
- Extrêmement lent
Inspecter le code
Pour inspecter le code d'un flux utilisateur dans différents formats:
- Ouvrez un enregistrement dans le panneau Enregistreur.
- Cliquez sur Afficher le code en haut à droite de la liste des étapes.
- L'Enregistreur affiche côte à côte les étapes et leur code.
- Lorsque vous pointez sur une étape, l'Enregistreur met en surbrillance le code correspondant dans n'importe quel format, y compris ceux fournis par les extensions.
Développez la liste déroulante des formats afin de sélectionner un format que vous utilisez pour exporter des parcours utilisateur.
Il peut s'agir de l'un des trois formats par défaut (JSON, @puppeteer/replay et du script Puppeteer) ou d'un format fourni par une extension.
Déboguez votre enregistrement en modifiant les valeurs et les paramètres des étapes. La vue Code n'est pas modifiable, mais elle est mise à jour en conséquence lorsque vous modifiez les étapes sur la gauche.
Définir des points d'arrêt et exécuter l'application étape par étape
Pour définir un point d'arrêt et l'exécuter étape par étape, procédez comme suit:
- Pointez sur le cercle à côté d'une étape d'un enregistrement. Le cercle se transforme en icône de point d'arrêt .
- Cliquez sur l'icône de point d'arrêt , puis relancez l'enregistrement. Les exécutions sont interrompues au niveau du point d'arrêt.
- Pour suivre l'exécution, cliquez sur le bouton Execute one step (Exécuter une étape) sur la barre d'action en haut du panneau Recorder (Enregistreur).
- Pour arrêter la relecture, cliquez sur Annuler la relecture.
Modifier les étapes
Vous pouvez modifier n'importe quelle étape de l'enregistrement en cliquant sur le bouton situé à côté, pendant et après l'enregistrement.
Vous pouvez également ajouter les étapes manquantes et supprimer celles qui ont été 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 s'afficher 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:
- Ouvrez cette page de démonstration et commencez un nouvel enregistrement.
- Pointez sur l'élément dans la fenêtre d'affichage. Un menu d'actions s'affiche.
- Sélectionnez une action dans le menu et mettez fin à l'enregistrement. L'Enregistreur ne capture que l'événement de clic.
- Essayez de relire l'enregistrement en cliquant sur Revoir . La relecture échoue après un délai d'inactivité, car l'Enregistreur ne peut pas accéder à l'élément du menu.
- Cliquez sur le bouton à trois points à côté de l'étape Cliquer, puis sélectionnez Ajouter une étape avant.
- Développez la nouvelle étape. Par défaut, il est de type
waitForElement
. Cliquez sur la valeur à côté detype
, puis sélectionnezhover
. - Définissez ensuite un sélecteur approprié pour la nouvelle étape. Cliquez sur 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
. - Réessayez de lire l'enregistrement. Grâce à l'étape de survol ajoutée, l'Enregistreur relance le flux avec succès.
Ajouter des assertions
Pendant l'enregistrement, vous pouvez revendiquer, par exemple, des attributs HTML et des propriétés JavaScript. Pour ajouter une assertion:
- Démarrez un enregistrement, par exemple, sur cette page de démonstration.
Cliquez sur Ajouter une assertion.
L'Enregistreur crée une étape
waitForElement
configurable.Spécifiez les sélecteurs pour cette étape.
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 qui seront utilisés par les éléments de cette page. 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 d'étape. Exemple :
visible: true
- Attribut HTML : Cliquez sur Ajouter des attributs, puis saisissez le nom et la valeur de l'attribut qui seront utilisés par les éléments de cette page. Exemple :
Enregistrez le reste du flux utilisateur, puis arrêtez l'enregistrement.
Cliquez sur Revoir. Si une assertion échoue, l'Enregistreur affiche une erreur après un délai d'expiration.
Regardez la vidéo ci-dessous pour découvrir ce processus en action.
Copier les étapes
Plutôt que d'exporter l'intégralité du parcours utilisateur, vous pouvez copier une seule étape dans le presse-papiers:
- Effectuez un clic droit sur l'étape à copier ou cliquez sur l'icône à trois points située à côté.
- Dans le menu déroulant, sélectionnez l'une des options Copier au format.
Vous pouvez copier les étapes dans différents formats: JSON, Puppeteer, @puppeteer/replay, ainsi que ceux fournis par les extensions.
Supprimer les étapes
Pour supprimer une étape enregistrée accidentellement, effectuez un clic droit sur l'étape ou cliquez sur l'icône à trois points à côté d'elle, puis sélectionnez Supprimer l'étape.
De plus, l'Enregistreur ajoute automatiquement deux étapes distinctes au début de chaque enregistrement:
- Définir la fenêtre d'affichage Vous permet de contrôler les dimensions, la mise à 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 effectuer une automatisation sur la page sans l'actualiser, supprimez l'étape de navigation comme décrit ci-dessus.
Configurer les étapes
Pour configurer une étape:
Spécifiez son type:
click
,doubleClick
,hover
, (entrée)change
,keyUp
,keyDown
,scroll
,close
,navigate
(vers une page),waitForElement
,waitForExpression
ousetViewport
.Les autres propriétés dépendent de la valeur
type
.Spécifiez les propriétés obligatoires sous
type
.Cliquez sur les boutons correspondants pour ajouter des propriétés facultatives spécifiques à un type et les spécifier.
Pour obtenir la liste des propriétés disponibles, consultez Propriétés des étapes.
Pour supprimer une propriété facultative, cliquez sur le bouton Supprimer situé à côté.
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 peuvent actuellement être qu'un seul événementnavigation
Les autres propriétés courantes disponibles pour la plupart des types d'étapes sont les suivantes:
frame
: tableau d'index basés sur zéro qui identifient un iFrame pouvant être imbriqué. Par exemple, vous pouvez identifier le premier (0) iFrame d'un second iFrame de la cible principale comme étant[1, 0]
.timeout
: délai d'attente en millisecondes 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 au type sont les suivantes:
Type | Propriété | Obligatoire | Description |
click doubleClick |
offsetX offsetY |
Par rapport à l'angle supérieur gauche de la zone de contenu de l'élément, en pixels | |
click doubleClick |
button |
Bouton du pointeur: primaire | auxiliaire | deuxième | retour | avant | |
change |
value |
Valeur finale | |
keyDown keyUp |
key |
Nom de la clé | |
scroll |
x y |
Positions X et Y du défilement absolu en pixels, 0 par défaut | |
navigate |
url |
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 (sans display: none ni visibility: hidden ) |
|
waitForElement waitForExpression |
asserted events |
Actuellement, vous n'avez que type: navigation , mais vous pouvez indiquer le titre et l'URL. |
|
waitForElement waitForExpression |
timeout |
Temps d'attente maximal en millisecondes | |
waitForExpression |
expression |
Expression JavaScript qui renvoie la valeur "true" | |
setViewport |
width height |
Largeur et hauteur de la fenêtre d'affichage en pixels | |
setViewport |
deviceScaleFactor |
Semblable au rapport de pixels de l'appareil (DPR), valeur par défaut 1 | |
setViewport |
isMobile hasTouch isLandscape |
Indicateurs booléens qui spécifient si: |
Deux propriétés permettent de suspendre la relecture:
La propriété
waitForElement
fait en sorte que l'étape attende 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 figurent sur la page correspondant au sélecteur.my-class
."type": "waitForElement", "selectors": [".my-class"], "operator": "<=", "count": 2,
La propriété
waitForExpression
fait en sorte que l'étape attende qu'une expression JavaScript prenne la valeur "true". Par exemple, l'étape suivante s'interrompt pendant deux secondes, puis passe à la valeur "true" pour permettre à la relecture de se poursuivre."type": "waitForExpression", "expression": "new Promise(resolve => setTimeout(() => resolve(true), 2000))",
Ajuster les délais avant expiration pour les pas
Si votre page comporte des requêtes réseau lentes ou des animations longues, la relecture peut échouer pour 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 même temps ou définir des délais avant expiration distincts pour des étapes spécifiques. Les délais avant expiration lors d'étapes spécifiques remplacent les délais par défaut.
Pour ajuster le délai avant expiration par défaut de chaque étape à la fois:
Cliquez sur Paramètres de relecture pour rendre le champ Délai avant expiration modifiable.
Dans le champ Délai avant expiration, définissez la valeur du délai avant expiration en millisecondes.
Cliquez sur Replay (Revoir la vidéo) pour voir le délai par défaut ajusté.
Pour remplacer le délai avant expiration par défaut sur une étape spécifique:
Développez l'étape et cliquez sur Ajouter un délai avant expiration.
Cliquez sur
timeout: <value>
et définissez la valeur en millisecondes.Cliquez sur Replay (Revoir la vidéo) pour afficher l'étape avec le délai d'inactivité.
Pour supprimer le remplacement du délai avant expiration d'une étape, cliquez sur le bouton Supprimer situé à côté.
Comprendre les sélecteurs
Lorsque vous démarrez un nouvel enregistrement, vous pouvez configurer les paramètres suivants:
- 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 la série de cases Types de sélecteurs à enregistrer, choisissez les types de sélecteurs à détecter automatiquement:
- CSS. Sélecteurs syntaxiques
- ARIA. Sélecteurs sémantiques
- Texte. Sélecteurs avec le texte unique le plus court, le cas échéant
- XPath. Les sélecteurs qui utilisent la langue de chemin XML.
- Pierce. Sélecteurs semblables aux sélecteurs 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 dynamiques ou des ID qui changent.
- Vos sélecteurs peuvent ne pas fonctionner en raison des 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 (par exemple, React, Angular, Vue) et CSS.
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 suivants sont définis 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 observez les attributs de test:
Enregistrez un clic sur "Cappuccino", développez l'étape correspondante dans l'enregistrement et vérifiez les sélecteurs détectés:
Personnaliser le sélecteur d'enregistrement
Vous pouvez personnaliser le sélecteur d'un enregistrement si les sélecteurs de test courants ne fonctionnent 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.
Saisissez une adresse e-mail et observez la valeur du sélecteur ([data-automate=email-address]
).
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é ou non:
- Si spécifié :
- Sélecteur CSS avec votre attribut CSS personnalisé.
- Sélecteurs XPath.
- Sélecteur ARIA s'il est trouvé.
- Sélecteur avec le texte unique le plus court s'il est trouvé.
- Si aucune valeur n'est spécifiée :
- Sélecteur ARIA s'il est trouvé.
- Sélecteurs CSS avec la priorité suivante :
- 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
- Attributs d'ID (par exemple,
<div id="some_ID">
). - Sélecteurs CSS standards.
- Attributs les plus couramment utilisés pour les tests :
- Sélecteurs XPath.
- Sélecteurs de piercings
- 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 les informations suivantes:
- Sélecteurs CSS et XPath standards à chaque niveau racine, c'est-à-dire des hôtes fantômes imbriqués, le cas échéant
- Percez les sélecteurs qui sont uniques parmi tous les éléments à l'intérieur de toutes les racines fantômes.