Eine Low-Code-Plattform, die die Einfachheit von No-Code mit der Leistung von Full-Code verbindet 🚀
Jetzt kostenlos starten
Screenshots mit Puppeteer erstellen: Ganzseitige Aufnahmen, Elemente und Größenoptimierung
14. März 2025
9
min lesen

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

Georgi Miloradowitsch
Forscher, Texter und Usecase-Interviewer
Inhaltsverzeichnis

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:

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

Warum verwenden Puppenspieler?

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:

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.

Seitenparameter festlegen

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.

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:

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.

Scrollende Seiten verarbeiten

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.

Beheben Sie häufige Probleme

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.

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:

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

Erstellen Sie Screenshots von Elementen

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.

Behandeln des Ladens von Inhalten

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

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:

// 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 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

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:

// 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

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

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

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.

Ähnliche Blog-Beiträge

Verwandte Blogs

Anwendungsfall

Unterstützt von