Utilisez l'enregistreur Chrome (également disponible sur Edge et d'autres navigateurs basés sur Chromium) pour enregistrer facilement vos propres interactions avec un site web, puis importez l'enregistrement en tant que scénario dans l'analyse de vitesse.
Créer et exporter un enregistrement
Étape 1 : Ouvrir la console de développement Chrome
1. Ouvrez le site web à partir duquel vous souhaitez enregistrer via Google Chrome.
2. Ouvrez la console de développement en cliquant sur l'icône à 'trois points' à côté de votre profil.
3. Cliquez sur ‘Plus d'outils’, puis sur ‘Outils de développement’.
4. Cliquez sur l'icône à 'trois points' dans le coin supérieur droit de la console de développement, puis sur ‘Plus d'outils’ > ‘Enregistreur’.
Étape 2 : Créer votre enregistrement
1. Dans la fenêtre qui s'ouvre, sélectionnez ‘Créer un nouvel enregistrement’.
2. Entrez le nom de votre enregistrement. Remarque, le nom de votre enregistrement deviendra le nom de fichier lorsque vous l'exporterez et le nom de votre scénario dans l'analyse de vitesse.
3. Sous ‘Types de sélecteurs à enregistrer’, sélectionnez soit ‘CSS’ OU ‘XPath’ selon votre préférence. Remarque, le type de sélecteur que vous choisissez sera celui utilisé dans l'analyse de vitesse.
4. Cliquez sur ‘Démarrer l'enregistrement’.
5. Effectuez les actions que vous souhaitez enregistrer et arrêtez l'enregistrement lorsque vous avez terminé.
Étape 3 : Exporter votre enregistrement
Une fois que vous avez arrêté l'enregistrement, vous pouvez l'exporter en tant que fichier JSON en cliquant sur le bouton ‘Exporter’ et en sélectionnant ‘JSON’.
À propos des actions enregistrées et de la navigation
Actions enregistrées
Toutes les actions que vous effectuez sur le site web seront enregistrées jusqu'à ce que vous mettiez fin à l'enregistrement.
Assurez-vous de n'effectuer que des actions utiles lors de l'enregistrement de votre navigation pour améliorer la qualité du scénario résultant. Notez que la navigation au clavier n'est pas prise en charge par le laboratoire d'analyse de vitesse, vous devez donc uniquement utiliser des clics (pas de tabulations, pas de touches de direction, pas de touche 'entrée' pour envoyer un formulaire, etc.).
Les actions enregistrées apparaissent sous forme de chronologie. Si vous cliquez sur une action dans la chronologie, vous pouvez trouver plus de détails à son sujet (par ex. le type d'événement ou le sélecteur sur lequel l'action a eu lieu).
Navigation enregistrée
Chrome détectera automatiquement la navigation (par ex. les changements de page) et le laboratoire d'analyse de vitesse réutilisera cette information pour définir les étapes et leurs actions.
Cependant, s'il n'y a pas de changement de page (par ex. : "Ajouter au panier", ou navigation SPA), Chrome ne créera pas la mise en œuvre appropriée pour le laboratoire d'analyse de vitesse, et toutes les actions seront dans la même étape.
Vous pouvez forcer l'enregistreur à diviser votre scénario en plusieurs étapes en cliquant sur 'Ajouter des événements affirmés'.
Importer votre enregistrement et créer un scénario
Étape 1 : Importer votre enregistrement
1. Accédez à ‘Laboratoire d'analyse de vitesse’ et sélectionnez ‘Scénarios’.
2. Cliquez sur le bouton ‘Importer depuis l'enregistreur Chrome’.
3. Localisez et sélectionnez le fichier JSON que vous avez exporté, puis téléchargez-le.
4. Une fois téléchargé, toutes les actions qui n'ont pas pu être importées seront affichées à l'écran.
Types d'actions importées
Notez que seules les actions suivantes de l'enregistreur Chrome peuvent être importées dans le laboratoire d'analyse de vitesse :
| Actions de l'enregistreur Chrome | Types d'actions équivalents du laboratoire d'analyse de vitesse |
| Naviguer | Accès direct à la page |
| Cliquer | Clic sur l'élément |
|
Changer |
Remplir l'entrée |
Étape 2 : Examiner et affiner votre scénario
Avant d'exécuter votre scénario, vous devez agir et examiner ce qui suit :
- Renommer les étapes et actions : utilisez une convention de nommage qui est facile à comprendre pour vous et votre équipe
- Diviser les étapes si nécessaire : Chrome Recorder ne crée des “étapes” que lorsqu'il y a un changement de page (donc la navigation SPA ne sera pas détectée). Pour la plupart des scénarios, il peut être nécessaire de diviser certaines étapes importées en plusieurs, et de prêter une attention particulière aux actions définies comme actions enregistrées.
-
Supprimer les actions ‘Remplir le champ’ inutiles :
- Lors de l'enregistrement, vous avez probablement cliqué dans le champ de saisie avant de le remplir, ce qui a entraîné l'apparition d'une action de clic dans le scénario. Vous pouvez supprimer cette action, car l'action ‘Remplir le champ’ effectue déjà un clic à l'intérieur du champ de saisie.
- Le Chrome recorder a peut-être enregistré plusieurs actions pour une seule saisie au clavier. Cela se produit généralement lorsque vous tapez les premières lettres en majuscules, par exemple ; “HEllo” génère généralement une action contenant "HE" et une action contenant "HEllo". Vous devez supprimer les actions non pertinentes de votre scénario.
- Ajouter des actions ‘vérifier’ si nécessaire : Par défaut, il n'y a pas d'actions ‘vérifier’ lorsque vous importez un scénario. Les vérifications vous permettent de vérifier que la page est dans l'état attendu et de générer, à l'exécution, des avertissements si ce n'est pas le cas.
-
Modifier la configuration du scénario : Vérifiez et mettez à jour l'emplacement et la bande passante selon vos préférences.
- L'emplacement sera le même que le dernier scénario créé, ou si aucun, alors ‘France’ par défaut.
- La bande passante par défaut est la première de l'emplacement/appareil sélectionné.
En savoir plus sur la gestion des étapes et des actions ici.
Actions supplémentaires, le cas échéant :
- Ajouter des actions ‘défilement’ : Le Chrome recorder ne capture pas les actions de défilement. Si votre scénario doit interagir avec des éléments chargés de manière paresseuse, vous devrez les ajouter manuellement.
- Sites web utilisant shadowDOM : Speed Analysis ne prend en charge que les sélecteurs XPATH et CSS. Pour shadowDOM, vous devrez mettre à jour les sélecteurs pour utiliser le mot-clé ::shadowRoot:: comme illustré ci-dessous :