Audit de formulaire et données de test

Le rôle Développeur de WTFAA propose deux actions pour les formulaires. Audit du formulaire examine la structure des formulaires de la page courante. Remplir des données de test propose des valeurs fictives pour les champs visibles et ne les inscrit dans la page qu'après votre confirmation.

Ce guide explique ce que ces deux actions lisent sur la page, ce qu'elles renvoient et ce que l'étape de remplissage ne fait pas. Si WTFAA n'est pas encore configuré, commencez par Premiers pas. Pour un aperçu des trois rôles, voir Rôles Lecteur, Designer et Développeur.

Ce que WTFAA lit dans le formulaire

Les deux actions lisent la structure du formulaire localement, dans l'onglet actif :

Seuls les éléments <form> contenant au moins deux contrôles sont collectés. Les formulaires masqués par un style inline sont ignorés, et les champs situés hors d'un élément <form> ne sont pas inclus.
Pour chaque formulaire : son titre ou sa légende, le texte contenu dans le formulaire, son URL d'action et sa méthode.
Pour chaque champ : balise, type, name, id, libellé, placeholder, caractère obligatoire et valeur actuelle.
Les champs type="hidden" et ceux masqués par un display: none inline ne sont pas collectés du tout.
L'URL et le titre de la page, ainsi qu'un court résumé des signaux frontend détectés sur la page.

Chrome n'autorise pas les extensions sur les pages restreintes comme les pages chrome:// ou le Chrome Web Store ; ces actions n'y fonctionnent donc pas.

Étape 1 : vérifier l'aperçu d'envoi

Chaque action ouvre d'abord Vérifier avant envoi. Pour une requête de formulaire, la fenêtre affiche l'URL et le titre de la page, le nombre de formulaires et de champs, le modèle et le mode.

La section Masquage local indique ce que le filtre local a trouvé. Les champs de mot de passe y figurent toujours. Un champ est traité comme champ de mot de passe si son type est password ou si son name, son id ou son libellé contient "password", "passcode" ou "pin". Lorsque Utiliser le contexte filtré localement est activé, leurs valeurs sont remplacées par [REDACTED_PASSWORD] avant l'envoi. L'option s'active automatiquement dès que le filtre trouve quelque chose ; si vous la désactivez, les valeurs non filtrées sont envoyées.

Cliquez sur Envoyer à l'IA pour continuer, ou sur Annuler pour arrêter. Les options de l'aperçu sont décrites dans Ce qui est envoyé à l'IA.

Étape 2 : lancer l'audit du formulaire

Ouvrez la page qui contient le formulaire.
Ouvrez le panneau latéral de WTFAA et passez au rôle Développeur.
Cliquez sur Audit du formulaire.
Vérifiez l'aperçu et cliquez sur Envoyer à l'IA.

Le rapport comporte trois parties :

Synthèse des champs : un tableau indiquant pour chaque champ le type, le libellé, le caractère obligatoire et la validation.
Dépendances : la logique conditionnelle entre les champs.
Problèmes potentiels : les problèmes visibles d'ergonomie, de libellés, de champs obligatoires et de validation côté client.

L'audit ne tire la validation que des attributs HTML visibles, des indications côté client, des états d'erreur affichés et des relations entre champs. Il ne déduit pas les règles de validation côté serveur et signale les règles backend inconnues comme inconnues.

Étape 3 : générer des valeurs avec Remplir des données de test

Sur la même page, cliquez sur Remplir des données de test.
Vérifiez l'aperçu et cliquez sur Envoyer à l'IA.
Le modèle répond par une courte note et une seule action JSON structurée, qui associe un sélecteur CSS et une valeur à chaque champ. La requête demande au modèle d'utiliser des données réalistes mais fictives, de privilégier des sélecteurs fondés sur l'id ou le name du champ et de n'inclure que les champs visibles du contexte de formulaire.
Une fois la réponse terminée, WTFAA affiche une carte 💡 Action suggérée. Elle indique le nombre de champs à remplir et liste chaque sélecteur avec sa valeur sous Champs à vérifier avant remplissage.

Étape 4 : vérifier les champs et confirmer

Vérifiez chaque ligne de la carte. Rien n'est écrit dans la page tant que vous n'avez pas cliqué sur Exécution en un clic.

Après le clic, WTFAA remplit les champs dans l'onglet actif de la fenêtre courante et met brièvement en surbrillance chaque champ rempli. Gardez l'onglet du formulaire actif au moment du clic. Les sélecteurs qui ne correspondent à rien sur la page sont ignorés.

La carte ne permet pas de modifier ou de retirer une ligne. Si une ligne ne doit pas être remplie, n'exécutez pas l'action : demandez de nouvelles données dans le chat ou remplissez ces champs vous-même.

Comment les valeurs sont appliquées

Champs texte et zones de texte : WTFAA définit la valeur via le setter natif du navigateur, met à jour le suivi de valeur interne de React, puis déclenche les événements focus, input, change et blur. Les champs contrôlés par React prennent ainsi en compte la nouvelle valeur.
Listes déroulantes : la valeur est comparée d'abord aux valeurs des options, puis à leur texte, et enfin utilisée comme index d'option.
Cases à cocher et boutons radio : true, 1, checked ou on coche la case ; toute autre valeur la décoche. Depuis la version 1.3.4, ces changements mettent aussi à jour l'état des formulaires contrôlés par React.

Depuis la version 1.3.2, WTFAA n'exécute plus de JavaScript généré par l'IA. L'action de remplissage n'est que des données JSON, et le code qui l'applique est intégré à l'extension.

Ce que l'étape de remplissage ne fait pas

Elle n'envoie pas le formulaire et ne clique ni sur les boutons d'envoi ni sur aucun autre bouton. Le code de remplissage se limite à définir les valeurs et à déclencher des événements de saisie. L'envoi du formulaire reste votre décision.
Les champs cachés ne sont jamais envoyés au modèle et ne figurent donc pas dans les données proposées.
La requête demande au modèle de ne pas inclure de champs cachés, de champs de mot de passe, de champs de paiement, de cases d'acceptation des conditions, de boutons d'envoi ni de contrôles destructifs, et de ne pas déclencher de paiement ni accepter de conditions. C'est une consigne donnée au modèle, pas un blocage technique. La liste des champs de la carte est votre contrôle : si elle contient une case de conditions, un champ de paiement ou un champ de mot de passe, ne l'exécutez pas.

Conseils

Utilisez Remplir des données de test sur des environnements de test ou de préproduction. Les valeurs sont fictives et ne sont pas destinées à de vrais envois.
Si l'aperçu affiche 0 formulaire, la page construit probablement son formulaire sans élément <form>, ce que WTFAA ne collecte pas.
Pour d'autres usages sur la page, voir Traduction de page ou Analyse de capture d'écran.