Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

Jecelyn Yeen

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 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

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

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](/docs/puppeteer/ script.
- 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é.

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

Relecture lente.

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é de type, puis sélectionnez hover.
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.
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.

Sélectionner une option de copie dans le menu déroulant.

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.

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'affichage et les étapes de navigation définies.

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 ou setViewport.

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énement navigation

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: Prendre en compte la balise Meta Prendre en charge les événements tactiles Afficher en mode Paysage

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:

Configuration d'un nouvel enregistrement.

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.

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 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:

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 courant 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 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.

Personnalisez le sélecteur d'enregistrement.

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

Résultat de la sélection d'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 attribut 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. 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. 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 piercings
5. 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.