Comment enregistrer et importer des scénarios via votre navigateur web

Utilisez Chrome Recorder (é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 le laboratoire d'analyse de vitesse.

Créer et exporter un enregistrement

Étape 1 : Ouvrir la console de développement Chrome

1. Ouvrez le site web que 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 photo de 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éez votre enregistrement

1. Dans la fenêtre qui s'ouvre, sélectionnez ‘Créer un nouvel enregistrement’.

2. Entrez le nom de votre enregistrement. Notez que le nom de votre enregistrement deviendra le nom du fichier lorsque vous l'exporterez et le nom de votre scénario dans le laboratoire d'analyse de vitesse.

3. Sous ‘Types de sélecteurs à enregistrer’, sélectionnez soit ‘CSS’ soit ‘XPath’ selon votre préférence. Notez que le type de sélecteur que vous choisissez sera celui utilisé dans le laboratoire d'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 : Exportez 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 Speed Analysis Lab, vous devez donc uniquement utiliser des clics (pas de tabulations, pas de touches haut, pas de touche ‘entrée’ pour soumettre 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 Speed Analysis Lab 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 Speed Analysis Lab, 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 à ‘Speed Analysis Lab’ 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 Speed Analysis Lab :

É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 soit 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 peut avoir 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 ‘scroll’ : Le Chrome recorder n'enregistre 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 :