Automatiser la connexion, puis capturer

Objectif : un appel API, une fidélité navigateur totale

Beaucoup d’équipes maintiennent des scripts Puppeteer fragiles uniquement pour se connecter et prendre une capture d’écran. ScreenshotCenter regroupe cela dans des étapes d’automatisation déclaratives exécutées dans des navigateurs gérés : vous décrivez clics, saisies, attentes et navigations ; la plateforme les enchaîne puis déclenche la capture. Voici un schéma fiable — automatiser la connexion, puis capturer — et les cas où l’humain reste dans la boucle.

Étape par étape : structurer l’automatisation

Partez de la page où l’utilisateur commence l’authentification — souvent /login ou une page marketing avec un bouton « Connexion ». Enchaînez grossièrement :

1. Navigation (implicite dans l’URL de base) ou étape explicite si plusieurs domaines.
2. Attente du champ identifiant : les SPA montent souvent le formulaire après chargement des bundles.
3. Saisie dans les champs ; privilégiez des sélecteurs stables (name, data-testid, identifiants ciblés).
4. Clic sur le contrôle d’envoi ; évitez les coordonnées, fragiles en responsive.
5. Attente d’un sélecteur post-login prouvant le chargement du socle (menu, avatar, grille principale).
6. Défilement ou clics supplémentaires pour atteindre l’onglet ou la modale visée avant l’obturateur.

Le panorama produit des interactions se trouve sous Interactions sur la page ; le positionnement plus large sur Automatisation.

Temporalisation et SPA capricieuses

Les écrans de connexion aiment les animations. Un sleep fixe de 500 ms peut suffire en recette et échouer en production. Préférez attendre des sélecteurs avec délai maximal, puis une courte latence de rendu avant capture pour laisser les graphiques se peindre. Si des XHR partent après le montage, combinez attente sur sélecteur et disparition d’un indicateur de chargement.

2FA et CAPTCHA

Les OTP temporels (TOTP) peuvent être automatisés si la politique autorise un générateur alimenté par coffre — ne versionnez jamais les graines. Les MFA par SMS ou push se prêtent rarement à des jobs API sans surveillance : préférez des sessions transportées par cookies issues d’un flux supervisé, ou des comptes de service exemptés de MFA selon les règles de votre IdP.

Les CAPTCHA visent à bloquer les robots : il n’est ni éthique ni fiable de les contourner par automation. S’ils apparaissent après une connexion scriptée, basculez vers des cookies issus d’une session légitime.

Exemple de charge utile JSON minimale

{
  "url": "https://app.example.com/login",
  "delay": 1200,
  "steps": [
    { "action": "wait", "selector": "#email", "timeout": 15000 },
    { "action": "type", "selector": "#email", "text": "monitoring@example.com" },
    { "action": "type", "selector": "#password", "text": "${SECRET}" },
    { "action": "click", "selector": "button[type='submit']" },
    { "action": "wait", "selector": "[data-app='loaded']", "timeout": 60000 },
    { "action": "click", "selector": "a[href='/reports']" },
    { "action": "wait", "selector": ".report-table", "timeout": 30000 }
  ]
}

Remplacez l’injection ${SECRET} par votre gestionnaire de secrets à l’exécution.

Exemple d’orchestration depuis Node.js

async function captureApresConnexion() {
  const body = {
    url: "https://app.example.com/login",
    delay: 1200,
    steps: [
      { action: "wait", selector: "#email", timeout: 15000 },
      { action: "type", selector: "#email", text: process.env.MON_USER },
      { action: "type", selector: "#password", text: process.env.MON_PASS },
      { action: "click", selector: "button[type='submit']" },
      { action: "wait", selector: "[data-app='loaded']", timeout: 60000 },
    ],
  };
  const r = 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(body),
  });
  if (!r.ok) throw new Error(await r.text());
  return r.json();
}

Déboguer les échecs

Si une étape échoue, raccourcissez la chaîne : validez chaque sélecteur dans les devtools avec le même viewport et la même locale que l’API. Comparez les horodatages pour voir si l’attente a expiré avant l’hydratation de la SPA.

Lots, remises stockage et corrélation

Après une connexion réussie, vous pouvez enchaîner plusieurs URL dans un lot ou une courte série d’appels. Vérifiez si la plateforme réutilise le même contexte navigateur et le même jar entre captures ; sinon, amortissez le coût en authentifiant une fois en amont et en réutilisant le matériel de session que vous contrôlez. Lorsque les fichiers partent vers un stockage objet ou un drive SaaS, préfixez les chemins avec locataire, environnement et date afin qu’un échec de login en recette n’écrase pas un artefact de production au même motif de nom.

Conclusion

L’automatisation déclarative de la connexion excelle pour les outils internes au balisage stable et aux politiques qui autorisent des comptes sans intervention. Lorsque la MFA ou l’anti-bot intervient, raccourcissez les scénarios et appuyez-vous sur les cookies. Lisez Automatisation pour le contexte produit et Interactions sur la page pour l’articulation avec défilement, capture d’élément et traitements par lots.