Automatiser les captures d'écran de sites web avec l'API Screenshot de PageOps

Introduction

Capturer manuellement des captures d'écran de sites web est chronophage et peu fiable. Pour les développeurs qui construisent des outils de surveillance, des tests de régression visuelle, des systèmes de suivi de concurrents ou des pipelines de web scraping, une manière programmatique de capturer des captures d'écran de sites web est essentielle.

Avec l'API de capture d'écran, vous pouvez simplement envoyer une requête HTTP et recevoir une capture d'écran rendue. L'API exécute un navigateur headless dans le cloud, vous n'avez donc pas à gérer d'infrastructure.

Pourquoi les développeurs ont besoin de captures d'écran de sites web

Les captures d'écran automatisées sont couramment requises dans les applications modernes. Les cas d'utilisation typiques incluent :

Surveillance de site web : Capturez régulièrement des captures d'écran pour détecter les changements d'interface utilisateur, les problèmes de mise en page ou les indisponibilités.
Tests de régression visuelle : Les équipes QA comparent les captures d'écran entre les déploiements pour trouver des bugs d'interface.
Web scraping et pipelines de données : Les captures d'écran peuvent être plus simples et plus fiables que l'analyse de structures DOM complexes.
Génération d'aperçus pour les réseaux sociaux : Générez automatiquement des images pour OpenGraph, les Twitter Cards ou les aperçus de liens.

Comment fonctionne l'API de capture d'écran

Utiliser l'API de capture d'écran est simple :

Envoyez une requête avec l'URL cible
Le navigateur headless cloud rend la page
L'API capture la capture d'écran
Vous recevez la capture d'écran ou son URL

Exemple en JavaScript

const response = await fetch("https://api.page-ops.com/api/v1/screenshots", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
  },
  body: JSON.stringify({
    url: "https://example.com",
    mode: "sync",
    timeoutMs: 8000,
    fullPage: false
  })
});

const data = await response.json();
console.log(data.result?.url);

Exemple avec cURL

curl -X POST "https://api.page-ops.com/api/v1/screenshots" \
  -H "Authorization: Bearer $SCREENSHOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "mode": "sync",
    "timeoutMs": 8000,
    "fullPage": false
  }'

Note : En mode synchrone (mode=sync), fullPage doit être false et timeoutMs doit être entre 0 et 10000 ms. Sinon, le serveur repassera automatiquement en mode asynchrone.

Options avancées pour les captures d'écran

L'API de capture d'écran prend en charge divers paramètres avancés :

Captures d'écran complètes (Full-page) : Capturez la page entière (disponible en mode asynchrone).
Viewports personnalisés : Émulez des appareils desktop, mobiles ou tablettes.
Conditions d'attente (Wait Conditions) : Attendez des éléments DOM spécifiques ou des requêtes réseau avant la capture.
Captures d'écran par sélecteur (Selector Screenshots) : Capturez uniquement un élément spécifique de la page.
En-têtes & Cookies : Transmettez des informations d'authentification ou des cookies de session.
Capture différée (Delay Capture) : Utilisez delayMs pour ajouter un délai supplémentaire après le chargement de la page.

{
  "url": "https://example.com/pricing",
  "selector": "#pricing"
}

Requêtes synchrones vs asynchrones

Mode asynchrone (par défaut) : Retourne un jobId, puis interrogez GET /api/v1/screenshots/{jobId} jusqu'à ce que le status soit completed, failed, ou expired.

Mode synchrone : La requête est bloquante jusqu'à ce que la capture d'écran soit prête (ou jusqu'au timeout), et retourne directement l'URL de la capture. En cas de timeout, l'API retourne status=processing, et vous pouvez continuer à interroger en utilisant l'endpoint GET.

FAQ

Q1 : Comment capturer une page protégée ?
Utilisez les paramètres headers ou cookies pour transmettre les informations d'authentification.
Q2 : Puis-je utiliser le mode synchrone pour des captures d'écran de page entière ?
Non, les captures d'écran de page entière nécessitent le mode asynchrone.
Q3 : Comment obtenir la capture d'écran finale en mode asynchrone ?
Interrogez régulièrement (poll) GET /api/v1/screenshots/{jobId} jusqu'à obtenir status=completed.