Screenshots mit Puppeteer erstellen: Ganzseitige Aufnahmen, Elemente und Größenoptimierung

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:

Ganzseitige Screenshots: Erfassen Sie ganze Webseiten, einschließlich Scroll-Inhalten.
Elementspezifische Erfassungen: Konzentrieren Sie sich mithilfe von CSS-Selektoren auf präzise Komponenten.
Größenoptimierung: Steuern Sie Bildformat, Qualität und Dateigröße (z. B. PNG, JPEG, WebP).

Kurzes Beispiel:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">path</span>: <span class="hljs-string">'screenshot.jpg'</span>, <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span> });

Warum verwenden Puppenspieler?

Automatisieren Sie visuelle Tests und Fehlerberichte.
Sparen Sie Zeit mit effizienten Browserinteraktionen.
Passen Sie Screenshots für Leistung und Klarheit an.

Egal, ob Sie als Entwickler Websites testen oder Fehler dokumentieren, Puppeteer optimiert den Prozess mit leistungsstarken Tools und einfachen Befehlen.

sbb-itb-23997f1

Machen Sie Screenshots von Webseiten mit dem Puppeteer-basierten Headless-Browser auf Latenode!

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!

Showcase Nr. 1: Screenshot-basierte Website-Analyse

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.

Klonen Sie diese Vorlage, passen Sie sie an Ihre Bedürfnisse an und automatisieren Sie die Website-Überwachung!

Showcase Nr. 2: E-Commerce-Datenerfassung (Ebay Scraper)

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!

Schaukasten Nr. 3: Marktforschungs-Scraper

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.

Klonen Sie diese Vorlage, um Bewertungen zu sammeln, sie zu analysieren und detaillierte Einblicke in jede Marke zu erhalten!

Erste Schritte mit Puppeteer

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.

Browser und Seite starten

Nachdem Sie den Headless-Browser-Knoten hinzugefügt haben, erstellen Sie eine neue Browserinstanz mit dem folgenden Code:

<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);

(<span class="hljs-title function_">async</span> () => {
    <span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteer.<span class="hljs-title function_">launch</span>({
        <span class="hljs-attr">headless</span>: <span class="hljs-literal">true</span>,
        <span class="hljs-attr">defaultViewport</span>: { <span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">720</span> }
    });
    <span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
})();

Dadurch wird Ihre Umgebung eingerichtet, sodass Sie Screenshots präzise aufnehmen können.

Seitenparameter festlegen

Um Ihre Screenshots zu optimieren, passen Sie die Ansichtsfenstereinstellungen an. Hier ist eine Übersicht der wichtigsten Parameter:

Parameter	Standardwert	Empfohlene Einstellung	Zweck
Länge	800px	1280px	Entspricht der üblichen Desktop-Auflösung
Höhe	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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
    <span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>,
    <span class="hljs-attr">height</span>: <span class="hljs-number">720</span>,
    <span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">1</span>,
    <span class="hljs-attr">isMobile</span>: <span class="hljs-literal">false</span>
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setUserAgent</span>(<span class="hljs-string">'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36'</span>);

„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 [2].

Legen Sie für dynamische Inhalte ein Timeout fest, um Ladeverzögerungen zu berücksichtigen:

page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">30000</span>); <span class="hljs-comment">// 30 seconds timeout</span>

Mit diesen Konfigurationen sind Sie bereit, qualitativ hochwertige Screenshots aufzunehmen, die auf Ihre Bedürfnisse zugeschnitten sind.

Ganzseitige Screenshots

Erfahren Sie, wie Sie mit Puppeteer mithilfe bestimmter Einstellungen, Bildlaufmethoden und Techniken zur Fehlerbehebung Screenshots ganzseitiger Bilder erstellen.

Vollbildmodus aktivieren

Um eine ganze Webseite zu erfassen, einschließlich Inhalte außerhalb des sichtbaren Bereichs, verwenden Sie Puppeteers volleSeite Option:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'complete-page.png'</span>,
    <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});

Stellen Sie vor der Erfassung sicher, dass die Seite vollständig geladen wurde und die Darstellung dynamischer Inhalte abgeschlossen ist:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForNetworkIdle</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">2000</span>);

Wenn im Screenshot immer noch dynamischer Inhalt fehlt, können Sie die Verwendung von Bildlauftechniken in Erwägung ziehen, wie unten erläutert.

Scrollende Seiten verarbeiten

Bei Seiten, bei denen zum Laden des gesamten Inhalts gescrollt werden muss, können Sie den Scrollvorgang automatisieren:

<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">captureFullPage</span>(<span class="hljs-params">page</span>) {
    <span class="hljs-comment">// Scroll through the page and wait for content to load</span>
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {
            <span class="hljs-keyword">const</span> timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =></span> {
                <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollBy</span>(<span class="hljs-number">0</span>, <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span>);
                <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">document</span>.<span class="hljs-property">scrollingElement</span>.<span class="hljs-property">scrollTop</span> + <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerHeight</span> >= <span class="hljs-variable language_">document</span>.<span class="hljs-property">scrollingElement</span>.<span class="hljs-property">scrollHeight</span>) {
                    <span class="hljs-built_in">clearInterval</span>(timer);
                    <span class="hljs-title function_">resolve</span>();
                }
            }, <span class="hljs-number">100</span>);
        });
    });

    <span class="hljs-comment">// Scroll back to the top, then take the screenshot</span>
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollTo</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>));
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span> });
}

„Das Erstellen von Screenshots nach Abschnitten ist die beste Lösung, die wir heute haben, um Screenshots der gesamten Seite zu erstellen.“ [4].

Diese Methode stellt sicher, dass alle Abschnitte der Seite geladen und in die Erfassung einbezogen werden.

Beheben Sie häufige Probleme

Hier sind einige häufig auftretende Probleme und deren Lösungen:

Problem	Lösung	Umsetzung
Ansichtsfenstereinheiten	Festlegen einer festen Ansichtsfensterhöhe	await page.setViewport({ height: 900 });
Faules Laden	Progressives Scrollen verwenden	Verwenden Sie die Funktion captureFullPage
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:

<span class="hljs-keyword">const</span> maxScrolls = <span class="hljs-number">10</span>;
<span class="hljs-keyword">let</span> scrollCount = <span class="hljs-number">0</span>;

<span class="hljs-keyword">while</span> (scrollCount < maxScrolls) {
    <span class="hljs-keyword">const</span> previousHeight = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'document.body.scrollHeight'</span>);
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'window.scrollTo(0, document.body.scrollHeight)'</span>);
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForTimeout</span>(<span class="hljs-number">1000</span>);

    <span class="hljs-keyword">const</span> newHeight = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">'document.body.scrollHeight'</span>);
    <span class="hljs-keyword">if</span> (newHeight === previousHeight) <span class="hljs-keyword">break</span>;

    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.“ [5].

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:

<span class="hljs-keyword">const</span> dimensions = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">return</span> {
        <span class="hljs-attr">width</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">clientWidth</span>,
        <span class="hljs-attr">height</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-property">documentElement</span>.<span class="hljs-property">scrollHeight</span>
    };
});

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'precise-capture.png'</span>,
    <span class="hljs-attr">clip</span>: {
        <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">width</span>: dimensions.<span class="hljs-property">width</span>,
        <span class="hljs-attr">height</span>: dimensions.<span class="hljs-property">height</span>
    }
});

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.

Element-Screenshots

Puppeteer erleichtert die Konzentration auf bestimmte Elemente und baut dabei auf seiner Fähigkeit auf, Screenshots ganzer Seiten aufzunehmen.

Elemente mit CSS finden

Um Elemente gezielt anzusprechen, verwenden Sie CSS-Selektoren wie IDs, Klassen oder Kombinationen:

<span class="hljs-comment">// Target by ID (most reliable)</span>
<span class="hljs-keyword">const</span> submitButton = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'#submit-button'</span>);

<span class="hljs-comment">// Use specific class combinations</span>
<span class="hljs-keyword">const</span> productCard = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.product-card.featured'</span>);

<span class="hljs-comment">// Locate elements within a container</span>
<span class="hljs-keyword">const</span> menuItem = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.navigation-menu .dropdown-item.active'</span>);

Erstellen Sie Screenshots von Elementen

Nachdem Sie ein Element identifiziert haben, verwenden Sie die Screenshot-Tools von Puppeteer, um es zu erfassen:

<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'div.product-data'</span>);
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'element-screenshot.png'</span>,
    <span class="hljs-attr">type</span>: <span class="hljs-string">'png'</span>
});

Für eine erweiterte Auswahl versuchen Sie die page.locator() Verfahren:

<span class="hljs-keyword">const</span> locator = page.<span class="hljs-title function_">locator</span>(<span class="hljs-string">'div.product-data'</span>);
<span class="hljs-keyword">await</span> locator.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'element-locator.png'</span>,
    <span class="hljs-attr">quality</span>: <span class="hljs-number">90</span>
});

„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.

Behandeln des Ladens von Inhalten

Dynamische Elemente erfordern oft zusätzliche Schritte, um sicherzustellen, dass sie für die Interaktion bereit sind:

<span class="hljs-comment">// Wait for the element to become visible</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.dynamic-element'</span>, {
    <span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>
});

<span class="hljs-comment">// Wait for API data to load</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForResponse</span>(
    <span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data'</span>)
);

<span class="hljs-comment">// Capture the screenshot</span>
<span class="hljs-keyword">await</span> element.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">path</span>: <span class="hljs-string">'dynamic-element.png'</span> });

Erstellen Sie für Elemente mit bestimmten Bedingungen benutzerdefinierte Wartefunktionen:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.chart-container'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span> > <span class="hljs-number">0</span>;
});

Hier ist ein Beispiel aus der Praxis unter Verwendung der Kryptowährungsdiagramme von TradingView:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">"https://www.tradingview.com/markets/cryptocurrencies/"</span>);
<span class="hljs-keyword">const</span> chartElement = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">".tv-lightweight-charts"</span>, {
    <span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-keyword">await</span> chartElement.<span class="hljs-title function_">screenshot</span>({ <span class="hljs-attr">path</span>: <span class="hljs-string">'crypto-graph.png'</span> });

„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	Seite.$()
API-abhängig	Antwort warten	waitForResponse()
Gerenderte Diagramme	Benutzerdefinierte Funktion	waitForFunction()
Sichtbare Benutzeroberfläche	Sichtbarkeitsprüfung	waitForSelector() mit visible: true

Bildgröße und Qualität

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.

Wählen Sie das richtige Bildformat

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:

<span class="hljs-comment">// WebP format</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'screenshot.webp'</span>,
    <span class="hljs-attr">type</span>: <span class="hljs-string">'webp'</span>,
    <span class="hljs-attr">quality</span>: <span class="hljs-number">80</span>
});

<span class="hljs-comment">// JPEG format</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'screenshot.jpg'</span>,
    <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>,
    <span class="hljs-attr">quality</span>: <span class="hljs-number">75</span>
});

Qualitätseinstellungen anpassen

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:

<span class="hljs-comment">// High quality for UI elements</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'ui-element.jpg'</span>,
    <span class="hljs-attr">quality</span>: <span class="hljs-number">90</span>,
    <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});

<span class="hljs-comment">// Medium quality for general captures</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'full-page.jpg'</span>,
    <span class="hljs-attr">quality</span>: <span class="hljs-number">75</span>,
    <span class="hljs-attr">type</span>: <span class="hljs-string">'jpeg'</span>
});

„WebP bietet Dateigrößen, die bei gleicher Qualität 25–35 % kleiner sind als JPEG.“ – Google Developers [6].

Dateigröße reduzieren

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:

<span class="hljs-comment">// Clip to specific dimensions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'clipped.jpg'</span>,
    <span class="hljs-attr">clip</span>: {
        <span class="hljs-attr">x</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">y</span>: <span class="hljs-number">0</span>,
        <span class="hljs-attr">width</span>: <span class="hljs-number">1280</span>,
        <span class="hljs-attr">height</span>: <span class="hljs-number">720</span>
    }
});

<span class="hljs-comment">// Optimize for web delivery</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
    <span class="hljs-attr">path</span>: <span class="hljs-string">'optimized.webp'</span>,
    <span class="hljs-attr">type</span>: <span class="hljs-string">'webp'</span>,
    <span class="hljs-attr">quality</span>: <span class="hljs-number">75</span>,
    <span class="hljs-attr">omitBackground</span>: <span class="hljs-literal">true</span>
});

Zum Beispiel Gitlab berichtete ein 80 % Reduzierung der PNG-Dateigröße durch Optimierungs-Workflows [8]..

„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 [7].

Empfehlungen basierend auf Inhalten

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

Zusammenfassung

Puppeteer vereinfacht Web-Automatisierung und -Tests mit seinen Screenshot-Funktionen. Sie können damit ganze Seiten oder einzelne Elemente erfassen und gleichzeitig die Bildqualität und das Format steuern. Schnellere Kodierungsoptionen sparen zudem Verarbeitungszeit. [10]..

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.

Erste Schritte

So beginnen Sie mit der Verwendung von Puppeteer für Screenshots:

Richten Sie ein Direct Puppeteer-basiertes Headless-Browser-Integration auf Latenode.
Wählen Sie Ihren Aufnahmetyp – ob ganzseitig oder elementbezogen – ganz nach Ihren Anforderungen.
Optimieren Sie die Bildausgabe durch Anpassen der Format- und Qualitätseinstellungen.

„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.“ [3]..

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.