Comment utiliser la carte de stabilité
StableHTMLFinder compare plusieurs chargements et affiche les éléments et caractéristiques restés stables. Les utilisateurs avancés peuvent ainsi créer des sélecteurs sans dépendre de classes, d’ID ou de structures variables.
Page StableHTMLFinder Installer StableHTMLFinder depuis le Chrome Web Store
Scénario habituel
- Ouvrez la page contenant l’élément recherché.
- Choisissez le nombre de chargements. Deux suffisent généralement pour un contrôle rapide ; davantage améliore la précision.
- Lancez l’analyse. Après chaque chargement, l’extension attend la durée définie pour laisser la page construire son contenu normal.
- Trouvez l’élément en développant les branches ou avec la recherche.
- Ouvrez le menu ⋮ sur le nœud voulu, lisez la description des caractéristiques et copiez le sélecteur CSS ou la règle BlockIt.
- Collez le résultat dans le champ BlockIt correspondant et testez-le sur la page.
Plus il y a de chargements, moins un hasard risque d’être pris pour une caractéristique stable. Deux lettres d’un ID dynamique peuvent coïncider deux fois, mais rarement sur plusieurs chargements.
Comment lire la carte de stabilité
Chaque ligne représente un élément HTML. L’indentation suit la structure confirmée : les éléments décalés descendent de l’élément supérieur. La carte n’affiche que les caractéristiques stables dans tous les chargements. Une classe, un attribut ou une branche absente peut simplement avoir varié.
<div>,<a>,<section>— nom de balise stable.id="menu"— le nom et la valeur complète de l’attribut correspondent à chaque chargement.data-*,*-label,*test*— seule une partie du nom est stable : il commence pardata-, se termine par-labelou contienttest.id^="prefix"— la valeur de l’attribut commence par le texte indiqué ;id$="suffix"— se termine par ce texte ;id*="part"— le contient. Le signe=sans^,$ou*indique une correspondance exacte.- Un nom d’attribut sans valeur signifie que la présence de l’attribut est stable, mais que sa valeur a changé ou n’a pas été confirmée.
class(3 classes) signifie que le nombre de classes est stable malgré des noms ou une valeur complèteclass.- Le texte à droite des attributs — texte propre stable de l’élément. Le bouton « développer » l’affiche en entier.
iframe,iframe documentet#shadow-rootmarquent les limites des parties imbriquées spéciales. Leur contenu continue dans une branche distincte.<...>indique une partie variable ou appariée avec incertitude. Un fragment stable confirmé peut réapparaître dessous.
Les lignes vertes sont confirmées. Le vert clair indique une correspondance probable ou un fragment stable après une zone variable. Le contour orange marque les résultats, le plus vif indique le résultat actuel.
Après avoir sélectionné ⋮ la description peut afficher d’autres caractéristiques confirmées : nombres d’attributs et de classes, texte propre, position, numéro de résultat et relations avec parents, ancêtres, enfants, descendants ou voisins. Elles peuvent préciser le résultat même sans étiquette sur la ligne.
Rechercher dans la carte
Le champ recherche le texte affiché, les balises, attributs, valeurs et textes d’éléments. Vous pouvez aussi coller du HTML des DevTools. Un sélecteur CSS est évalué sur le dernier instantané et met en évidence les éléments liés.
Les flèches permettent de passer d’une correspondance à l’autre. Le reste de l’arbre reste visible pour examiner parents et descendants.
Sélecteur CSS ou règle BlockIt ?
Préférez un sélecteur CSS fondé sur des caractéristiques claires et durables : ID stable, nom d’attribut, valeur constante ou structure nette. Le CSS standard est plus simple et généralement plus rapide.
Utilisez une règle BlockIt lorsque CSS ne suffit pas, par exemple pour le nombre de classes ou d’attributs, les noms dynamiques, le texte propre ou la position d’un résultat. Ces règles sont plus puissantes mais parfois plus lentes.
La carte génère automatiquement des propositions, mais cette fonction évolue encore. Vérifiez-les et lisez leur description. Un avertissement en gras signifie que l’unicité n’a pas pu être confirmée.
Pourquoi le dépôt source n’est pas public
L’extension aide à comprendre les balisages changeants. Un dépôt public détaillant les algorithmes faciliterait le contournement intentionnel de la carte ; le code source n’est donc pas public. Cela ne remplace pas l’examen du Chrome Web Store et ne garantit pas un secret technique total.
Lien avec BlockIt
StableHTMLFinder trouve des caractéristiques durables ; BlockIt applique la règle et masque ou supprime les éléments correspondants. Ensemble, ils aident quand un sélecteur des DevTools cesse de fonctionner après actualisation.
BlockIt est une extension distincte et n’est pas nécessaire pour créer la carte.