Puppeteer

Puppeteer ist eine quelloffene Node.js-Bibliothek von Google. Ihre übergeordnete API steuert Chrome und Firefox und wird häufig für automatisierte Screenshots, Tests und Web Scraping eingesetzt.

Was Puppeteer kann

Puppeteer steuert unterstützte Browser über das Chrome DevTools Protocol und WebDriver BiDi. Die API deckt die meisten manuellen Browseraktionen sowie zusätzliche Automatisierungsaufgaben ab.

Zu den Kernfunktionen gehören:

• Seitennavigation: Beliebige URLs laden, auf bestimmte Netzwerkzustände oder DOM-Elemente warten sowie Weiterleitungen und Authentifizierung verarbeiten.
• Screenshots: Eine Seite rendern und als PNG, JPEG oder WebP speichern. Aufgenommen werden kann der sichtbare Viewport oder die gesamte scrollbare Seite.
• PDF-Erstellung: Eine gerenderte Seite als PDF exportieren und dabei Seitengröße, Ränder sowie Kopf- und Fußzeilen einstellen.
• DOM-Interaktionen: Elemente anklicken, Formulare ausfüllen, Einträge in Dropdowns wählen und Text eingeben. So lassen sich Abläufe automatisieren, bei denen vor der Aufnahme eine Interaktion nötig ist.
• Netzwerkanfragen abfangen: Requests überwachen, verändern oder blockieren, etwa um Fehlerzustände zu testen, Werbung auszublenden oder Ressourcengrößen zu messen.
• JavaScript ausführen: Beliebigen JavaScript-Code im Seitenkontext ausführen, Daten auslesen und das DOM vor einer Aufnahme verändern.

Puppeteer steuert eine echte Browser-Engine. Deshalb entspricht das Ergebnis der Chrome-Darstellung, einschließlich CSS-Layout, Webfonts, Animationen und per JavaScript erzeugter Inhalte.

Screenshots mit Puppeteer

Screenshots gehören zu den häufigsten Einsatzbereichen von Puppeteer. Die Methode page.screenshot() bietet eine genaue Steuerung der Ausgabe.

Viewport-Abmessungen und Device Scale Factor lassen sich für jede Bildschirmgröße festlegen, vom Smartphone bis zum 4K-Monitor. Mit der Option fullPage wird das gesamte scrollbare Dokument aufgenommen, nicht nur der sichtbare Bereich. Über einen Ausschnitt kannst du außerdem einen festgelegten rechteckigen Seitenbereich erfassen.

Bei Seiten mit Lazy Loading kann ein Puppeteer-Skript durch die Seite scrollen und so alle verzögert geladenen Bilder vor der Aufnahme anfordern. Cookie-Banner und Pop-ups lassen sich per Code schließen. Mit eingeschleustem CSS kannst du Elemente ausblenden, die nicht im Screenshot erscheinen sollen.

Screenshot-Werkzeuge und -APIs setzen intern häufig Puppeteer oder eine ähnliche Bibliothek ein. Sie verpacken die Funktionen in eine einfachere Oberfläche, damit Seiten ohne selbst geschriebenes Browser-Automatisierungsskript aufgenommen werden können.

In der Praxis führt Puppeteer bei Chrome-orientierten Aufgaben oft besonders schnell vom Wunsch nach einem Browser-Screenshot zu einem funktionierenden Skript. Viewport, Wartebedingungen und Ausgabeformat werden einmal festgelegt. Dasselbe Skript lässt sich danach für Prüfungen, Berichte oder geplante Aufnahmen wiederverwenden.

Puppeteer und Playwright im Vergleich

Puppeteer und Playwright sind die beiden wichtigsten Bibliotheken für Headless-Browser-Automatisierung und haben gemeinsame Wurzeln. Mehrere Mitglieder des Playwright-Teams arbeiteten zuvor an Puppeteer.

Browserunterstützung ist der größte Unterschied. Aktuelle Puppeteer-Versionen unterstützen Chrome for Testing und die stabile Firefox-Version. Playwright steuert Chromium, Firefox und WebKit über eine einheitliche API und deckt damit zusätzlich WebKit-Aufnahmen und -Tests ab.

API-Design: Die APIs ähneln sich. Playwright ergänzt jedoch automatisches Warten, das ausdrückliche Wartebefehle oft überflüssig macht, Browserkontexte für getrennte Sessions sowie native Unterstützung für mehrere Seiten und Frames.

Leistung: Bei den meisten Aufgaben liegen beide ähnlich. In reinen Chrome-Abläufen hat Puppeteer durch die direkte Anbindung an das DevTools Protocol einen kleinen Vorteil. Playwrights browserübergreifende Abstraktion erzeugt nur wenig Zusatzaufwand.

Community und Ökosystem: Puppeteer gibt es länger und verfügt über mehr Plugins und Anleitungen. Playwright wächst schnell und wird bei neuen Projekten mit browserübergreifenden Anforderungen häufig bevorzugt.

Häufige Fehler

• Nicht auf den Seiteninhalt warten: Wird page.screenshot() direkt nach page.goto() aufgerufen, ist die Seite oft noch unvollständig. Nutze waitUntil: 'networkidle0' oder warte auf einen bestimmten Selektor, bis der Inhalt vollständig gerendert ist.
• Standard-Viewport verwenden: Puppeteers Standard-Viewport misst 800 × 600 Pixel und entspricht kaum einem üblichen Bildschirm. Lege Abmessungen und Device Scale Factor ausdrücklich fest, damit die Aufnahmen korrekt und hochauflösend sind.
• Cookie-Einwilligungen übersehen: Automatisierte Aufnahmen besuchen eine Seite wie ein neuer Nutzer. Wird das Banner nicht geschlossen, zeigt der Screenshot das Overlay statt des eigentlichen Inhalts.
• Auf Servern im sichtbaren Modus starten: Puppeteer verwendet standardmäßig den Headless-Modus. Aktiviert ein Skript ausdrücklich den sichtbaren Modus, schlägt es auf Servern ohne Display fehl. Stelle für Server- und CI-Einsatz sicher, dass der Headless-Modus aktiv ist.
• Navigationsfehler nicht behandeln: Seiten können Zeitlimits überschreiten, Fehler zurückgeben oder unerwartet weiterleiten. Fange Fehler bei Navigation und Aufnahme ab, damit nicht eine einzelne fehlgeschlagene Seite das ganze Skript beendet.