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

Puppeteer ist eine Node.js-Bibliothek, die die Browserautomatisierung vereinfacht und Aufgaben wie das Erstellen von Screenshots schnell und effizient macht. Ob Sie ganze Seiten erfassen, Schnappschüsse bestimmter Elemente erstellen oder Bilder optimieren möchten: Puppeteer bietet flexible Optionen mit minimalem Code. Das können Sie mit Puppeteer umsetzen:

• Ganzseitige Screenshots: Erfassen Sie vollständige Webseiten einschließlich scrollbarer Inhalte.
• Element-spezifische Aufnahmen: Konzentrieren Sie sich mit CSS-Selektoren auf präzise Komponenten.
• Größenoptimierung: Steuern Sie Bildformat, Qualität und Dateigröße (z. B. PNG, JPEG, WebP).

Schnelles Beispiel:

await page.screenshot({ path: 'screenshot.jpg', fullPage: true });

Warum Puppeteer verwenden?

• Automatisieren Sie visuelle Tests und Fehlerberichte.
• Sparen Sie Zeit durch effiziente Browserinteraktionen.
• Passen Sie Screenshots für Performance und Klarheit an.

Ob Sie als Entwickler Websites testen oder Fehler dokumentieren: Puppeteer optimiert den Prozess mit leistungsstarken Tools und einfachen Befehlen.

sbb-itb-23997f1

Webseitenscreenshots mit einem Puppeteer-basierten Headless Browser auf Latenode erstellen!

Latenode bietet eine direkte Integration der Puppeteer-Bibliothek, ohne dass Sie etwas auf Ihrem System installieren müssen. Wählen Sie einfach einen Node aus der Integrations-Node-Bibliothek, fügen Sie ihn Ihrem Automatisierungs-Workflow hinzu, ergänzen Sie ein Skript zur Screenshot-Erstellung und verbinden Sie ihn mit anderen Nodes. Hier sind einige Beispiele. Sehen Sie sie sich an und wählen Sie die Option, die zu Ihren Anforderungen passt!

Beispiel #1: Website-Analyse auf Basis von Screenshots

Dieses Automatisierungstool wurde entwickelt, um Webinhalte durch das Erfassen und Verarbeiten von Screenshots bestimmter Websites zu analysieren und zusammenzufassen. Durch den Einsatz eines Headless Browsers und die Integration von KI können Sie wichtige Erkenntnisse aus Webseiten gewinnen. Ideal zur Überwachung von Website-Änderungen, zur Analyse von Wettbewerbern oder zum Sammeln visueller Daten für Berichte.

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

Beispiel #2: E-Commerce-Datenerfassung (Ebay Scraper)

Dieser automatisierte Workflow wurde entwickelt, um Websuchergebnisse zu erfassen und zu verarbeiten. Nutzen Sie einen Headless Browser und KI-unterstützten JavaScript-Code, um Informationen aus 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 jede Aufgabe, die eine automatisierte Datenerfassung aus dem Web erfordert.

Klonen Sie diese fertige Vorlage, um Produktdaten von Ebay zu extrahieren!

Beispiel #3: Marktanalyse-Scraper

Dieses Tool analysiert Online-Bewertungen für ein bestimmtes Unternehmen und liefert durch KI-gestützte Analysen umsetzbare Erkenntnisse. Ein Headless Browser wird verwendet, um Bewertungen zu navigieren, Screenshots zu erstellen und Bewertungen zu sammeln, während DeepSeek AI bei der detaillierten Analyse unterstützt. Ideal zur Überwachung der Markenreputation, zur Verbesserung des Kundenservice und für datengestützte Entscheidungen.

Klonen Sie diese Vorlage, um Bewertungen zu sammeln, zu analysieren und detaillierte Erkenntnisse zu jeder Marke zu erhalten!

Erste Schritte mit Puppeteer

Befolgen Sie diese Schritte, um Puppeteer einzurichten und mit der Erfassung von Webinhalten zu beginnen. Eine korrekte Einrichtung stellt eine reibungslose Performance für unterschiedliche Screenshot-Anforderungen sicher – ob für ganze Seiten, bestimmte Elemente oder größenoptimierte Aufnahmen.

Browser und Seite starten

Sobald Sie den Headless-Browser-Node hinzugefügt haben, erstellen Sie mit folgendem Code eine neue Browserinstanz:

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');
})();

Damit richten Sie Ihre Umgebung ein und können Screenshots präzise erstellen.

Seitenparameter festlegen

Um Ihre Screenshots präzise abzustimmen, passen Sie die Viewport-Einstellungen an. Hier finden Sie eine Übersicht der wichtigsten Parameter:

Verwenden Sie 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 Manipulation des Viewports besonders wichtig für Aufgaben wie Web Scraping, das Testen von Webanwendungen auf verschiedenen Geräten sowie 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.setDefaultTimeout(30000); // 30 seconds timeout

Mit diesen Konfigurationen können Sie hochwertige Screenshots erstellen, die auf Ihre Anforderungen zugeschnitten sind.

Ganzseitige Screenshots

Erfahren Sie, wie Sie mit Puppeteer ganzseitige Screenshots erstellen – mit spezifischen Einstellungen, Scroll-Methoden und Techniken zur Fehlerbehebung.

Ganzseitenmodus aktivieren

Um eine vollständige Webseite einschließlich der Inhalte außerhalb des sichtbaren Bereichs zu erfassen, verwenden Sie die Option fullPage von Puppeteer:

await page.screenshot({
    path: 'complete-page.png',
    fullPage: true
});

Stellen Sie vor der Aufnahme sicher, dass die Seite vollständig geladen wurde und dynamische Inhalte fertig gerendert sind:

await page.waitForNetworkIdle();
await page.waitForTimeout(2000);

Falls dynamische Inhalte im Screenshot weiterhin fehlen, nutzen Sie die unten erläuterten Scroll-Techniken.

Scrollbare Seiten verarbeiten

Für Seiten, die das Scrollen erfordern, um alle Inhalte zu laden, können Sie den Scroll-Vorgang 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 heute möglicherweise die beste Lösung, um vollständige Seitenscreenshots aufzunehmen.“ [4]

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

Häufige Probleme beheben

Hier sind einige häufige Probleme, auf die Sie stoßen können, sowie die passenden Lösungen:

Fügen Sie für Seiten mit unendlichem Scrollen oder umfangreichen dynamischen Inhalten ein Scroll-Limit hinzu, um Endlosschleifen zu vermeiden:

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, um einen Headless Browser auszuführen ... Allerdings liefert Puppeteer beim Erstellen von Screenshots nicht immer perfekte Ergebnisse.“ [5]

Bei besonders schwierigen Layouts, bei denen die Option fullPage nicht wie erwartet funktioniert, legen Sie die Abmessungen manuell fest und verwenden Sie sie als Zuschneideparameter:

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 ganzseitige Screenshots effektiv verarbeiten. Als Nächstes geht es um die Erfassung bestimmter Elemente sowie die Feinabstimmung von Größen- und Qualitätseinstellungen.

Element-Screenshots

Puppeteer erleichtert es Ihnen, sich auf bestimmte Elemente zu konzentrieren, und baut dabei auf seinen Funktionen für ganzseitige Screenshots auf.

Elemente mit CSS finden

Um Elemente präzise 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');

Element-Screenshots erstellen

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 können Sie die Methode page.locator() verwenden:

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 Ballast, mehr Fokus.“ – Laura und Heidi, SCRNIFY

Dieser Ansatz eignet sich gut für automatisierte Tests und Berichte und ergänzt ganzseitige Aufnahmen. Stellen Sie lediglich sicher, dass das Element vor der Screenshot-Erstellung vollständig geladen ist.

Ladeinhalte verarbeiten

Dynamische Elemente erfordern häufig zusätzliche Schritte, um sicherzustellen, dass sie zur 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 eigene Wartefunktionen:

await page.waitForFunction(() => {
    const element = document.querySelector('.chart-container');
    return element && element.getBoundingClientRect().height > 0;
});

Hier ist ein Praxisbeispiel mit Kryptowährungsdiagrammen 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 entscheidend für den Automatisierungsprozess und verhindert verfrühte Interaktionen.“ – ScrapeOps

Kombinieren Sie bei der Arbeit mit dynamischen Inhalten unterschiedliche Warte-Strategien, um optimale Ergebnisse zu erzielen:

Bildgröße und Qualität

Die Optimierung von Screenshot-Größe und -Qualität kann sowohl die Performance als auch die Speichereffizienz verbessern. So setzen Sie dies wirkungsvoll um.

Das richtige Bildformat wählen

Das für Ihre Screenshots gewählte Format beeinflusst sowohl Qualität als auch Dateigröße. Hier ist ein schneller Vergleich:

Sie können beispielsweise folgenden Code verwenden, um Screenshots im Format WebP oder JPEG zu speichern:

// WebP format
await page.screenshot({
    path: 'screenshot.webp',
    type: 'webp',
    quality: 80
});

// JPEG format
await page.screenshot({
    path: 'screenshot.jpg',
    type: 'jpeg',
    quality: 75
});

Qualitätseinstellungen anpassen

Die Qualitätseinstellungen helfen Ihnen, Klarheit und Dateigröße auszubalancieren. Verwenden Sie höhere Qualitätswerte für detaillierte UI-Elemente und niedrigere Werte 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 bei gleichem Qualitätsniveau Dateigrößen, die 25–35 % kleiner sind als bei 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 Webbereitstellung 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
});

So meldete GitLab durch Optimierungs-Workflows eine Reduzierung der PNG-Dateigrößen um 80 % [8].

„Die JPG-Version ist deutlich kleiner. Bei Puppeteer selbst gibt es bei der Geschwindigkeit zur Erstellung einer JPG- im Vergleich zu einer PNG-Datei einen vernachlässigbaren Unterschied.“ – Jon Yongfook, Gründer von Bannerbear [7]

Empfehlungen nach Inhalt

Unterschiedliche Inhaltstypen erfordern unterschiedliche Formate und Einstellungen. Hier ist eine kurze Orientierung:

Zusammenfassung

Puppeteer vereinfacht die Webautomatisierung und das Testen mit seinen Screenshot-Funktionen. Sie können damit ganze Seiten oder bestimmte Elemente erfassen und behalten gleichzeitig die Kontrolle über Bildqualität und -format. Zudem können schnellere Kodierungsoptionen helfen, Verarbeitungszeit zu sparen [10].

Um optimale Ergebnisse zu erzielen, legen Sie Ihre Viewport-Abmessungen passend zur benötigten Auflösung fest und verwenden Sie die Methode waitForSelector(), damit alle Inhalte vollständig geladen werden. Wenn Sie das JPEG-Format nutzen, passen Sie die Qualitätseinstellungen an, um Dateigröße und Klarheit auszubalancieren.

Erste Schritte

So beginnen Sie mit Puppeteer für Screenshots:

• Richten Sie eine direkte, Puppeteer-gestützte Headless-Browser-Integration auf Latenode ein.
• Wählen Sie Ihren Aufnahmetyp – ganzseitig oder element-spezifisch – anhand Ihrer Anforderungen.
• Optimieren Sie die Bildausgabe, indem Sie Format- und Qualitätseinstellungen anpassen.

„Puppeteer ist ein leistungsstarkes Tool für Web Scraping und Testautomatisierung und bietet ein hohes Maß an Flexibilität und Kontrolle bei der Erstellung von Screenshots.“ [3]

Für eine noch reibungslosere Integration sollten Sie Plattformen wie Latenode in Betracht ziehen. Mit dem visuellen Workflow-Builder können Sie anspruchsvolle Screenshot-Automatisierungen einrichten, ohne umfangreiche Programmierkenntnisse zu benötigen.