Capturer des pages dynamiques après clic et attente

URL statique, rendu dynamique

La barre d’adresse peut rester identique pendant que l’interface change. Les applications monopages échangent des vues côté client ; les images se chargent au scroll ; les accordéons masquent le fragment utile jusqu’au clic ; les carrousels font défiler des offres sur minuterie. Une capture prise juste après la navigation affiche souvent des squelettes, des spinners ou la mauvaise diapositive. Il faut donc amener la page dans l’état cible, puis attendre la fin du rendu — le rôle des étapes clic, attente et défilement.

SPA et contenu chargé en différé

Après la navigation, attendez un sélecteur racine signalant le montage du framework — par exemple #app avec des enfants non vides, ou un attribut de données déjà utilisé pour les tests. Défilez ensuite par paliers pour déclencher les observateurs d’intersection et charger le contenu sous la ligne de flottaison. Sans scroll, de nombreux sites ne remplissent jamais la zone à capturer.

Si l’interface est à onglets, ajoutez un clic sur le bon libellé, puis une attente sur la classe active ou l’état ARIA du panneau.

Modales, tiroirs et accordéons

Les surcouches sont souvent rendues dans un portail en fin de body. Ouvrez d’abord la modale — clic sur le déclencheur — puis attendez le sélecteur du dialogue (role="dialog" ou classe connue). Les accordéons peuvent exiger un clic par section ; insérez des attentes entre clics pour laisser finir les transitions de hauteur CSS.

Pour les carrousels : cliquez sur « suivant » jusqu’à la diapositive voulue, ou sur le point indicateur ciblé. Si le défilement est automatique, une attente par durée peut parfois cadrer l’image, mais la navigation explicite reste plus déterministe.

Délais globaux et temporisation

Deux niveaux coexistent : les attentes par étape (jusqu’au sélecteur ou timeout) et le délai de rendu global appliqué avant l’obturateur. Un léger délai global absorbe le bruit de mise en page (polices web, widgets tiers). Des délais trop longs coûtent du temps et des crédits : ajustez-les avec des données représentatives de la production.

Le détail des paramètres de temporisation se trouve dans Temporalisation des captures. Pour l’articulation avec les autres possibilités, voir Interactions sur la page.

Intégrations tierces et bannières de consentement

Les balises d’analyse, widgets de chat et plateformes de gestion du consentement modifient la hauteur de mise en page et captent le focus. Lorsque la politique le permet, acceptez ou refusez les cookies via une étape d’automatisation, puis attendez un sélecteur sur votre contenu principal plutôt que sur une iframe fournisseur hors de votre contrôle. Si une surcouche masque la zone visée, privilégiez les parcours de fermeture prévus par l’éditeur ; évitez la chirurgie DOM agressive en production sauf validation sécurité explicite.

Taille de viewport et chargement différé

Les viewports mobiles étroits peuvent laisser des cellules de grille hors de la zone observée par l’intersection observer tant que vous n’avez pas défilé. Élargissez l’écran virtuel pour diagnostiquer des vignettes manquantes, puis repassez au profil appareil cible pour la capture finale. Associez des étapes de défilement explicites aux options de viewport et de délai décrites pour l’API screenshot, afin que carrousels et mises en page « masonry » aient le temps de décoder les images avant l’obturateur.

Modèles recommandés

Scénario	Approche
Listes à défilement infini	Répéter scroll + attente de nouvelles lignes jusqu’à la ligne cible
Bibliothèques de graphiques	Attendre le conteneur + courte latence après la fin des animations
Bannières de cookies	Cliquer sur accepter si nécessaire, attendre la disparition du nœud
Héros vidéo	Pause via injection JS ou attente sur l’affiche ; éviter les images floues

Exemple : ouvrir une modale puis capturer

{
  "url": "https://marketing.example.com/tarifs",
  "delay": 600,
  "steps": [
    { "action": "wait", "selector": "button[data-open-compare]", "timeout": 20000 },
    { "action": "click", "selector": "button[data-open-compare]" },
    { "action": "wait", "selector": "[role='dialog'] .compare-table", "timeout": 15000 },
    { "action": "wait", "duration": 400 }
  ]
}

Exemple : carrousel sur une diapositive précise

const steps = [
  { action: "wait", selector: ".carousel", timeout: 20000 },
  { action: "click", selector: ".carousel__dot[data-index='2']" },
  { action: "wait", selector: ".carousel__slide--active[data-index='2']", timeout: 10000 },
  { action: "wait", duration: 300 },
];
await fetch("https://api.screenshotcenter.com/api/screenshot/create", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-API-KEY": process.env.SCREENSHOTCENTER_API_KEY,
  },
  body: JSON.stringify({
    url: "https://www.example.com/",
    delay: 500,
    steps,
  }),
});

Anti-patterns

Des pauses géantes uniformes ralentissent la chaîne tout en restant fragiles sous charge. Préférez les attentes ciblées par sélecteur. Évitez de cliquer sur des cibles en mouvement : attendez la stabilisation des classes après transition. Ne supposez pas que les sélecteurs bureau fonctionnent sous émulation mobile sans les valider sur le même profil.

En synthèse

Les pages dynamiques sont la norme ; les traiter comme des documents statiques explique tant de captures « presque justes ». Composez clics, attentes et défilements avec intention, alignez le délai global sur vos scripts tiers les plus lourds, et gardez sous la main Temporalisation des captures ainsi que Interactions sur la page lorsque vous faites évoluer la politique de capture entre environnements.