Comment ajouter et utiliser une étape du navigateur

Prérequis

Avant d'ajouter une étape de navigateur, vous devez disposer d'un scénario de test existant.

Qu'est-ce qu'une étape de navigateur ?

Une étape de navigateur est une commande d'automatisation de navigateur explicite que vous définissez à l'aide :

une action (ce qu'il faut faire)
une description — une explication en langage naturel de l'étape
un type (comment identifier l'élément)
une valeur (le sélecteur ou la valeur proprement dite)

Utilisez-la lorsque vous avez besoin d'un contrôle total sur des pages complexes.

Quand l'utiliser

Ciblage complexe : les éléments sont difficiles à décrire en texte clair.
Structure instable : le texte et le contenu des éléments changent d'une visite à l'autre.
Chemins critiques : vous souhaitez un comportement prévisible et reproductible.

Ajouter une étape de navigateur

Ouvrez votre scénario de test.
Cliquez sur Ajouter une nouvelle étape.
Dans Type d'étape, sélectionnez Étape de navigation.

Configurez l'étape

Action : choisissez l'action à effectuer (par exemple : Cliquer, Saisir, Sélectionner, Cocher, Survoler, Faire défiler, Attendre que l'élément soit visible).
Description : ajoutez une brève explication claire et compréhensible décrivant ce que fait l'étape.
Type : sélectionnez comment l'élément est identifié — CSS, XPath, Étiquette ARIA, Texte.
Valeur : saisissez le sélecteur/la valeur correspondant(e)

Liste complète des actions des étapes de navigateur

Vous trouverez ci-dessous une référence complète de toutes les actions de navigateur disponibles, classées par catégorie.

Navigation et gestion des onglets

Ces actions contrôlent la navigation dans les pages et le comportement des onglets. Aucun sélecteur n'est requis.

Action	Code	Description
Retour	`goback`	Accéder à la page précédente dans l'historique du navigateur.
Aller en avant	`goforward`	Accéder à la page suivante dans l'historique du navigateur.
Recharger	`reload`	Recharger la page actuelle.
Passer à l'onglet	`switchtotab`	Passer à un onglet déjà ouvert dans le navigateur. Nécessite une valeur (index d'onglet ou identifiant).
Ouvrir un nouvel onglet	`opennewtab`	Ouvrir un nouvel onglet du navigateur. Vous pouvez éventuellement fournir une URL comme valeur.

En attente

Ces actions suspendent l'exécution jusqu'à ce qu'une condition soit remplie. Utile pour les pages dynamiques.

Action	Code	Description
Attendre l'expiration	`wait`	Suspend l'exécution pendant une durée spécifiée (en ms). Nécessite une valeur (délai d'expiration en millisecondes). Aucun sélecteur n'est nécessaire.
Attendre le sélecteur	`waitforselector`	Attendre qu'un élément correspondant au sélecteur apparaisse dans le DOM. Nécessite un sélecteur.
Attendre l'état de chargement	`waitforloadstate`	Attendre que la page atteigne un état de chargement spécifique (par exemple, `load`, `domcontentloaded`, `networkidle`). Nécessite une valeur. Aucun sélecteur n'est nécessaire.
Attendre l'URL	`waitforurl`	Attendre que l'URL de la page corresponde à un modèle spécifié. Nécessite une valeur (URL ou modèle d'URL). Aucun sélecteur n'est nécessaire.

Interaction avec les éléments

Ces actions interagissent avec les éléments de la page. Toutes nécessitent un sélecteur, sauf indication contraire.

Action	Code	Description
Clic	`clic`	Cliquez sur un élément. Nécessite un sélecteur.
Double-clic	`dblclick`	Double-cliquez sur un élément. Nécessite un sélecteur.
Clic droit	`rightclick`	Clic droit (menu contextuel) sur un élément. Nécessite un sélecteur.
Clic du milieu	`middleclick`	Clic central sur un élément (ouvre généralement le lien dans un nouvel onglet). Nécessite un sélecteur.
Clic à	`clickat`	Cliquez à des coordonnées spécifiques de la page. Nécessite des valeurs de coordonnées x et y à la place d'un sélecteur.
Survoler	`hover`	Survolez un élément avec la souris. Nécessite un sélecteur.
Drag	`drag_drop`	Faites glisser un élément et déposez-le sur un autre. Nécessite un sélecteur source et un sélecteur cible/des coordonnées comme valeur.

Saisie et sélection

Ces actions permettent de remplir ou de modifier des champs de formulaire. Elles nécessitent toutes un sélecteur et, en général, une valeur.

Action	Code	Description
Remplir	`input`	Saisit du texte dans un champ de saisie (efface d'abord le contenu existant). Nécessite un sélecteur et une valeur (texte à saisir).
Effacer	`clear`	Efface le contenu d'un champ de saisie. Nécessite un sélecteur.
Press	`press`	Appuyer sur une touche ou une combinaison de touches du clavier (par exemple, `Entrée`, `Tab`, `Ctrl+A`). Nécessite une valeur (nom de la touche). Le sélecteur est facultatif (cible l'élément actif s'il est omis).
Sélectionner	`sélectionner`	Sélectionnez une option dans une liste déroulante `<select>`. Nécessite un sélecteur et une valeur (valeur de l'option ou libellé).
Ouvrir le menu déroulant	`open_dropdown`	Ouvrir un élément de menu déroulant sans sélectionner. Nécessite un sélecteur.
Cocher	`check`	Cochez une case à cocher ou un bouton radio. Nécessite un sélecteur.
Désélectionner	`décocher`	Désélectionner une case à cocher. Nécessite un sélecteur.
Sélectionner du texte	`sélectionner du texte`	Sélectionner/mettre en surbrillance du texte dans un élément. Nécessite un sélecteur.

Focalisation et état

Ces actions gèrent le focus et la visibilité des éléments.

Action	Code	Description
Focus	`focus`	Place le focus sur un élément. Nécessite un sélecteur.
Flou	`blur`	Retirer le focus d'un élément. Nécessite un sélecteur.
Faire défiler jusqu'à l'affichage	`scroll`	Faire défiler la page jusqu'à ce que l'élément soit visible dans la fenêtre d'affichage. Nécessite un sélecteur.

Capture d'écran et exportation (NOUVEAU)

Il s'agit de fonctionnalités récemment ajoutées qui vous permettent de capturer des instantanés visuels et d'exporter le contenu d'une page directement à partir d'une étape du navigateur.

Action	Code	Description
Capture d'écran (fenêtre d'affichage)	`screenshot_viewport`	Capture une capture d'écran de la fenêtre d'affichage actuelle du navigateur. Aucun sélecteur n'est requis.
Capture d'écran (page entière)	`screenshot_full`	Capture une capture d'écran de la page entière (y compris le contenu situé sous le pli). Aucun sélecteur requis.
Exportation au format PDF	`pdf_export`	Exportez la page actuelle au format PDF. Chrome/Chromium uniquement. Aucun sélecteur requis.
Extraction de fichier	`extract_file_from_page`	Extraire des données structurées (par exemple, au format CSV) du contenu de la page. Prend en charge des options telles que la suppression des colonnes vides. Aucun sélecteur requis.

Comment obtenir un sélecteur

Utilisation des outils de développement du navigateur

Utilisez cette méthode lorsque votre type de sélecteur est CSS ou XPath:

Cliquez avec le bouton droit sur l'élément et sélectionnez Inspecter.
Dans le panneau Éléments, cliquez avec le bouton droit sur le code HTML mis en surbrillance.
Sélectionnez Copier → Copier le sélecteur (CSS) ou Copier → Copier l'XPath complet.
Collez-le dans le champ Sélecteur de votre étape Navigateur.

Si votre type de sélecteur est Étiquette ARIA ou Texte:

Étiquette ARIA : saisissez la valeur de l'attribut aria-label de l'élément (vous pouvez la vérifier dans le code HTML).
- Exemple : si l'élément contient <button aria-label="Submit">, utilisez Submit.
Texte : saisissez le texte visible qui apparaît à l'intérieur de l'élément.
- Exemple : pour un bouton affichant « Connexion », utilisez Connexion.

Conseils pour des sélecteurs fiables

Privilégiez les sélecteurs CSS plutôt que XPath lorsque cela est possible.
Ciblez des attributs stables (par exemple, data-testid, aria-label, les noms de classes persistants).
Évitez les identifiants dynamiques ou les chemins profondément imbriqués susceptibles de changer.
Assurez-vous que le sélecteur soit unique à un élément.

Autres articles connexes qui pourraient vous être utiles :

→ Comment générer des étapes de test ?

→ Étapes de démontage dans Thunders