Automatisieren Sie Website-Screenshots mit der PageOps Screenshot API

Einführung

Das manuelle Erstellen von Website-Screenshots ist zeitaufwändig und unzuverlässig. Für Entwickler, die Überwachungstools, visuelle Regressionstests, Systeme zur Wettbewerbsbeobachtung oder Web-Scraping-Pipelines erstellen, ist eine programmatische Möglichkeit zur Aufnahme von Website-Screenshots unerlässlich.

Mit der Screenshot API können Sie einfach eine HTTP-Anfrage senden und einen gerenderten Screenshot erhalten. Die API führt einen Headless-Browser in der Cloud aus, sodass Sie keine eigene Infrastruktur verwalten müssen.

Warum Entwickler Website-Screenshots benötigen

Automatisierte Screenshots werden in modernen Anwendungen häufig benötigt. Typische Anwendungsfälle sind:

Website-Monitoring: Regelmäßige Screenshots, um UI-Änderungen, Layoutprobleme oder Ausfallzeiten zu erkennen.
Visuelle Regressionstests: QA-Teams vergleichen Screenshots zwischen verschiedenen Deployments, um UI-Fehler zu finden.
Web Scraping und Datenpipelines: Screenshots können einfacher und zuverlässiger sein als das Parsen komplexer DOM-Strukturen.
Generierung von Social-Media-Vorschauen: Automatische Erstellung von OpenGraph-, Twitter Card- oder Linkvorschaubildern.

Wie die Screenshot API funktioniert

Die Verwendung der Screenshot API ist unkompliziert:

Senden Sie eine Anfrage mit der Ziel-URL.
Der Headless-Browser in der Cloud rendert die Seite.
Die API erfasst den Screenshot.
Sie erhalten den Screenshot oder dessen URL.

JavaScript-Beispiel

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);

cURL-Beispiel

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
  }'

Hinweis: Im synchronen Modus (mode=sync) muss fullPage false sein und timeoutMs muss zwischen 0 und 10000 ms liegen. Andernfalls schaltet der Server automatisch auf den asynchronen Modus um.

Erweiterte Screenshot-Optionen

Die Screenshot API unterstützt verschiedene erweiterte Parameter:

Ganzseitige Screenshots: Erfassen der gesamten Seite (verfügbar im asynchronen Modus).
Benutzerdefinierte Viewports: Emulieren von Desktop-, Mobil- oder Tablet-Geräten.
Wartebedingungen: Warten auf bestimmte DOM-Elemente oder Netzwerkanfragen vor der Aufnahme.
Selektor-Screenshots: Nur ein bestimmtes Element auf der Seite erfassen.
Header & Cookies: Authentifizierungs- oder Sitzungs-Cookies übergeben.
Aufnahmeverzögerung: Verwenden Sie delayMs, um eine zusätzliche Verzögerung nach dem Laden der Seite hinzuzufügen.

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

Synchrone vs. asynchrone Anfragen

Asynchroner Modus (Standard): Gibt eine jobId zurück. Danach können Sie GET /api/v1/screenshots/{jobId} abfragen, bis status=completed, failed oder expired ist.

Synchoner Modus: Die Anfrage blockiert, bis der Screenshot fertig ist (oder ein Timeout auftritt), und gibt die Screenshot-URL direkt zurück. Bei einem Timeout gibt die API status=processing zurück, und Sie können die Abfrage über den GET-Endpunkt fortsetzen.

FAQ

F1: Wie erfasse ich eine geschützte Seite?
Verwenden Sie die Parameter headers oder cookies, um Authentifizierungsinformationen zu übergeben.
F2: Kann ich den synchronen Modus für ganzseitige Screenshots verwenden?
Nein, ganzseitige Screenshots erfordern den asynchronen Modus.
F3: Wie erhalte ich den fertigen Screenshot im asynchronen Modus?
Rufen Sie GET /api/v1/screenshots/{jobId} ab, bis status=completed ist.