.png)
.svg){kind=icon}
14. März 2025
•
9
min lesen
Screenshots mit Puppeteer erstellen: Ganzseitige Aufnahmen, Elemente und Größenoptimierung
Georgi Miloradowitsch
Forscher, Texter und Usecase-Interviewer
Puppenspieler ist eine Node.js Bibliothek, die die Browser-Automatisierung vereinfacht und Aufgaben wie das Erstellen von Screenshots schnell und effizient macht. Ob Sie ganzseitige Aufnahmen, Schnappschüsse bestimmter Elemente oder optimierte Bilder benötigen, Puppenspieler bietet flexible Optionen mit minimalem Code. Hier ist, was Sie tun können mit Puppenspieler:
await page.screenshot({ path: 'screenshot.jpg', fullPage: true });
Egal, ob Sie als Entwickler Websites testen oder Fehler dokumentieren, Puppeteer optimiert den Prozess mit leistungsstarken Tools und einfachen Befehlen.
Latenode bietet eine direkte Integration mit der Puppeteer-Bibliothek, ohne dass Sie etwas auf Ihrem System installieren müssen. Wählen Sie einfach einen Knoten aus der Integrationsknotenbibliothek aus, fügen Sie ihn Ihrem Automatisierungsszenario hinzu, fügen Sie ein Skript für Screenshots hinzu und verknüpfen Sie ihn mit anderen Knoten. Hier sind einige Beispiele. Schauen Sie sie sich an und wählen Sie das Passende für Ihre Bedürfnisse!
Dieses Automatisierungstool analysiert und fasst Webinhalte zusammen, indem es Screenshots bestimmter Websites erfasst und verarbeitet. Durch die Verwendung eines Headless-Browsers und die Integration mit KI können Sie wichtige Erkenntnisse aus Webseiten gewinnen. Ideal für die Überwachung von Website-Änderungen, die Analyse von Wettbewerbern oder die Erfassung visueller Daten für Berichte.
Dieses automatisierte Szenario dient der Erfassung und Verarbeitung von Websuchergebnissen. Nutzen Sie einen Headless-Browser und KI-gestützten Javascript-Code, um Informationen von Suchmaschinen zu sammeln, Screenshots als Referenz zu erstellen und die Daten für weitere Analysen zu speichern. Dieses Tool eignet sich ideal für Marktforschung oder alle Aufgaben, die eine automatisierte Datenerfassung aus dem Web erfordern.
Klonen Sie diese vorgefertigte Vorlage, um beliebige Produktdaten von Ebay zu extrahieren!
Dieses Tool analysiert Online-Bewertungen für ein bestimmtes Unternehmen und liefert durch KI-gestützte Analysen umsetzbare Erkenntnisse. Der Headless-Browser dient zum Navigieren, Erstellen von Screenshots und Sammeln von Bewertungen, während DeepSeek AI für detaillierte Analysen sorgt. Ideal zur Überwachung der Markenreputation, zur Verbesserung des Kundenservice und für datenbasierte Entscheidungen.
Befolgen Sie diese Schritte, um Puppeteer einzurichten und mit der Aufnahme von Webinhalten zu beginnen. Eine ordnungsgemäße Einrichtung gewährleistet eine reibungslose Leistung für verschiedene Screenshot-Anforderungen, egal ob es sich um Vollseiten, bestimmte Elemente oder größenoptimierte Aufnahmen handelt.
Nachdem Sie den Headless-Browser-Knoten hinzugefügt haben, erstellen Sie eine neue Browserinstanz mit dem folgenden Code:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: true,
defaultViewport: { width: 1280, height: 720 }
});
const page = await browser.newPage();
await page.goto('https://example.com');
})();
Dadurch wird Ihre Umgebung eingerichtet, sodass Sie Screenshots präzise aufnehmen können.
Um Ihre Screenshots zu optimieren, passen Sie die Ansichtsfenstereinstellungen an. Hier ist eine Übersicht der wichtigsten Parameter:
| Parameter | Standardwert | Empfohlene Einstellung | Sinn |
|---|---|---|---|
| Breite | 800px | 1280px | Entspricht der üblichen Desktop-Auflösung |
| Größe | 600px | 720px | Bietet ein Standard-Seitenverhältnis von 16:9 |
| Skalierungsfaktor | 1 | 1 | Behält die Originalgröße bei |
| Mobiler Modus | falsch | falsch | Gewährleistet Desktop-Rendering |
Verwenden Sie den folgenden Code, um diese Parameter zu konfigurieren:
await page.setViewport({
width: 1280,
height: 720,
deviceScaleFactor: 1,
isMobile: false
});
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36');
„In Puppeteer ist die Ansichtsfenstermanipulation besonders wichtig für Aufgaben wie Web Scraping, das Testen von Webanwendungen auf verschiedenen Geräten und das Erstellen von Screenshots oder PDFs von Webseiten.“ – Webshare
Legen Sie für dynamische Inhalte ein Timeout fest, um Ladeverzögerungen zu berücksichtigen:
page.setDefaultTimeout(30000); // 30 seconds timeout
Mit diesen Konfigurationen sind Sie bereit, qualitativ hochwertige Screenshots aufzunehmen, die auf Ihre Bedürfnisse zugeschnitten sind.
Erfahren Sie, wie Sie mit Puppeteer mithilfe bestimmter Einstellungen, Bildlaufmethoden und Techniken zur Fehlerbehebung Screenshots ganzseitiger Bilder erstellen.
Um eine ganze Webseite zu erfassen, einschließlich Inhalte außerhalb des sichtbaren Bereichs, verwenden Sie Puppeteers volleSeite Option:
await page.screenshot({
path: 'complete-page.png',
fullPage: true
});
Stellen Sie vor der Erfassung sicher, dass die Seite vollständig geladen wurde und die Darstellung dynamischer Inhalte abgeschlossen ist:
await page.waitForNetworkIdle();
await page.waitForTimeout(2000);
Wenn im Screenshot immer noch dynamischer Inhalt fehlt, können Sie die Verwendung von Bildlauftechniken in Erwägung ziehen, wie unten erläutert.
Bei Seiten, bei denen zum Laden des gesamten Inhalts gescrollt werden muss, können Sie den Scrollvorgang automatisieren:
async function captureFullPage(page) {
// Scroll through the page and wait for content to load
await page.evaluate(async () => {
return await new Promise((resolve) => {
const timer = setInterval(() => {
window.scrollBy(0, window.innerHeight);
if (document.scrollingElement.scrollTop + window.innerHeight >= document.scrollingElement.scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
// Scroll back to the top, then take the screenshot
await page.evaluate(() => window.scrollTo(0, 0));
return await page.screenshot({ fullPage: true });
}
„Das Erstellen von Screenshots nach Abschnitten ist die beste Lösung, die wir heute haben, um Screenshots der gesamten Seite zu erstellen.“
Diese Methode stellt sicher, dass alle Abschnitte der Seite geladen und in die Erfassung einbezogen werden.
Hier sind einige häufig auftretende Probleme und deren Lösungen:
| Problem | Die Lösung | Umsetzung |
|---|---|---|
| Ansichtsfenstereinheiten | Festlegen einer festen Ansichtsfensterhöhe | await page.setViewport({ height: 900 }); |
| Faules Laden | Progressives Scrollen verwenden | Verwenden Sie das captureFullPage Funktion |
| Komplexe Layouts | In Abschnitten erfassen | Machen Sie mehrere Screenshots und fügen Sie sie zusammen |
Fügen Sie für Seiten mit unendlichem Scrollen oder stark dynamischem Inhalt ein Scroll-Limit hinzu, um Endlosschleifen zu verhindern:
const maxScrolls = 10;
let scrollCount = 0;
while (scrollCount < maxScrolls) {
const previousHeight = await page.evaluate('document.body.scrollHeight');
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
await page.waitForTimeout(1000);
const newHeight = await page.evaluate('document.body.scrollHeight');
if (newHeight === previousHeight) break;
scrollCount++;
}
„Puppeteer ist derzeit das beste Tool im Ökosystem zum Ausführen eines Headless-Browsers … Allerdings ist die Leistung von Puppeteer beim Erstellen von Screenshots nicht perfekt.“
Für besonders knifflige Layouts, bei denen die volleSeite Option funktioniert nicht wie erwartet, legen Sie die Abmessungen manuell fest und verwenden Sie sie als Clipping-Parameter:
const dimensions = await page.evaluate(() => {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.scrollHeight
};
});
await page.screenshot({
path: 'precise-capture.png',
clip: {
x: 0,
y: 0,
width: dimensions.width,
height: dimensions.height
}
});
Mit diesen Techniken können Sie Screenshots ganzer Seiten effektiv erstellen. Als Nächstes: Erfassen Sie bestimmte Elemente und optimieren Sie Größe und Qualität.
Puppeteer erleichtert die Konzentration auf bestimmte Elemente und baut dabei auf seiner Fähigkeit auf, Screenshots ganzer Seiten aufzunehmen.
Um Elemente gezielt anzusprechen, verwenden Sie CSS-Selektoren wie IDs, Klassen oder Kombinationen:
// Target by ID (most reliable)
const submitButton = await page.$('#submit-button');
// Use specific class combinations
const productCard = await page.$('.product-card.featured');
// Locate elements within a container
const menuItem = await page.$('.navigation-menu .dropdown-item.active');
Nachdem Sie ein Element identifiziert haben, verwenden Sie die Screenshot-Tools von Puppeteer, um es zu erfassen:
const element = await page.$('div.product-data');
await element.screenshot({
path: 'element-screenshot.png',
type: 'png'
});
Für eine erweiterte Auswahl versuchen Sie die page.locator() Verfahren:
const locator = page.locator('div.product-data');
await locator.screenshot({
path: 'element-locator.png',
quality: 90
});
„Bei Element-Screenshots geht es um Präzision und Effizienz. Weniger Schnickschnack, mehr Fokus.“ – Laura und Heidi, SCRNIFY
Dieser Ansatz eignet sich gut für automatisierte Tests und Berichte und ergänzt die Erfassung ganzer Seiten. Stellen Sie einfach sicher, dass das Element vollständig geladen ist, bevor Sie den Screenshot erstellen.
Dynamische Elemente erfordern oft zusätzliche Schritte, um sicherzustellen, dass sie für die Interaktion bereit sind:
// Wait for the element to become visible
const element = await page.waitForSelector('.dynamic-element', {
visible: true,
timeout: 5000
});
// Wait for API data to load
await page.waitForResponse(
response => response.url().includes('/api/data')
);
// Capture the screenshot
await element.screenshot({ path: 'dynamic-element.png' });
Erstellen Sie für Elemente mit bestimmten Bedingungen benutzerdefinierte Wartefunktionen:
await page.waitForFunction(() => {
const element = document.querySelector('.chart-container');
return element && element.getBoundingClientRect().height > 0;
});
Hier ist ein Beispiel aus der Praxis unter Verwendung der Kryptowährungsdiagramme von TradingView:
await page.goto("https://www.tradingview.com/markets/cryptocurrencies/");
const chartElement = await page.waitForSelector(".tv-lightweight-charts", {
visible: true
});
await chartElement.screenshot({ path: 'crypto-graph.png' });
„Das Warten auf ein bestimmtes Element ist für den Automatisierungsprozess von entscheidender Bedeutung und verhindert vorzeitige Interaktionen.“ – ScrapeOps
Kombinieren Sie beim Arbeiten mit dynamischen Inhalten verschiedene Wartestrategien, um optimale Ergebnisse zu erzielen:
| Szenario | Wartestrategie | Umsetzung |
|---|---|---|
| Statische Elemente | Basisauswahl | page.$() |
| API-abhängig | Antwort warten | waitForResponse() |
| Gerenderte Diagramme | Benutzerdefinierte Funktion | waitForFunction() |
| Sichtbare Benutzeroberfläche | Sichtbarkeitsprüfung | waitForSelector() mit visible: true |
Durch die Verbesserung von Screenshot-Größe und -Qualität können Sie sowohl die Leistung als auch die Speichereffizienz steigern. So geht's effektiv.
Das Format, das Sie für Ihre Screenshots wählen, beeinflusst sowohl die Qualität als auch die Dateigröße. Hier ein kurzer Vergleich:
| Format | Bester Anwendungsfall | Vorteile | Nachteile |
|---|---|---|---|
| WebP | Moderne Web-Apps | Kleinere Dateien (25–34 % kleiner), unterstützt Transparenz | Eingeschränkte Unterstützung in älteren Browsern |
| JPEG | Fotos, detaillierte Screenshots | Kleine Dateigrößen, weit verbreitet | Keine Transparenz |
| PNG | UI-Elemente, Logos | Verlustfreie Qualität, unterstützt Transparenz | Größere Dateigrößen |
Beispielsweise können Sie den folgenden Code verwenden, um Screenshots in WebP or JPEG Formate:
// WebP format
await page.screenshot({
path: 'screenshot.webp',
type: 'webp',
quality: 80
});
// JPEG format
await page.screenshot({
path: 'screenshot.jpg',
type: 'jpeg',
quality: 75
});
Die Qualitätseinstellungen helfen dabei, Klarheit und Dateigröße in Einklang zu bringen. Verwenden Sie eine höhere Qualität für detaillierte UI-Elemente und eine niedrigere Qualität für allgemeine Aufnahmen:
// High quality for UI elements
await page.screenshot({
path: 'ui-element.jpg',
quality: 90,
type: 'jpeg'
});
// Medium quality for general captures
await page.screenshot({
path: 'full-page.jpg',
quality: 75,
type: 'jpeg'
});
„WebP bietet Dateigrößen, die bei gleicher Qualität 25–35 % kleiner sind als JPEG.“ – Google Developers
Um die Dateigröße weiter zu minimieren, ohne an Klarheit zu verlieren, können Sie Screenshots zuschneiden oder für die Bereitstellung im Internet optimieren:
// Clip to specific dimensions
await page.screenshot({
path: 'clipped.jpg',
clip: {
x: 0,
y: 0,
width: 1280,
height: 720
}
});
// Optimize for web delivery
await page.screenshot({
path: 'optimized.webp',
type: 'webp',
quality: 75,
omitBackground: true
});
Zum Beispiel Gitlab berichtete ein 80 % Reduzierung der PNG-Dateigröße durch Optimierungs-Workflows.
„Die JPG-Version ist deutlich kleiner. Auf der Puppeteer-Seite gibt es einen vernachlässigbaren Geschwindigkeitsunterschied zwischen der Generierung von JPG und PNG.“ – Jon Yongfook, Gründer von Bannerbear
Verschiedene Inhaltstypen erfordern unterschiedliche Formate und Einstellungen. Hier ist eine Kurzanleitung:
| Screenshot-Typ | Bestes Format | Qualitätseinstellung | Reduzierung der Dateigröße |
|---|---|---|---|
| Volle Seite | WebP | 75-80 % | 25–34 % kleiner als JPEG |
| UI-Elemente | PNG | Lossless | Priorisieren Sie Qualität |
| Fotolastiger Inhalt | JPEG | 70-80 % | 70–90 % kleiner als unkomprimiert |
Puppeteer vereinfacht Webautomatisierung und -tests mit seinen Screenshot-Funktionen. Sie können damit ganze Seiten oder einzelne Elemente erfassen und gleichzeitig Bildqualität und -format steuern. Schnellere Kodierungsoptionen sparen zudem Verarbeitungszeit.
Um optimale Ergebnisse zu erzielen, stellen Sie die Abmessungen Ihres Ansichtsfensters entsprechend der benötigten Auflösung ein und verwenden Sie die waitForSelector() Methode, um sicherzustellen, dass alle Inhalte vollständig geladen werden. Wenn Sie das JPEG-Format verwenden, optimieren Sie die Qualitätseinstellungen, um Dateigröße und Klarheit auszugleichen.
So beginnen Sie mit der Verwendung von Puppeteer für Screenshots:
„Puppeteer ist ein leistungsstarkes Tool für Web Scraping und Testautomatisierung, das ein hohes Maß an Flexibilität und Kontrolle über den Screenshot-Erstellungsprozess bietet.“
Für eine noch reibungslosere Integration sollten Sie Plattformen wie Latenode nutzen. Mit dem visuellen Workflow-Builder können Sie erweiterte Screenshot-Automatisierungen einrichten, ohne dass umfangreiche Programmierkenntnisse erforderlich sind.
