Fidélité DOM Mobile

Que fait Fidélité DOM Mobile ?

Utilisez cette compétence avant d'écrire la composition. La source de vérité est le site réel dans un viewport mobile, pas une capture d'écran statique.

Workflow

1. Ouvrez l'URL dans un navigateur avec un viewport mobile.
2. Définissez un point de rupture de référence, généralement 390x844, 393x852, 414x896, ou proche.
3. Inspectez les sections du DOM qui apparaîtront dans la vidéo.
4. Extrayez le texte, les href, src, alt, les classes principales, les rôles et les états interactifs.
5. Mappez les coordonnées de clic uniquement après avoir confirmé que le composant est visible.
6. Listez les états pertinents : avant clic, après clic, après défilement, panier, paiement ou confirmation.

MCP DevTools / console

Lorsque MCP DevTools est disponible, utilisez-le pour interroger le DOM réel via la console. Exemples de données à extraire :

const el = document.querySelector("SECTION_SELECTOR");
const rect = el.getBoundingClientRect();
({
  text: el.innerText,
  rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
  classes: el.className,
  images: [...el.querySelectorAll("img")].map((img) => ({
    src: img.currentSrc || img.src,
    alt: img.alt,
    width: img.naturalWidth,
    height: img.naturalHeight,
  })),
  links: [...el.querySelectorAll("a")].map((a) => ({
    text: a.innerText,
    href: a.href,
    classes: a.className,
  })),
});

Pour valider un clic :

const target = document.querySelector("TARGET_SELECTOR");
const r = target.getBoundingClientRect();
({ centerX: r.x + r.width / 2, centerY: r.y + r.height / 2, visible: r.width > 0 && r.height > 0 });

Utilisez ces valeurs pour définir le timing du curseur et sa position dans la composition.

Ce qu'il faut capturer

• Noms exacts des produits.
• Avantages exacts tels qu'ils apparaissent.
• Prix et conditions.
• Boutons et appels à l'action.
• Images principales.
• Cartes du carrousel.
• Sélecteurs stables pour la validation des clics.

Règles

• N'inventez pas de copie si le DOM fournit le texte.
• Ne cliquez pas sur des composants avant leur apparition dans la chronologie.
• N'utilisez pas de captures d'écran comme seule source de structure.
• Ne publiez pas de captures, cookies, journaux ou fichiers d'inspection.
• Si le site utilise le chargement différé, attendez que les images soient chargées avant d'extraire src.

Transmission attendue

Produisez une carte courte :

Scène : Carrousel de produits
Sélecteur : .rf-cards-scroller-platter
Visible à : 2.0s
Action : défilement horizontal
Cible du clic : lien de la carte, centre x/y après retour de la carte au centre
Texte requis : ...
Images requises : ...

Utilisez cette carte pour guider la composition HyperFrames.

Critères de fidélité

Considérez la section comme fidèle uniquement lorsque :

• le texte correspond au DOM original ;
• les images sont les mêmes ou des équivalents autorisés ;
• l'espacement suit la hiérarchie mobile ;
• les cartes, boutons et libellés utilisent le même ordre visuel ;
• le clic se produit à l'intérieur de la boîte englobante réelle du composant ;
• le composant est rendu avant l'action du curseur.