.png)
.svg){kind=icon}
Einsatzbereite KI-Agenten sind auf Latenode verfĂŒgbar đ
Puppenspieler ist eine Node.js Bibliothek das Browser-Aufgaben wie Web Scraping, UI-Tests und sich wiederholende Workflows automatisiert. Es funktioniert sowohl in kopflos (keine Schnittstelle) und Vollbrowsermodi und kommuniziert mit Browsern ĂŒber die DevTools-ProtokollAus diesen GrĂŒnden ist es die erste Wahl fĂŒr Entwickler:
npm install puppeteer, und es wird mit einer kompatiblen Version von Chrome geliefert.import puppeteer from 'puppeteer';
async function runAutomation() {
const browser = await puppeteer.launch({ headless: true });
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
}
runAutomation();
Vom AnfĂ€nger bis zum fortgeschrittenen Benutzer vereinfacht Puppeteer die Browserautomatisierung und ist damit ein unverzichtbares Tool fĂŒr Node.js-Entwickler.
Befolgen Sie diese Schritte, um Puppeteer in Node.js einzurichten und alles fĂŒr die Automatisierung vorzubereiten.
FĂŒr den Einstieg benötigen Sie drei Hauptkomponenten:
| Komponente | Sinn | Befehl âĂberprĂŒfenâ |
|---|---|---|
| Node.js | Laufzeitumgebung | node --version |
| npm | Paket-Manager | npm --version |
| Google Chrome | Browser-Engine | Installation prĂŒfen |
Da npm mit Node.js gebĂŒndelt ist, stehen Ihnen mit der Installation von Node.js beide Tools zur VerfĂŒgung. Laden Sie die neueste Long Term Support (LTS)-Version von der offiziellen Node.js-Website herunter, um StabilitĂ€t und KompatibilitĂ€t zu verbessern. [2].
So erstellen Sie ein neues Puppeteer-Projekt:
mkdir puppeteer-project um einen Projektordner zu erstellen.cd puppeteer-project && npm init -y.npm install puppeteer.Wenn Sie Puppeteer installieren, lÀdt es automatisch eine Version von Chrome zum Testen die zur Bibliothek passt. Dadurch wird sichergestellt, dass Ihre Skripte in verschiedenen Setups konsistent funktionieren [3].
Hier ist eine einfache Puppeteer-Skriptvorlage:
import puppeteer from 'puppeteer';
async function runAutomation() {
const browser = await puppeteer.launch({
headless: true
});
const page = await browser.newPage();
try {
await page.setViewport({ width: 1280, height: 800 });
await page.goto('https://example.com');
// Add your actions here
} finally {
await browser.close();
}
}
runAutomation();
Best Practices zum Schreiben von Puppeteer-Skripten:
page.waitForSelector() um sicherzustellen, dass die Elemente vollstĂ€ndig geladen sind, bevor mit ihnen interagiert wird [4].try/finally Blöcke zur Fehlerbehandlung und zum Sicherstellen des ordnungsgemĂ€Ăen SchlieĂens des Browsers.FĂŒr eine reibungslosere Entwicklung fĂŒgen Sie hinzu "type": "module" auf Ihre package.json Datei. Dies ermöglicht Ihnen die Verwendung moderner ES-Modulsyntax wie import und export in Ihren Skripten [4]. Wenn diese Einrichtung abgeschlossen ist, können Sie in den nĂ€chsten Abschnitten in die erweiterten Funktionen von Puppeteer eintauchen.
Lassen Sie uns die wichtigsten Funktionen von Puppeteer fĂŒr eine effektive Browserautomatisierung aufschlĂŒsseln.
Mit Puppeteer können Sie Browser in zwei Modi ausfĂŒhren:
| Model | Beschreibung | Bester Anwendungsfall |
|---|---|---|
| Headless | LĂ€sst den Browser unsichtbar laufen | Automatisierung in CI/CD-Pipelines, Produktionsaufgaben |
| VollstÀndiger | Zeigt die Browser-BenutzeroberflÀche an | Debugging, Entwicklungstests |
Hier ist ein kurzes Beispiel fĂŒr das Starten eines Browsers mit benutzerdefinierten Einstellungen:
const browser = await puppeteer.launch({
headless: true,
defaultViewport: { width: 1920, height: 1080 },
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
Puppeteer vereinfacht die Interaktion mit Webseiten mithilfe von CSS-Selektoren und integrierten Wartefunktionen, um sicherzustellen, dass Elemente bereit sind. Beispiel:
// Wait for the email input field to load and type an email
const emailInput = await page.waitForSelector('input[type="email"]');
await emailInput.type('[email protected]');
// Wait for the submit button to appear and click it
const submitButton = await page.waitForSelector('button[type="submit"]');
await submitButton.click();
Sie können verschiedene Aktionen ausfĂŒhren, beispielsweise:
Da Puppeteer auf asynchronen Operationen basiert, ist die ordnungsgemĂ€Ăe Verwaltung dieser Aufgaben entscheidend. Das Framework enthĂ€lt Wartemechanismen, um eine reibungslose Automatisierung zu gewĂ€hrleisten. Hier ein Beispiel:
try {
await Promise.all([
page.waitForNavigation(),
page.click('#submit-button')
]);
await page.waitForSelector('.success-message', {
visible: true,
timeout: 5000
});
} catch (error) {
console.error('Navigation failed:', error);
}
âAsync/await ist eine Möglichkeit, asynchronen Code zu schreiben, der eher wie herkömmlicher synchroner Code aussieht und oft leichter zu lesen und zu verstehen ist.â â WebScraping.AI [5]
Einige nĂŒtzliche Wartestrategien sind:
| Wartefunktion | Sinn | Beispielanwendung |
|---|---|---|
| warteAufAuswahl | Wartet auf das Erscheinen eines Elements | NĂŒtzlich fĂŒr Formulare oder dynamische Inhalte |
| waitForNavigation | Wartet, bis eine Seite geladen ist | Ideal fĂŒr Formulareinreichungen |
| warteAufFunktion | Wartet auf benutzerdefinierte Bedingungen | Ideal zum ĂberprĂŒfen komplexer StatusĂ€nderungen |
| waitForTimeout | FĂŒhrt eine feste Verzögerung ein | Hilfreich fĂŒr Ratenbegrenzungen oder Animationen |
Dieser Abschnitt bietet praktische Beispiele, die zeigen, wie Puppeteer fĂŒr Aufgaben wie das Extrahieren von Daten, das Automatisieren von Formularen und das effektive Erfassen von Webseiten verwendet werden kann.
Puppeteer vereinfacht die Handhabung dynamischer Inhalte und das Extrahieren strukturierter Daten. Unten sehen Sie ein Beispiel fĂŒr das Scraping von Bewertungsdaten von einer Seite mit Endlos-Scrolling:
async function scrapeReviews() {
const reviews = [];
// Scroll until no new content loads
async function scrollToBottom() {
let lastHeight = await page.evaluate('document.body.scrollHeight');
while (true) {
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)');
await page.waitForTimeout(2000);
let newHeight = await page.evaluate('document.body.scrollHeight');
if (newHeight === lastHeight) break;
lastHeight = newHeight;
}
}
// Extract review data
await scrollToBottom();
const reviewElements = await page.$$('.review-box');
for (const element of reviewElements) {
const review = await element.evaluate(el => ({
text: el.querySelector('.review-text').textContent,
rating: el.querySelector('.rating').getAttribute('data-score'),
date: el.querySelector('.review-date').textContent
}));
reviews.push(review);
}
return reviews;
}
Um die Leistung beim Scraping zu verbessern, beachten Sie die folgenden Tipps:
| Optimierung | Umsetzung | Vorteile |
|---|---|---|
| Bilder deaktivieren | page.setRequestInterception(true) |
Spart Bandbreite |
| Verwenden Sie den Stealth-Modus | puppeteer-extra-plugin-stealth |
Hilft, Entdeckung zu vermeiden |
| Verzögerungen hinzufĂŒgen | page.waitForTimeout() |
Verhindert Ratenbegrenzungen |
Fahren wir nun mit der Automatisierung von Formularen fort.
Die Automatisierung von Formularen umfasst das AusfĂŒllen von Eingabefeldern, die Handhabung von SchaltflĂ€chen und die Verwaltung potenzieller Fehler. So können Sie ein Anmeldeformular mit Fehlerbehandlung automatisieren:
async function handleLogin(username, password) {
try {
// Click cookie accept button if visible
const cookieButton = await page.$('.cookie-accept');
if (cookieButton) await cookieButton.click();
// Fill login form
await page.type('#username', username, { delay: 100 });
await page.type('#password', password, { delay: 100 });
// Submit and wait for navigation
await Promise.all([
page.waitForNavigation(),
page.click('#login-button')
]);
// Check for error messages
const errorElement = await page.$('.error-message-container');
if (errorElement) {
const errorText = await errorElement.evaluate(el => el.textContent);
throw new Error(`Login failed: ${errorText}`);
}
} catch (error) {
console.error('Login automation failed:', error);
}
}
FĂŒr die Erfassung von Webseiten bietet Puppeteer die Möglichkeit, Einstellungen fĂŒr Screenshots und PDFs zu konfigurieren. Hier ist ein Beispiel fĂŒr die Erstellung hochwertiger Aufnahmen:
async function captureWebPage(url) {
// Set viewport for consistent captures
await page.setViewport({
width: 1920,
height: 1080,
deviceScaleFactor: 2
});
await page.goto(url, { waitUntil: 'networkidle0' });
// Take full-page screenshot
await page.screenshot({
path: 'capture.jpg',
fullPage: true,
quality: 90,
type: 'jpeg'
});
// Generate PDF with custom settings
await page.pdf({
path: 'page.pdf',
format: 'A4',
printBackground: true,
margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' }
});
}
âScreenshots von Websites mit Puppeteer zu erstellen, kann knifflig sein. Es lauern viele Fallstricke.â â Dmytro Krasun, Autor bei ScreenshotOne [6]
Um bessere Ergebnisse zu erzielen, passen Sie Ihre Aufnahmeeinstellungen je nach Aufgabe an:
| Erfassungstyp | Beste Ăbung | Idealer Anwendungsfall |
|---|---|---|
| Screenshots | Verwenden Sie JPEG fĂŒr eine schnellere Verarbeitung | Allgemeine Web-Captures |
| CSS fĂŒr Printmedien anwenden | Dokumentenerstellung | |
| Elementerfassung | Zielspezifische Selektoren | PrĂŒfung einzelner Komponenten |
Diese Beispiele zeigen, wie Puppeteer eine Vielzahl von Automatisierungsaufgaben vereinfachen kann.
Puppeteer bietet eine Reihe fortschrittlicher Techniken zur Verbesserung Ihrer Node.js-Projekte. Erfahren Sie, wie Sie Tests verbessern, mehrere Seiten verwalten und die Leistung optimieren können.
Effektive Fehlerbehandlung in Puppeteer kann das Debuggen erheblich vereinfachen. Durch die Ăberwachung von Browserprozessen und die Protokollierung fehlgeschlagener Anfragen können Sie Probleme schnell erkennen und beheben. Hier ist ein Beispiel fĂŒr ein solides Fehlermanagement-Setup:
async function robustPageOperation(url) {
try {
await page.goto(url, {
waitUntil: 'domcontentloaded', // Faster than 'networkidle2'
timeout: 30000
});
// Monitor failed requests
page.on('requestfailed', request => {
console.error(`Failed request: ${request.url()}`);
console.error(`Reason: ${request.failure().errorText}`);
});
// Capture a screenshot on error for debugging
page.on('error', async (error) => {
await page.screenshot({
path: `error-${Date.now()}.png`,
fullPage: true
});
console.error('Page error:', error);
});
} catch (error) {
console.error('Navigation failed:', error);
throw error;
}
}
âEs wird nicht alle Ihre Probleme lösen, aber es wird Ihnen genĂŒgend Situationsbewusstsein vermitteln, um die Probleme viel einfacher zu diagnostizieren und zu beheben.â â Joel Griffith, GrĂŒnder und CEO von browserless.io [8]
Sobald Sie die Fehlerbehandlung eingerichtet haben, können Sie noch einen Schritt weiter gehen und mehrere Seiten gleichzeitig verwalten.
Puppeteer ermöglicht die gleichzeitige Bearbeitung mehrerer Aufgaben. Das spart Zeit und steigert die Effizienz. Hier ist ein Beispiel fĂŒr die Verwaltung paralleler Aufgaben mit Puppeteer Cluster:
const { Cluster } = require('puppeteer-cluster');
async function runParallelOperations() {
const cluster = await Cluster.launch({
concurrency: Cluster.CONCURRENCY_CONTEXT,
maxConcurrency: 4,
monitor: true,
timeout: 30000
});
await cluster.task(async ({ page, data: url }) => {
await page.goto(url);
// Perform page operations
});
// Queue URLs for processing
const urls = ['url1', 'url2', 'url3'];
for (const url of urls) {
await cluster.queue(url);
}
await cluster.idle();
await cluster.close();
}
Die effiziente Handhabung mehrerer Seiten ist ein groĂer Fortschritt, aber durch die Optimierung der Ressourcennutzung können Ihre AblĂ€ufe noch reibungsloser gestaltet werden.
Um die Leistung von Puppeteer zu optimieren, konzentrieren Sie sich auf kurze Ladezeiten und eine effektive Ressourcenverwaltung. Hier sind einige Strategien:
| Optimierungsansatz | Umsetzung | Vorteile |
|---|---|---|
| Seitenladegeschwindigkeit | Bilder und CSS deaktivieren | Schnellere Ladezeiten |
| Memory Usage | Seiten umgehend entsorgen | Verhindert Speicherlecks |
| Request Management | Cache-Antworten | Reduziert die Netzwerklast |
| Parallelverarbeitung | Kontrollierte ParallelitÀt | Ausgewogene Ressourcennutzung |
Hier ist ein Beispiel, wie Sie SeitenvorgÀnge optimieren können:
async function optimizedPageOperation() {
// Intercept and optimize requests
await page.setRequestInterception(true);
page.on('request', request => {
if (request.resourceType() === 'image' || request.resourceType() === 'stylesheet') {
request.abort();
} else {
request.continue();
}
});
// Implement caching
const cache = new Map();
page.on('response', async response => {
const url = response.url();
if (response.ok() && !cache.has(url)) {
cache.set(url, await response.text());
}
});
}
Erfahren Sie, wie Sie Puppeteer mit einer sauberen, wartbaren Codestruktur nahtlos in Ihre Node.js-Projekte integrieren.
Strukturieren Sie Ihre Automatisierungsmodule, um Ăbersichtlichkeit und Wiederverwendung zu gewĂ€hrleisten. Hier ist ein Beispiel-Setup:
// automation/browser.js
const puppeteer = require('puppeteer');
class BrowserManager {
async initialize() {
this.browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox']
});
return this.browser;
}
async createPage() {
const page = await this.browser.newPage();
await page.setDefaultNavigationTimeout(30000);
return page;
}
async cleanup() {
if (this.browser) {
await this.browser.close();
}
}
}
module.exports = new BrowserManager();
Durch diese Konfiguration werden die Verantwortlichkeiten getrennt, sodass Ihr Code einfacher zu verwalten und zu skalieren ist.
Puppeteer kann mit anderen Node.js-Bibliotheken zusammenarbeiten, um Ihre Automatisierungs-Workflows zu verbessern. Hier ist ein Beispiel mit winston fĂŒr die Protokollierung und puppeteer-extra fĂŒr Stealth-FĂ€higkeiten:
const winston = require('winston');
const puppeteerExtra = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
// Set up logging with winston
const logger = winston.createLogger({
level: 'info',
format: winston.format.json(),
transports: [
new winston.transports.File({ filename: 'automation.log' })
]
});
// Configure Puppeteer with stealth mode
puppeteerExtra.use(StealthPlugin());
async function setupAutomation() {
const browser = await puppeteerExtra.launch();
const page = await browser.newPage();
// Log browser console messages
page.on('console', message => {
logger.info(`Browser console: ${message.text()}`);
});
return { browser, page };
}
âPuppeteer ist eine Node.js-Bibliothek, die eine High-Level-API zur Steuerung von Chrome oder Chromium ĂŒber das DevTools-Protokoll bereitstellt.â [2]
Durch die Integration von Protokollierungs- und Stealth-Funktionen können Sie Ihre Automatisierungsaufgaben besser ĂŒberwachen und verwalten.
Stellen Sie beim Bereitstellen von Puppeteer-Skripten sicher, dass Ihre Umgebung hinsichtlich StabilitĂ€t und Leistung optimiert ist. Hier ist eine Ăbersicht der wichtigsten Schritte:
| Bereitstellungsschritt | Implementierungsdetails | Sinn |
|---|---|---|
| AbhÀngigkeiten | Installieren Sie Chrome-AbhÀngigkeiten | Stellt die BrowserfunktionalitÀt sicher |
| Cache-Konfiguration | Einrichten .cache/puppeteer Verzeichnis |
Verwaltet Browserinstanzen |
| Ressourcengrenzen | Konfigurieren von Speicher- und CPU-EinschrĂ€nkungen | Verhindert eine SystemĂŒberlastung |
| Fehlerbehebung | Implementieren Sie automatische Neustartmechanismen | Sorgt fĂŒr eine hohe VerfĂŒgbarkeit des Dienstes |
Verwenden Sie die folgende Konfiguration, um Ihre Bereitstellung zu standardisieren:
const { join } = require('path');
module.exports = {
cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
executablePath: process.env.CHROME_PATH || null,
defaultViewport: {
width: 1920,
height: 1080
}
};
So optimieren Sie Ihre Skripte weiter:
âDurch die Optimierung Ihres Puppeteer-Skripts können Sie einen reibungslosen und effizienten Betrieb mit genauen und konsistenten Ergebnissen sicherstellen.â â ScrapeOps [7]
Puppeteer ist ein Browser-Automatisierungstool, das sich durch Aufgaben wie Headless-Browser-Steuerung, Formularautomatisierung, UI-Tests, das Aufnehmen von Screenshots, das Generieren von PDFs und Web-Scraping-Funktionen auszeichnet.[1].
Hier ein kurzer Blick auf die Kernfunktionen:
| Merkmal | Capability | Vorteile |
|---|---|---|
| Browser-UnterstĂŒtzung | Chrome/Chromium, Firefox | Funktioniert in mehreren Umgebungen |
| AusfĂŒhrungsmodus | Kopflos/Mit Kopf | Geeignet fĂŒr verschiedene Szenarien |
| Kennzahlen | Leichte Bedienung | Verwendet weniger Systemressourcen |
| API-Zugriff | DevTools-Protokoll | Bietet detaillierte Browserkontrolle |
Sie können diese Möglichkeiten optimal nutzen, indem Sie spezifische, auf Ihre BedĂŒrfnisse zugeschnittene Strategien verfolgen.
Um das Potenzial von Puppeteer zu maximieren, sollten Sie diese Strategien zur Verbesserung von Leistung und ZuverlÀssigkeit in Betracht ziehen:
Ressourcenmanagement
Das folgende Skript deaktiviert unnötige Ressourcen wie Bilder, Stylesheets und Schriftarten, um die Seitenladegeschwindigkeit zu verbessern:
// Optimize page load performance
await page.setRequestInterception(true);
page.on('request', request => {
if (['image', 'stylesheet', 'font'].indexOf(request.resourceType()) !== -1) {
request.abort();
} else {
request.continue();
}
});
Fehlervermeidung
Verwenden Sie diesen Codeausschnitt, um sicherzustellen, dass Ihr Skript auf das Erscheinen eines Elements wartet, bevor es mit ihm interagiert:
await page.waitForSelector('#target-element', {
timeout: 5000,
visible: true
});
FĂŒhren Sie fĂŒr Produktionskonfigurationen die folgenden Schritte aus:
âDurch die Optimierung Ihres Puppeteer-Skripts können Sie einen reibungslosen und effizienten Betrieb mit genauen und konsistenten Ergebnissen sicherstellen.â â ScrapeOps [7]
Apps austauschen
Anwendung 1
Anwendung 2
Schritt 1: WÀhlen ein Auslöser
Schritt 2: WĂ€hle eine Aktion
Keine Kreditkarte notwendig
Ohne EinschrÀnkung
