Browserautomatisierung mit Puppeteer und JavaScript: Praktische Umsetzung in Node.js
Erfahren Sie anhand praktischer Beispiele und bewährter Methoden, wie Sie Browseraufgaben mit Puppeteer in Node.js automatisieren können – vom Web-Scraping bis zur Formularautomatisierung.
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:
- Dynamische Inhaltsverarbeitung: Perfekt für moderne Web-Apps und zum Umgehen von Erkennungssystemen.
- Common-Gebrauch: Web Scraping, PDF-Generierung, Screenshot-Erfassung und Formularautomatisierung.
- Einfache Einrichtung: Installieren Sie Puppeteer mit
npm install puppeteer, und es wird mit einer kompatiblen Version von Chrome geliefert.
Kurzes Beispiel:
<span class="hljs-keyword">import</span> puppeteer <span class="hljs-keyword">from</span> <span class="hljs-string">'puppeteer'</span>;
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runAutomation</span>(<span class="hljs-params"></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-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>);
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}
<span class="hljs-title function_">runAutomation</span>();
Warum es auffällt:
- Modi: Headless (CI/CD-Aufgaben) oder vollständige Benutzeroberfläche (Debugging).
- Seiteninteraktionen: Automatisieren Sie Klicks, Eingaben und Navigation mithilfe von CSS-Selektoren.
- Leistungstipps: Deaktivieren Sie Bilder, verwenden Sie den Stealth-Modus und verwalten Sie asynchrone Vorgänge effizient.
Vom Anfänger bis zum fortgeschrittenen Benutzer vereinfacht Puppeteer die Browserautomatisierung und ist damit ein unverzichtbares Tool für Node.js-Entwickler.
Modernes Web-Testing und Automatisierung mit Puppenspieler (Google ...
Ersteinrichtung und Konfiguration
Befolgen Sie diese Schritte, um Puppeteer in Node.js einzurichten und alles für die Automatisierung vorzubereiten.
Einrichten Node.js Arbeitsumfeld
Für den Einstieg benötigen Sie drei Hauptkomponenten:
| Komponente | Zweck | Befehl „Überprüfen“ |
|---|---|---|
| Node.js | Laufzeitumgebung | Knoten - 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]..
Projekt-Setup mit Puppeteer
So erstellen Sie ein neues Puppeteer-Projekt:
- Schritt 1:: Lauf
mkdir puppeteer-projectum einen Projektordner zu erstellen. - Schritt 2:: Navigieren Sie zum Ordner und initialisieren Sie ihn mit
cd puppeteer-project && npm init -y. - Schritt 3:: Installieren Sie Puppeteer mit
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]..
Grundlegende Skriptstruktur
Hier ist eine einfache Puppeteer-Skriptvorlage:
<span class="hljs-keyword">import</span> puppeteer <span class="hljs-keyword">from</span> <span class="hljs-string">'puppeteer'</span>;
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runAutomation</span>(<span class="hljs-params"></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-keyword">const</span> page = <span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">try</span> {
<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">800</span> });
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(<span class="hljs-string">'https://example.com'</span>);
<span class="hljs-comment">// Add your actions here</span>
} <span class="hljs-keyword">finally</span> {
<span class="hljs-keyword">await</span> browser.<span class="hljs-title function_">close</span>();
}
}
<span class="hljs-title function_">runAutomation</span>();
Best Practices zum Schreiben von Puppeteer-Skripten:
- Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen,
page.waitForSelector()um sicherzustellen, dass die Elemente vollständig geladen sind, bevor mit ihnen interagiert wird [4].. - Legen Sie die Ansichtsfensterabmessungen für eine konsistente Seitendarstellung fest.
- Verpacken Sie Ihren Code in
try/finallyBlöcke zur Fehlerbehandlung und zum Sicherstellen des ordnungsgemäßen Schließens des Browsers. - Schließen Sie immer die Browserinstanz, um Speicherprobleme zu vermeiden [2]..
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.
Hauptfunktionen von Puppeteer
Lassen Sie uns die wichtigsten Funktionen von Puppeteer für eine effektive Browserautomatisierung aufschlüsseln.
Grundlagen der Browsersteuerung
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:
<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">1920</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">1080</span> },
<span class="hljs-attr">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});
Methoden zur Seiteninteraktion
Puppeteer vereinfacht die Interaktion mit Webseiten mithilfe von CSS-Selektoren und integrierten Wartefunktionen, um sicherzustellen, dass Elemente bereit sind. Beispiel:
<span class="hljs-comment">// Wait for the email input field to load and type an email</span>
<span class="hljs-keyword">const</span> emailInput = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'input[type="email"]'</span>);
<span class="hljs-keyword">await</span> emailInput.<span class="hljs-title function_">type</span>(<span class="hljs-string">'[email protected]'</span>);
<span class="hljs-comment">// Wait for the submit button to appear and click it</span>
<span class="hljs-keyword">const</span> submitButton = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'button[type="submit"]'</span>);
<span class="hljs-keyword">await</span> submitButton.<span class="hljs-title function_">click</span>();
Sie können verschiedene Aktionen ausführen, beispielsweise:
- Mausereignisse: Klicken, schweben oder ziehen und ablegen.
- Tastatureingabe: Geben Sie Text ein oder verwenden Sie Tastenkombinationen.
- Formularhandhabung: Arbeiten Sie mit Dropdowns, Kontrollkästchen und Datei-Uploads.
- Frame-Navigation: Interagieren Sie mit Iframes oder wechseln Sie zwischen mehreren Fenstern.
Verwalten asynchroner Vorgänge
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:
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#submit-button'</span>)
]);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.success-message'</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-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, 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 | Zweck | 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 |
sbb-itb-23997f1
Implementierungsbeispiele
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.
Datenextraktionsmethoden
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrapeReviews</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> reviews = [];
<span class="hljs-comment">// Scroll until no new content loads</span>
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">scrollToBottom</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">let</span> lastHeight = <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">while</span> (<span class="hljs-literal">true</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">2000</span>);
<span class="hljs-keyword">let</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 === lastHeight) <span class="hljs-keyword">break</span>;
lastHeight = newHeight;
}
}
<span class="hljs-comment">// Extract review data</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">scrollToBottom</span>();
<span class="hljs-keyword">const</span> reviewElements = <span class="hljs-keyword">await</span> page.$$(<span class="hljs-string">'.review-box'</span>);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> element <span class="hljs-keyword">of</span> reviewElements) {
<span class="hljs-keyword">const</span> review = <span class="hljs-keyword">await</span> element.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> ({
<span class="hljs-attr">text</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.review-text'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">rating</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.rating'</span>).<span class="hljs-title function_">getAttribute</span>(<span class="hljs-string">'data-score'</span>),
<span class="hljs-attr">date</span>: el.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.review-date'</span>).<span class="hljs-property">textContent</span>
}));
reviews.<span class="hljs-title function_">push</span>(review);
}
<span class="hljs-keyword">return</span> 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 | Puppenspieler-Extra-Plugin-Stealth | Hilft, Entdeckung zu vermeiden |
| Verzögerungen hinzufügen | page.waitForTimeout() | Verhindert Ratenbegrenzungen |
Fahren wir nun mit der Automatisierung von Formularen fort.
Schritte zur Formularautomatisierung
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">handleLogin</span>(<span class="hljs-params">username, password</span>) {
<span class="hljs-keyword">try</span> {
<span class="hljs-comment">// Click cookie accept button if visible</span>
<span class="hljs-keyword">const</span> cookieButton = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.cookie-accept'</span>);
<span class="hljs-keyword">if</span> (cookieButton) <span class="hljs-keyword">await</span> cookieButton.<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Fill login form</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#username'</span>, username, { <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> });
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">type</span>(<span class="hljs-string">'#password'</span>, password, { <span class="hljs-attr">delay</span>: <span class="hljs-number">100</span> });
<span class="hljs-comment">// Submit and wait for navigation</span>
<span class="hljs-keyword">await</span> <span class="hljs-title class_">Promise</span>.<span class="hljs-title function_">all</span>([
page.<span class="hljs-title function_">waitForNavigation</span>(),
page.<span class="hljs-title function_">click</span>(<span class="hljs-string">'#login-button'</span>)
]);
<span class="hljs-comment">// Check for error messages</span>
<span class="hljs-keyword">const</span> errorElement = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'.error-message-container'</span>);
<span class="hljs-keyword">if</span> (errorElement) {
<span class="hljs-keyword">const</span> errorText = <span class="hljs-keyword">await</span> errorElement.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">el</span> =></span> el.<span class="hljs-property">textContent</span>);
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`Login failed: <span class="hljs-subst">${errorText}</span>`</span>);
}
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Login automation failed:'</span>, error);
}
}
Tools zur Seitenerfassung
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">captureWebPage</span>(<span class="hljs-params">url</span>) {
<span class="hljs-comment">// Set viewport for consistent captures</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setViewport</span>({
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>,
<span class="hljs-attr">deviceScaleFactor</span>: <span class="hljs-number">2</span>
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, { <span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'networkidle0'</span> });
<span class="hljs-comment">// Take full-page screenshot</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">'capture.jpg'</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</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">// Generate PDF with custom settings</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">pdf</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">'page.pdf'</span>,
<span class="hljs-attr">format</span>: <span class="hljs-string">'A4'</span>,
<span class="hljs-attr">printBackground</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">margin</span>: { <span class="hljs-attr">top</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">right</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">bottom</span>: <span class="hljs-string">'20px'</span>, <span class="hljs-attr">left</span>: <span class="hljs-string">'20px'</span> }
});
}
„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.
Erweiterte Funktionen und Leistung
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.
Testen und Fehlermanagement
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">robustPageOperation</span>(<span class="hljs-params">url</span>) {
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url, {
<span class="hljs-attr">waitUntil</span>: <span class="hljs-string">'domcontentloaded'</span>, <span class="hljs-comment">// Faster than 'networkidle2'</span>
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-comment">// Monitor failed requests</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'requestfailed'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Failed request: <span class="hljs-subst">${request.url()}</span>`</span>);
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">`Reason: <span class="hljs-subst">${request.failure().errorText}</span>`</span>);
});
<span class="hljs-comment">// Capture a screenshot on error for debugging</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'error'</span>, <span class="hljs-title function_">async</span> (error) => {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">screenshot</span>({
<span class="hljs-attr">path</span>: <span class="hljs-string">`error-<span class="hljs-subst">${<span class="hljs-built_in">Date</span>.now()}</span>.png`</span>,
<span class="hljs-attr">fullPage</span>: <span class="hljs-literal">true</span>
});
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Page error:'</span>, error);
});
} <span class="hljs-keyword">catch</span> (error) {
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Navigation failed:'</span>, error);
<span class="hljs-keyword">throw</span> 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.
Mehrseitige Operationen
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:
<span class="hljs-keyword">const</span> { <span class="hljs-title class_">Cluster</span> } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-cluster'</span>);
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">runParallelOperations</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> cluster = <span class="hljs-keyword">await</span> <span class="hljs-title class_">Cluster</span>.<span class="hljs-title function_">launch</span>({
<span class="hljs-attr">concurrency</span>: <span class="hljs-title class_">Cluster</span>.<span class="hljs-property">CONCURRENCY_CONTEXT</span>,
<span class="hljs-attr">maxConcurrency</span>: <span class="hljs-number">4</span>,
<span class="hljs-attr">monitor</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">task</span>(<span class="hljs-title function_">async</span> ({ page, <span class="hljs-attr">data</span>: url }) => {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">goto</span>(url);
<span class="hljs-comment">// Perform page operations</span>
});
<span class="hljs-comment">// Queue URLs for processing</span>
<span class="hljs-keyword">const</span> urls = [<span class="hljs-string">'url1'</span>, <span class="hljs-string">'url2'</span>, <span class="hljs-string">'url3'</span>];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> url <span class="hljs-keyword">of</span> urls) {
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">queue</span>(url);
}
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">idle</span>();
<span class="hljs-keyword">await</span> cluster.<span class="hljs-title function_">close</span>();
}
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.
Geschwindigkeits- und Ressourcenmanagement
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:
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">optimizedPageOperation</span>(<span class="hljs-params"></span>) {
<span class="hljs-comment">// Intercept and optimize requests</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-keyword">if</span> (request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'image'</span> || request.<span class="hljs-title function_">resourceType</span>() === <span class="hljs-string">'stylesheet'</span>) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
<span class="hljs-comment">// Implement caching</span>
<span class="hljs-keyword">const</span> cache = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Map</span>();
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'response'</span>, <span class="hljs-keyword">async</span> response => {
<span class="hljs-keyword">const</span> url = response.<span class="hljs-title function_">url</span>();
<span class="hljs-keyword">if</span> (response.<span class="hljs-title function_">ok</span>() && !cache.<span class="hljs-title function_">has</span>(url)) {
cache.<span class="hljs-title function_">set</span>(url, <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">text</span>());
}
});
}
Node.js-Integrationshandbuch
Erfahren Sie, wie Sie Puppeteer mit einer sauberen, wartbaren Codestruktur nahtlos in Ihre Node.js-Projekte integrieren.
Code-Organisation
Strukturieren Sie Ihre Automatisierungsmodule, um Übersichtlichkeit und Wiederverwendung zu gewährleisten. Hier ist ein Beispiel-Setup:
<span class="hljs-comment">// automation/browser.js</span>
<span class="hljs-keyword">const</span> puppeteer = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer'</span>);
<span class="hljs-keyword">class</span> <span class="hljs-title class_">BrowserManager</span> {
<span class="hljs-keyword">async</span> <span class="hljs-title function_">initialize</span>(<span class="hljs-params"></span>) {
<span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span> = <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">args</span>: [<span class="hljs-string">'--no-sandbox'</span>, <span class="hljs-string">'--disable-setuid-sandbox'</span>]
});
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>;
}
<span class="hljs-keyword">async</span> <span class="hljs-title function_">createPage</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> page = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>.<span class="hljs-title function_">newPage</span>();
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultNavigationTimeout</span>(<span class="hljs-number">30000</span>);
<span class="hljs-keyword">return</span> page;
}
<span class="hljs-keyword">async</span> <span class="hljs-title function_">cleanup</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>) {
<span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">browser</span>.<span class="hljs-title function_">close</span>();
}
}
}
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BrowserManager</span>();
Durch diese Konfiguration werden die Verantwortlichkeiten getrennt, sodass Ihr Code einfacher zu verwalten und zu skalieren ist.
Bibliotheksintegration
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:
<span class="hljs-keyword">const</span> winston = <span class="hljs-built_in">require</span>(<span class="hljs-string">'winston'</span>);
<span class="hljs-keyword">const</span> puppeteerExtra = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra'</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title class_">StealthPlugin</span> = <span class="hljs-built_in">require</span>(<span class="hljs-string">'puppeteer-extra-plugin-stealth'</span>);
<span class="hljs-comment">// Set up logging with winston</span>
<span class="hljs-keyword">const</span> logger = winston.<span class="hljs-title function_">createLogger</span>({
<span class="hljs-attr">level</span>: <span class="hljs-string">'info'</span>,
<span class="hljs-attr">format</span>: winston.<span class="hljs-property">format</span>.<span class="hljs-title function_">json</span>(),
<span class="hljs-attr">transports</span>: [
<span class="hljs-keyword">new</span> winston.<span class="hljs-property">transports</span>.<span class="hljs-title class_">File</span>({ <span class="hljs-attr">filename</span>: <span class="hljs-string">'automation.log'</span> })
]
});
<span class="hljs-comment">// Configure Puppeteer with stealth mode</span>
puppeteerExtra.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">StealthPlugin</span>());
<span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">setupAutomation</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">const</span> browser = <span class="hljs-keyword">await</span> puppeteerExtra.<span class="hljs-title function_">launch</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-comment">// Log browser console messages</span>
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'console'</span>, <span class="hljs-function"><span class="hljs-params">message</span> =></span> {
logger.<span class="hljs-title function_">info</span>(<span class="hljs-string">`Browser console: <span class="hljs-subst">${message.text()}</span>`</span>);
});
<span class="hljs-keyword">return</span> { 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.
Schritte zur Produktionsbereitstellung
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 | Zweck |
|---|---|---|
| Abhängigkeiten | Installieren Sie Chrome-Abhängigkeiten | Stellt die Browserfunktionalität sicher |
| Cache-Konfiguration | .cache/puppeteer-Verzeichnis einrichten | 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:
<span class="hljs-keyword">const</span> { join } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>);
<span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = {
<span class="hljs-attr">cacheDirectory</span>: <span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">'.cache'</span>, <span class="hljs-string">'puppeteer'</span>),
<span class="hljs-attr">executablePath</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">CHROME_PATH</span> || <span class="hljs-literal">null</span>,
<span class="hljs-attr">defaultViewport</span>: {
<span class="hljs-attr">width</span>: <span class="hljs-number">1920</span>,
<span class="hljs-attr">height</span>: <span class="hljs-number">1080</span>
}
};
So optimieren Sie Ihre Skripte weiter:
- Schließen Sie nicht verwendete Seiten und Browserinstanzen so schnell wie möglich.
- Verwenden Sie Try/Catch-Blöcke, um Fehler zu behandeln und effektiv zu protokollieren.
- Überwachen Sie die Speichernutzung und Reaktionszeiten, um Engpässe zu vermeiden.
- Richten Sie Sicherheitsheader und Zugriffskontrollen ein, um Ihre Umgebung zu schützen.
„Durch die Optimierung Ihres Puppeteer-Skripts können Sie einen reibungslosen und effizienten Betrieb mit genauen und konsistenten Ergebnissen sicherstellen.“ – ScrapeOps [7].
Zusammenfassung
Feature-Übersicht
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 |
| Leistung | 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.
Implementierungshandbuch
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:
<span class="hljs-comment">// Optimize page load performance</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setRequestInterception</span>(<span class="hljs-literal">true</span>);
page.<span class="hljs-title function_">on</span>(<span class="hljs-string">'request'</span>, <span class="hljs-function"><span class="hljs-params">request</span> =></span> {
<span class="hljs-keyword">if</span> ([<span class="hljs-string">'image'</span>, <span class="hljs-string">'stylesheet'</span>, <span class="hljs-string">'font'</span>].<span class="hljs-title function_">indexOf</span>(request.<span class="hljs-title function_">resourceType</span>()) !== -<span class="hljs-number">1</span>) {
request.<span class="hljs-title function_">abort</span>();
} <span class="hljs-keyword">else</span> {
request.<span class="hljs-title function_">continue</span>();
}
});
Fehlervermeidung
Verwenden Sie diesen Codeausschnitt, um sicherzustellen, dass Ihr Skript auf das Erscheinen eines Elements wartet, bevor es mit ihm interagiert:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'#target-element'</span>, {
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>
});
Führen Sie für Produktionskonfigurationen die folgenden Schritte aus:
- Infrastruktur-Setup: Installieren Sie die erforderlichen Chrome-Abhängigkeiten und konfigurieren Sie die Cache-Verzeichnisse korrekt.
- Performance-Verbesserungen: Minimieren Sie die Ressourcennutzung, indem Sie nicht benötigte Assets deaktivieren und die Anforderungsabfangfunktion aktivieren.
- Sicherheitsverbesserungen: Ergänzen Sie die Puppenspieler-Extra-plugin-stealth Plugin zur Reduzierung des Erkennungsrisikos[7]..
- Skalierung: Benutzen Puppenspieler-Cluster für die parallele Verarbeitung, um größere Arbeitslasten effizient zu bewältigen[7]..
„Durch die Optimierung Ihres Puppeteer-Skripts können Sie einen reibungslosen und effizienten Betrieb mit genauen und konsistenten Ergebnissen sicherstellen.“ – ScrapeOps [7].
Ähnliche Artikel
