TestID Hunter : l'extension Chrome qui transforme votre QA en 5 clics

Ajouter des data-testid stables sur un projet existant, c'est souvent fastidieux : on ouvre DevTools, on cherche le bon sélecteur, on regarde si l'élément est interactif, on rédige un ticket pour les devs. TestID Hunter automatise tout ça. Voici comment ça marche, en 4 étapes.

1. Pourquoi on a créé cette extension

Sur la majorité des projets que nous accompagnons en QA, le constat est le même : les data-testid manquent à 70% sur les éléments réellement testés. Pas par mauvaise volonté - juste parce que personne n'a le temps de cartographier tous les inputs, boutons et formulaires d'un site complet.

Le résultat : des tests Playwright qui s'appuient sur des sélecteurs CSS fragiles, qui cassent au moindre refacto, et qui font perdre des heures à toute l'équipe. Notre article sur les data-testid explique en détail pourquoi c'est un problème.

TestID Hunter répond à une question simple : quels éléments de mon site n'ont pas de sélecteur stable, et que faudrait-il ajouter ? L'extension audit votre page en temps réel, classe chaque élément interactif, et génère un ticket prêt à coller dans Jira ou Linear.

2. Étape 1 - Démarrer une session de capture

Une fois l'extension installée, un panneau flottant apparaît sur n'importe quel site. Vous nommez la session (par exemple signup-flow) et vous cliquez sur Start Recording.

L'option Skip solid elements permet d'ignorer les éléments qui ont déjà un sélecteur stable - utile si vous auditez un projet partiellement instrumenté et que vous voulez vous concentrer sur les manques.

3. Étape 2 - Enregistrer le parcours utilisateur

Vous naviguez sur votre site comme un utilisateur normal. À chaque clic, hover ou saisie, l'extension capture l'élément interagi et calcule la qualité de son sélecteur en temps réel.

Chaque élément reçoit un rang :

• Solid - l'élément a déjà un data-testid, un id stable ou un attribut aria-* exploitable.
• Weak - aucun attribut stable, le seul sélecteur disponible est un chemin CSS fragile (par exemple #registrationForm > div:nth-of-type(1) > div:nth-of-type(3) > div > label).

Le score se calcule à la volée, vous voyez immédiatement où sont les zones de fragilité dans votre interface.

4. Étape 3 - Audit consolidé des sélecteurs

Une fois la session arrêtée, TestID Hunter agrège tous les éléments capturés dans un tableau récapitulatif, avec un screenshot des pages visitées sur la droite.

Pour chaque ligne, vous voyez :

• Element - tag HTML et texte associé (par exemple <label> "Téléphone").
• Rank - Solid ou Weak, code couleur immédiat.
• Current selector - le sélecteur actuel le plus fiable trouvé (CSS, XPath ou DOM path).
• Action - "ok" si l'élément est déjà bien instrumenté, ou + data-testid avec une suggestion de nom.

5. Étape 4 - Export du ticket markdown

Le bouton Copy markdown génère un ticket complet, prêt à coller dans Jira, Linear, GitHub Issues ou Notion. Pour chaque élément faible, vous obtenez :

• Le tableau récapitulatif en markdown.
• Le détail technique : tag HTML, texte, sélecteur CSS, XPath, DOM path, label.
• Une thumbnail de l'élément concerné (capturée automatiquement) à coller juste en dessous.
• Le snippet HTML avec le data-testid recommandé, prêt à appliquer dans le code.

6. Pourquoi pas juste utiliser Chrome DevTools ou le Recorder ?

Bonne question, qu'on nous pose souvent. Voici la différence :

DevTools et Chrome Recorder sont d'excellents outils pour développer ou générer un test. TestID Hunter est conçu pour auditer et prioriser le travail d'instrumentation.

7. Installer TestID Hunter

L'extension est en accès anticipé pour les clients Prod Watch et leur équipe technique. On l'utilise nous-mêmes en interne sur tous les projets que nous auditons, et on l'a packagée pour qu'elle soit utilisable par n'importe quel dev ou QA.

Pour obtenir un accès, contactez-nous - on vous envoie le lien d'installation et un guide de démarrage de 5 minutes.