Système de fingerprint

Comprenez en détail comment fonctionne le système d'identification multi-stratégies d'EchoPastel

Le système de fingerprint d'EchoPastel est une technologie avancée qui garantit que vos annotations restent attachées aux bons éléments, même lorsque la page change.

Vue d'ensemble

Au lieu de s'appuyer uniquement sur un sélecteur CSS (qui peut facilement se casser), EchoPastel utilise un système de fingerprint multi-stratégies qui stocke plusieurs "empreintes" de chaque élément annoté.

Stratégies d'identification

1. Sélecteur CSS

Le sélecteur CSS traditionnel utilisant les classes et IDs de l'élément.

Avantages :

Rapide à générer
Facile à comprendre
Compatible avec les outils de développement

Limitations :

Peut se casser si les classes changent
Fragile sur du contenu dynamique
Peut être ambigu si plusieurs éléments partagent les mêmes classes

2. XPath

Un chemin XPath basé sur la structure DOM de l'élément.

Avantages :

Plus stable que le CSS
Fonctionne même si les classes changent
Basé sur la structure, pas sur les styles

Limitations :

Peut se casser si la structure DOM change
Plus complexe à générer
Peut être long pour des éléments profondément imbriqués

3. Empreinte de contenu

Une signature basée sur les caractéristiques de l'élément :

Nom de la balise : div, button, img, etc.
Attributs : id, class, data-*, aria-*, etc.
Contenu textuel : Le texte visible de l'élément
HTML interne : La structure HTML interne

Avantages :

Très robuste face aux changements de structure
Fonctionne même si l'élément est déplacé
Peut trouver des éléments similaires

Limitations :

Peut être ambigu si plusieurs éléments ont le même contenu
Sensible aux changements de texte
Plus coûteux en calcul

4. Informations de contexte

Informations sur les relations parent-enfant de l'élément :

Sélecteur du parent : Comment identifier le parent
Index parmi les frères : Position de l'élément parmi ses frères
Détection de conteneurs dynamiques : Identification des carrousels, sliders, etc.

Avantages :

Très précis pour les éléments dans des listes
Fonctionne bien avec les conteneurs dynamiques
Complète les autres stratégies

Limitations :

Peut se casser si l'ordre des éléments change
Dépend de la stabilité du parent

Cascade de résolution

Lorsqu'EchoPastel doit retrouver un élément annoté, il essaie plusieurs stratégies dans l'ordre :

Étape 1 : Sélecteur CSS

element = document.querySelector(fingerprint.css)

Si le sélecteur CSS fonctionne, l'élément est trouvé immédiatement.

Étape 2 : XPath

element = document.evaluate(fingerprint.xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)

Si le CSS échoue, on essaie le XPath qui est plus stable.

Étape 3 : Parent + Index

parent = document.querySelector(fingerprint.context.parentSelector)
element = parent.children[fingerprint.context.siblingIndex]

Si les méthodes précédentes échouent, on utilise la position relative dans le parent.

Étape 4 : Correspondance de contenu

element = findBySimilarContent(fingerprint.content)

En dernier recours, on cherche un élément avec un contenu similaire.

Robustesse face aux changements

Changements de classes

Si les classes CSS changent :

✅ Le XPath peut toujours trouver l'élément
✅ L'empreinte de contenu peut identifier l'élément
✅ Le contexte parent peut localiser l'élément

Changements de structure

Si la structure DOM change légèrement :

✅ L'empreinte de contenu peut trouver un élément similaire
✅ Le contexte parent peut localiser l'élément si le parent est stable
⚠️ L'annotation peut devenir orpheline si les changements sont trop importants

Contenu dynamique

Pour le contenu dynamique (carrousels, sliders) :

✅ Le système détecte automatiquement les conteneurs dynamiques
✅ Des observateurs spécialisés suivent les changements
✅ Les annotations sont repositionnées automatiquement

Gestion des annotations orphelines

Quand une annotation devient orpheline

Une annotation devient orpheline quand :

L'élément a été supprimé de la page
La structure a changé de manière significative
L'élément a été déplacé dans une autre partie du DOM

Comportement des annotations orphelines

Quand une annotation est orpheline :

Elle est marquée visuellement (opacité réduite, niveaux de gris)
La capture d'écran reste accessible
Vous pouvez toujours voir et répondre à l'annotation
L'annotation n'est pas perdue

Réannoter si nécessaire

Si une annotation devient orpheline :

Vérifiez la capture d'écran pour voir ce qui a été annoté
Si l'élément existe toujours sous une autre forme, réannotez-le
Utilisez l'annotation orpheline comme référence historique

Performance

Optimisations

Le système de fingerprint utilise plusieurs optimisations :

Cache des résultats : Les éléments trouvés sont mis en cache
Recherche ciblée : On ne cherche que dans les zones pertinentes
Debouncing : Les recherches sont regroupées pour éviter les calculs excessifs
Lazy loading : Les fingerprints complexes ne sont calculés que si nécessaire