Lorsque le navigateur expose le rôle et le nom accessible d’un contrôle, commencez par ces deux informations. Inspectez une portion du DOM si vous devez retrouver un enregistrement précis. Prenez une capture récente si vous devez repérer un point sur un graphique ou voir ce qui recouvre un bouton.
Dans une discussion de la communauté Playwright, un développeur explique qu’un agent prenait le neuvième bouton Add to Cart. Le libellé était correct. Il manquait le lien avec le produit demandé. Le titre de la carte ou un identifiant stable donne à l’agent un critère qui tient même si le tri change. Tabbit Browser permet d’appliquer cette méthode dans un onglet.
À retenir
Le rôle et le nom indiquent l’action. Cherchez le contrôle dans le formulaire, la ligne ou la boîte de dialogue voulue.
Le DOM fournit les attributs. Un nœud trouvé peut encore être masqué ou désactivé.
La vision interprète l’image et peut transmettre l’action à un localisateur sémantique.
Observez à nouveau après un changement de page et vérifiez le résultat séparément du clic.
Ce que montrent les trois entrées
| Entrée | Ce qu’elle montre | Limite courante | Premier usage |
|---|---|---|---|
| Extrait du DOM | Nœuds, texte et attributs actuels | Des éléments invisibles peuvent correspondre | Retrouver une ligne par identifiant |
| Instantané d’accessibilité | Rôles, noms et certains états | Les données propres à l’application peuvent manquer | Repérer un champ ou un bouton nommé |
| Capture interprétée par vision | Position, couleur et disposition à un instant donné | La position change avec la fenêtre et la page | Voir un calque ou une marque sur un canvas |
Le DOM évolue quand JavaScript modifie le document. L’instantané d’accessibilité conserve par exemple des titres et des états sans reprendre toutes les classes CSS. La lecture et l’action restent distinctes. Un outil de contrôle de l’ordinateur peut aussi agir hors de l’onglet selon ses capacités. Instantanés ARIA · Localisateurs
Trouver le bon enregistrement
Si deux fiches de facture contiennent Enregistrer, repérez d’abord la fiche par son titre ou son identifiant stable. Cherchez ensuite le bouton à l’intérieur et exigez une seule correspondance. Dans un autre fil Playwright, un utilisateur décrit un menu personnalisé sans rôle exploitable et envisage un identifiant de test. Si vous gérez l’application, vérifiez le libellé et l’usage au clavier. Sur un site tiers, inspectez le déclencheur et le menu ouvert.
Playwright vérifie notamment qu’un bouton est visible, stable, actif et en mesure de recevoir le clic. Une boîte de dialogue peut intercepter le pointeur. Consultez le diagnostic des boutons bloqués avant de réessayer. Conditions d’action de Playwright
Inspecter une cible dessinée
Le DOM peut contenir un canvas unique alors que la capture montre deux séries distinctes. Cherchez aussi une légende accessible, des commandes clavier ou un export. Canvas accepte un contenu de remplacement selon l’implémentation. Une image peut révéler quel menu est ouvert, puis l’agent sélectionne un élément par rôle. Si la commande n’existe qu’en pixels, un geste peut être nécessaire. Playwright exprime la position de la souris en pixels CSS de la zone visible. Tenez compte du recadrage et de l’échelle. Reprenez une capture si une bannière déplace le graphique. Référence canvas · API souris
Combiner les deux dans un onglet Tabbit
Pour enregistrer un code article puis sélectionner une couleur, repérez d’abord Item code et Save item par leur nom. Vérifiez le code enregistré. Prenez ensuite une image récente du sélecteur dessiné et contrôlez la couleur affichée après l’action.
Le démarrage officiel de Tabbit CLI décrit l’accès aux onglets. Le guide CLI explique les tâches et les reçus. Pour MCP, consultez le projet Playwright MCP et le guide de démarrage. Ces outils déterminent comment l’agent se connecte. La page et la tâche déterminent ce qu’il doit lire. Options de contrôle du navigateur
Choisir l’action suivante
| Situation | Étape suivante | Preuve attendue |
|---|---|---|
| Plusieurs boutons portent le même nom | Limiter la recherche à la fiche voulue | Une correspondance dans la bonne fiche |
| L’instantané omet une commande visible | Lire le DOM local et prendre une capture si nécessaire | Une cible identifiable |
| La mise en page a changé | Observer de nouveau | Position actuelle et bon objet |
| Le clic aboutit sans changement visible | Lire l’état avant de recommencer | Résultat confirmé, échec connu ou révision |
Une observation ciblée réduit ce que l’agent doit lire. Pour un traitement récurrent, incluez les reprises et les vérifications dans le coût par réussite. Si le travail consiste à extraire des données, examinez les interfaces API ou MCP. Indiquez la cible et le résultat attendu dans le prompt puis fixez un point d’arrêt avec la liste de vérification. Tabbit convient lorsque ces opérations se déroulent dans l’onglet déjà ouvert.
Questions fréquentes
Un instantané d’accessibilité correspond-il au DOM ?
Le DOM contient les nœuds et les attributs. L’instantané présente des rôles, noms et états calculés. Il peut omettre les identifiants de l’application et la position.
Un agent qui lit le DOM peut-il agir sur un canvas ?
Il peut trouver le canvas et les contrôles exposés par l’application. Pour une cible uniquement dessinée, il faut inspecter une image ou disposer d’une autre interface.
Quand reprendre une capture d’écran ?
Après un défilement, un zoom, un redimensionnement ou l’ouverture d’une boîte de dialogue si le prochain geste dépend de la position. Vérifiez aussi l’image après une modification visuelle.
La vision utilise-t-elle toujours des coordonnées ?
La vision interprète une image. Un outil hybride peut ensuite choisir un localisateur par rôle ou une commande clavier. Les coordonnées sont utiles quand la cible n’a pas d’identité exploitable.
Que vérifier après avoir cliqué sur Enregistrer ?
Lisez l’état, la valeur persistée ou la confirmation du bon enregistrement. Si le résultat reste incertain, vérifiez l’état avant de renvoyer le formulaire.
Quelle méthode essayer sur un nouveau site ?
Commencez par les rôles et les noms des contrôles. Examinez le DOM local quand plusieurs enregistrements se ressemblent et prenez une capture pour les informations visuelles.