Ausführen von JavaScript im Seitenkontext mit page.evaluate in Puppeteer
Lernen Sie, wie Sie die page.evaluate-Methode von Puppeteer effektiv nutzen können, um JavaScript im Browserkontext für Webautomatisierungsaufgaben auszuführen.
page.evaluate() ist ein Schlüssel Puppenspieler Methode, mit der Sie JavaScript direkt im Browserkontext ausführen können. Es überbrückt Node.js und den Browser. Dies ermöglicht Aufgaben wie DOM-Manipulation, Datenextraktion und Automatisierung dynamischer Webseiten. Folgendes müssen Sie wissen:
- Was es macht: Führt JavaScript im Browser aus, als ob Sie die Konsole des Browsers verwenden würden.
- Funktionsweise: Wandelt eine Funktion in eine Zeichenfolge um, sendet sie an den Browser, führt sie aus und gibt das Ergebnis zurück.
- Wichtige Verwendungszwecke:
- Extrahieren von Daten von Websites (z. B. Text, Tabellen, JSON).
- Automatisieren von Formulareinreichungen und Benutzerinteraktionen.
- Handhabung dynamischer Inhalte wie Endlos-Scrollen oder AJAX-Updates.
- Einschränkungen: Funktionen müssen JSON-serialisierbar sein und auf Node.js-Variablen kann im Browserkontext nicht direkt zugegriffen werden.
Kurzes Beispiel:
<span class="hljs-keyword">const</span> title = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span>);
Dadurch wird der Seitentitel direkt aus dem Browser abgerufen.
Vergleich: Node.js vs. Browserkontext
| Merkmal | Node.js-Kontext | Browserkontext |
|---|---|---|
| Globale Objekte | Prozess, erfordern | Fenster, Dokument |
| Skriptspeicherort | Lokale Maschine | Zielwebseite |
| API-Zugriff | Node.js-APIs | Browser-Web-APIs |
Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, page.evaluate() für präzise, effiziente Automatisierungsaufgaben, insbesondere bei der Arbeit mit JavaScript-lastigen Websites.
NodeJS: Nodejs/Puppenspieler - So verwenden Sie page.evaluate
Erläuterung des Seitenkontexts
Bei der Arbeit mit Puppeteer für die Web-Automatisierung ist es wichtig, den Unterschied zwischen dem Node.js-Kontext und der BrowserkontextDiese beiden Umgebungen sind isoliert und jede hat ihre eigenen Regeln für die Ausführung von Code und den Datenaustausch.
Vergleich von Node.js- und Browserkontexten
Puppeteer arbeitet in zwei Umgebungen: der Node.js-Kontext, wo Ihr Hauptskript ausgeführt wird, und die Browserkontext, wo Interaktionen mit der Webseite stattfinden. Dies sind separate Prozesse, jeder mit seiner eigenen virtuellen Maschine [3]..
Hier ist ein kurzer Vergleich ihrer wichtigsten Eigenschaften:
| Merkmal | Node.js-Kontext | Browserkontext |
|---|---|---|
| Globale Objekte | Prozess, erforderlich, __dirname | Fenster, Dokument, lokaler Speicher |
| Skriptspeicherort | Lokale Maschine | Zielwebseite |
| Variablenbereich | Puppenspieler-Skriptumfang | Seitenkontextbereich |
| API-Zugriff | Node.js-APIs | Browser-Web-APIs |
| Speicherplatz | Separater Prozess | Browser-Prozess |
So funktioniert Kontextkommunikation
Der Datenaustausch zwischen diesen Kontexten umfasst eine Reihe von Schritten, die stark auf Serialisierung beruhen:
- Die Funktion wird in einen String umgewandelt mit
Function.prototype.toString()[1].. - Diese Zeichenfolge wird über die Chrome DevTools-Protokoll [1]..
- Der Browser wertet die Funktion innerhalb seiner Umgebung aus.
- Die Ergebnisse werden in JSON serialisiert und an den Node.js-Kontext zurückgesendet [1]..
Wichtige Einschränkungen: Funktionen im Browserkontext können nicht direkt auf Variablen aus dem Node.js-Bereich zugreifen. Puppeteer bietet spezielle Tools, um diese Herausforderungen zu bewältigen:
page.evaluateHandle(): Gibt Referenzen auf Objekte im Browserkontext zurück [1]..page.exposeFunction(): Ermöglicht dem Browser, Node.js-Funktionen aufzurufen [1]..evaluateOnNewDocument(): Führt Code aus, bevor Seitenskripte geladen werden [1]..
Allerdings kann die JSON-Serialisierung bestimmte Eigenschaften entfernen, insbesondere bei komplexen Objekten wie DOM-Knoten [2].Um Probleme zu vermeiden, übergeben Sie Daten als Funktionsargumente, anstatt sich auf Node.js-Variablen zu verlassen [3]..
Die Beherrschung dieser Kommunikationstechniken gewährleistet, dass Sie page.evaluate effektiv für Automatisierungsaufgaben. Als Nächstes werden wir uns mit praktischen Beispielen befassen, um diese Konzepte in Aktion zu sehen.
Erste Schritte mit page.evaluate
Methodenstruktur und Parameter
Syntax:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(pageFunction, ...args)
| Parameter | Typ | Beschreibung |
|---|---|---|
| Seitenfunktion | Funktion oder Zeichenfolge | JavaScript-Code zur Ausführung im Browserkontext |
| args | Optionale Parameter | Von Node.js an den Browserkontext übergebene Werte |
| Rückgabewert | Versprechen | Wird mit dem Rückgabewert der Funktion aufgelöst |
Die Seitenfunktion kann eine Funktion oder ein String mit JavaScript-Code sein. Die Verwendung einer Funktion ist im Allgemeinen besser für das Debuggen und Typoskript Kompatibilität. Nachfolgend finden Sie einige Beispiele, die die Funktionsweise veranschaulichen.
Grundlegende Codebeispiele
Beispiele:
- Extrahieren Sie Text aus dem ersten
<h1>direkt aus dem DOM:
<span class="hljs-keyword">const</span> headingText = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'h1'</span>).<span class="hljs-property">textContent</span>;
});
- Automatisieren Sie die Formularübermittlung durch Übergeben von Parametern:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">username, password</span>) =></span> {
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'username'</span>).<span class="hljs-property">value</span> = username;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'password'</span>).<span class="hljs-property">value</span> = password;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#login-form'</span>).<span class="hljs-title function_">submit</span>();
}, <span class="hljs-string">'myUsername'</span>, <span class="hljs-string">'myPassword'</span>);
- Manipulieren Sie das DOM, indem Sie ein neues Element hinzufügen:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> div = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">'div'</span>);
div.<span class="hljs-property">textContent</span> = <span class="hljs-string">'Added by Puppeteer'</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-title function_">appendChild</span>(div);
<span class="hljs-keyword">return</span> div.<span class="hljs-property">textContent</span>;
});
Wichtige Hinweise zur Entwicklung
- Funktionen werden isoliert von Ihrem Node.js-Code ausgeführt.
- Die an die Funktion übergebenen Argumente müssen JSON-serialisierbar.
- Die zurückgegebenen Werte werden automatisch in ein Versprechen.
- Der Umgang mit komplexen Objekten wie DOM-Knoten erfordert besondere Sorgfalt.
Tipp zur Fehlerbehebung: Verwenden Sie die folgende Konfiguration, um das Debuggen während der Entwicklung zu aktivieren:
<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">false</span>,
<span class="hljs-attr">slowMo</span>: <span class="hljs-number">100</span> <span class="hljs-comment">// Adds a 100ms delay to each operation</span>
});
Als Nächstes werden wir uns mit Techniken zum Datenaustausch zwischen Node.js und Browserkontexten befassen.
Datenaustausch zwischen Kontexten
Eingabeparameter
Bei der Datenübertragung mit page.evaluate, bleiben Sie bei JSON-serialisierbaren Werten für Eingabeargumente.
Hier ist eine kurze Aufschlüsselung der unterstützten Parametertypen:
| Parametertyp | Unterstützt? | Beispiel |
|---|---|---|
| Primitive | ✓ Vollständig | 'text', 42, true |
| Arrays/Objekte | ✓ JSON-kompatibel | { key: 'value' }, [1, 2, 3] |
| Funktionen | ✗ Nicht direkt | Verwenden Sie page.exposeFunction |
| DOM-Elemente | ✓ Durch JSHandle | Verwenden Sie page.evaluateHandle |
Sehen wir uns nun an, wie diese Werte vom Browserkontext zurückgegeben werden.
Ausgabeverarbeitung
Beim Benutzen page.evaluatewerden die zurückgegebenen Werte automatisch in JSON serialisiert. So funktioniert es:
<span class="hljs-comment">// Returning a simple value</span>
<span class="hljs-keyword">const</span> pageTitle = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span>);
<span class="hljs-comment">// Returning a complex object</span>
<span class="hljs-keyword">const</span> metrics = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> ({
<span class="hljs-attr">viewport</span>: <span class="hljs-variable language_">window</span>.<span class="hljs-property">innerWidth</span>,
<span class="hljs-attr">scrollHeight</span>: <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollHeight</span>,
<span class="hljs-attr">timestamp</span>: <span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>()
}));
„Als Faustregel gilt: Wenn der Rückgabewert der gegebenen Funktion komplizierter ist als ein JSON-Objekt (z. B. die meisten Klassen), dann
evaluatewird wahrscheinlich einen gekürzten Wert zurückgeben (oder{}). Dies liegt daran, dass wir nicht den tatsächlichen Rückgabewert zurückgeben, sondern eine deserialisierte Version als Ergebnis der Übertragung des Rückgabewerts über ein Protokoll an Puppeteer." [1].
Nach dem Abrufen der Ausgabe können Probleme mit der Serialisierung auftreten. So können Sie diese Probleme lösen.
Behandeln von Serialisierungsproblemen
Einige häufige Szenarien erfordern spezielle Problemumgehungen:
- Arbeiten mit DOM-Elementen
<span class="hljs-keyword">const</span> bodyHandle = <span class="hljs-keyword">await</span> page.$(<span class="hljs-string">'body'</span>);
<span class="hljs-keyword">const</span> html = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">body</span> =></span> body.<span class="hljs-property">innerHTML</span>, bodyHandle);
<span class="hljs-keyword">await</span> bodyHandle.<span class="hljs-title function_">dispose</span>(); <span class="hljs-comment">// Always clean up to avoid memory leaks</span>
- Verwenden von Node.js-Funktionen
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">exposeFunction</span>(<span class="hljs-string">'md5'</span>, <span class="hljs-function"><span class="hljs-params">text</span> =></span>
crypto.<span class="hljs-title function_">createHash</span>(<span class="hljs-string">'md5'</span>).<span class="hljs-title function_">update</span>(text).<span class="hljs-title function_">digest</span>(<span class="hljs-string">'hex'</span>)
);
<span class="hljs-keyword">const</span> hash = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">md5</span>(<span class="hljs-string">'test-string'</span>);
});
- Anpassen der Transpiler-Einstellungen
Wenn Sie mit TypeScript arbeiten, stellen Sie sicher, dass Ihr Transpiler richtig eingerichtet ist:
<span class="hljs-comment">// tsconfig.json</span>
{
<span class="hljs-string">"compilerOptions"</span>: {
<span class="hljs-string">"target"</span>: <span class="hljs-string">"es2018"</span>
}
}
Diese Strategien helfen Ihnen, den Datenaustausch in verschiedenen Kontexten effektiv zu handhaben.
sbb-itb-23997f1
Praktische Beispiele
Hier ist, wie Sie verwenden können page.evaluate in realen Szenarien, komplett mit praktischen Codeausschnitten.
Daten extrahieren
Beispiel: Scraping von Produktdetails
Dieses Skript sammelt Details wie Titel, Preis, Bewertung und Lagerstatus von Produktkarten auf einer Webseite:
<span class="hljs-keyword">const</span> productData = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> products = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-card'</span>));
<span class="hljs-keyword">return</span> products.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">product</span> =></span> ({
<span class="hljs-attr">title</span>: product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.title'</span>).<span class="hljs-property">textContent</span>.<span class="hljs-title function_">trim</span>(),
<span class="hljs-attr">price</span>: product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>.<span class="hljs-title function_">trim</span>(),
<span class="hljs-attr">rating</span>: <span class="hljs-built_in">parseFloat</span>(product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.rating'</span>).<span class="hljs-property">dataset</span>.<span class="hljs-property">value</span>),
<span class="hljs-attr">inStock</span>: product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.stock'</span>).<span class="hljs-property">textContent</span>.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'Available'</span>)
}));
});
Beispiel: Extrahieren von Tabellendaten
Bei diesem Ansatz werden Daten aus einer Tabelle abgerufen, indem die Zeilen und Spalten durchlaufen werden:
<span class="hljs-keyword">const</span> tableData = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> rows = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'table tr'</span>));
<span class="hljs-keyword">return</span> rows.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">row</span> =></span> {
<span class="hljs-keyword">const</span> columns = row.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'td'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(columns, <span class="hljs-function"><span class="hljs-params">column</span> =></span> column.<span class="hljs-property">innerText</span>);
});
});
Formulare automatisieren
Grundlegende Formularautomatisierung
So füllen Sie Formularfelder aus, lösen Ereignisse aus und senden das Formular ab:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-comment">// Fill form fields</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#username'</span>).<span class="hljs-property">value</span> = <span class="hljs-string">'testuser'</span>;
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#password'</span>).<span class="hljs-property">value</span> = <span class="hljs-string">'secretpass'</span>;
<span class="hljs-comment">// Trigger input events for dynamic forms</span>
<span class="hljs-keyword">const</span> event = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Event</span>(<span class="hljs-string">'input'</span>, { <span class="hljs-attr">bubbles</span>: <span class="hljs-literal">true</span> });
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#username'</span>).<span class="hljs-title function_">dispatchEvent</span>(event);
<span class="hljs-comment">// Submit form</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'form'</span>).<span class="hljs-title function_">submit</span>();
});
Umgang mit komplexen Formularen
Für Aufgaben wie das Auswählen von Dropdown-Optionen oder das Aktivieren von Optionsfeldern:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-comment">// Select dropdown option</span>
<span class="hljs-keyword">const</span> select = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#country'</span>);
select.<span class="hljs-property">value</span> = <span class="hljs-string">'US'</span>;
select.<span class="hljs-title function_">dispatchEvent</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Event</span>(<span class="hljs-string">'change'</span>, { <span class="hljs-attr">bubbles</span>: <span class="hljs-literal">true</span> }));
<span class="hljs-comment">// Check radio button</span>
<span class="hljs-keyword">const</span> radio = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'input[value="express"]'</span>);
radio.<span class="hljs-property">checked</span> = <span class="hljs-literal">true</span>;
radio.<span class="hljs-title function_">dispatchEvent</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Event</span>(<span class="hljs-string">'change'</span>, { <span class="hljs-attr">bubbles</span>: <span class="hljs-literal">true</span> }));
});
Verwalten dynamischer Elemente
Beispiel: Endloses Scrollen
Dieses Skript scrollt durch eine Seite, bis es mindestens 100 Elemente gesammelt hat:
<span class="hljs-keyword">const</span> items = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> <span class="hljs-title function_">delay</span> = ms => <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function"><span class="hljs-params">resolve</span> =></span> <span class="hljs-built_in">setTimeout</span>(resolve, ms));
<span class="hljs-keyword">const</span> items = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>();
<span class="hljs-keyword">while</span> (items.<span class="hljs-property">size</span> < <span class="hljs-number">100</span>) {
<span class="hljs-comment">// Scroll to bottom</span>
<span class="hljs-variable language_">window</span>.<span class="hljs-title function_">scrollTo</span>(<span class="hljs-number">0</span>, <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">scrollHeight</span>);
<span class="hljs-comment">// Wait for new content</span>
<span class="hljs-keyword">await</span> <span class="hljs-title function_">delay</span>(<span class="hljs-number">1000</span>);
<span class="hljs-comment">// Collect items</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.item'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span>
items.<span class="hljs-title function_">add</span>(item.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">trim</span>())
);
}
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(items);
});
Beispiel: Umgang mit AJAX-Inhalten
Um mehr Inhalt dynamisch zu laden, klickt dieses Skript auf die Schaltfläche „Mehr laden“ und wartet, bis neue Elemente angezeigt werden:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-comment">// Click load more button</span>
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#loadMore'</span>).<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Wait for content update</span>
<span class="hljs-keyword">await</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function"><span class="hljs-params">resolve</span> =></span> {
<span class="hljs-keyword">const</span> observer = <span class="hljs-keyword">new</span> <span class="hljs-title class_">MutationObserver</span>(<span class="hljs-function">(<span class="hljs-params">mutations, obs</span>) =></span> {
<span class="hljs-keyword">if</span> (<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.item'</span>).<span class="hljs-property">length</span> > <span class="hljs-number">10</span>) {
obs.<span class="hljs-title function_">disconnect</span>();
<span class="hljs-title function_">resolve</span>();
}
});
observer.<span class="hljs-title function_">observe</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>, {
<span class="hljs-attr">childList</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">subtree</span>: <span class="hljs-literal">true</span>
});
});
});
Diese Beispiele zeigen den Umgang mit verschiedenen Szenarien wie Scraping, Formularautomatisierung und dynamischen Inhalten. Anpassungen können basierend auf der spezifischen Struktur und dem Verhalten der Webseite vorgenommen werden, mit der Sie arbeiten.
Verwenden von page.evaluate in Latenknoten
Latenode integriert die Kernfunktionen von Puppeteer in seine Automatisierungs-Workflows und erleichtert so die Ausführung von JavaScript direkt im Browser. Mit page.evaluateBenutzer können das DOM bearbeiten und Daten effizient extrahieren. Dieser Ansatz ermöglicht die nahtlose Integration erweiterter Datenverarbeitung und DOM-Operationen in die Automatisierungsumgebung von Latenode.
Browser-Skripte in Latenode
Das Browser-Automatisierungsmodul von Latenode verwendet page.evaluate um alles von einfachen DOM-Aufgaben bis hin zur komplexeren JavaScript-Ausführung zu bewältigen. So funktioniert es in verschiedenen Szenarien:
<span class="hljs-comment">// Basic DOM interaction</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> loginButton = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#login'</span>);
loginButton.<span class="hljs-title function_">click</span>();
<span class="hljs-comment">// Trigger a custom event</span>
loginButton.<span class="hljs-title function_">dispatchEvent</span>(<span class="hljs-keyword">new</span> <span class="hljs-title class_">Event</span>(<span class="hljs-string">'customClick'</span>));
});
<span class="hljs-comment">// Processing data with exposed functions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">exposeFunction</span>(<span class="hljs-string">'processData'</span>, <span class="hljs-title function_">async</span> (data) => {
<span class="hljs-comment">// Process data in Node.js context</span>
<span class="hljs-keyword">return</span> transformedData;
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> rawData = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#data'</span>).<span class="hljs-property">textContent</span>;
<span class="hljs-keyword">const</span> processed = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">processData</span>(rawData);
<span class="hljs-keyword">return</span> processed;
});
Latenode führt außerdem ein Protokoll des Ausführungsverlaufs, was das Debuggen von Skripts erleichtert.
Automatisierungsbeispiele
Latenode ist bestens für die Verarbeitung dynamischer Inhalte und komplexer Automatisierungsaufgaben gerüstet. Hier ist ein Beispiel für die Verarbeitung dynamischer Inhalte auf einer Seite:
<span class="hljs-keyword">const</span> extractProductData = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> <span class="hljs-title function_">delay</span> = ms => <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function"><span class="hljs-params">resolve</span> =></span> <span class="hljs-built_in">setTimeout</span>(resolve, ms));
<span class="hljs-comment">// Wait for dynamic content to load</span>
<span class="hljs-keyword">while</span> (!<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.product-grid'</span>)) {
<span class="hljs-keyword">await</span> <span class="hljs-title function_">delay</span>(<span class="hljs-number">100</span>);
}
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product'</span>))
.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">product</span> =></span> ({
<span class="hljs-attr">name</span>: product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.name'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">price</span>: product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">availability</span>: product.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.stock'</span>).<span class="hljs-property">dataset</span>.<span class="hljs-property">status</span>
}));
});
Für fortgeschrittenere Operationen, page.exposeFunction ermöglicht eine nahtlose Interaktion zwischen Node.js und dem Browser:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">exposeFunction</span>(<span class="hljs-string">'md5'</span>, <span class="hljs-function"><span class="hljs-params">text</span> =></span>
crypto.<span class="hljs-title function_">createHash</span>(<span class="hljs-string">'md5'</span>).<span class="hljs-title function_">update</span>(text).<span class="hljs-title function_">digest</span>(<span class="hljs-string">'hex'</span>)
);
<span class="hljs-keyword">const</span> processedData = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> sensitiveData = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#secure-data'</span>).<span class="hljs-property">value</span>;
<span class="hljs-keyword">return</span> <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">md5</span>(sensitiveData);
});
Um Verweise auf DOM-Elemente über mehrere Schritte hinweg aufrechtzuerhalten, verwendet Latenode page.evaluateHandle:
<span class="hljs-keyword">const</span> elementHandle = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluateHandle</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.dynamic-content'</span>);
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">element</span> =></span> {
element.<span class="hljs-title function_">scrollIntoView</span>();
}, elementHandle);
Diese Techniken stellen sicher, dass Latenode dynamische Inhalte effektiv verarbeiten und gleichzeitig eine zuverlässige Leistung gewährleisten kann. Für Nutzer des Prime-Plans unterstützt die Plattform bis zu 1.5 Millionen Szenarioläufe pro Monat und bietet umfassende Automatisierungsmöglichkeiten.
Leitfaden zur Fehlerbehebung
Bei der Arbeit mit page.evaluate Bei der Browserautomatisierung können verschiedene Probleme auftreten. Hier finden Sie praktische Lösungen, um diese zu beheben und eine reibungslose Ausführung zu gewährleisten.
Beheben von Kontextfehlern
Konfigurieren Sie Ihre TypeScript-Einstellungen richtig, um Probleme durch Transpilation zu vermeiden. Beispiel:
<span class="hljs-comment">// Use direct, non-transpiled functions</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#button'</span>).<span class="hljs-title function_">click</span>();
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-string">`(async () => {
document.querySelector('#button').click();
})()`</span>);
Vermeiden Sie die direkte Rückgabe von DOM-Elementen aus page.evaluate. Verwenden Sie stattdessen ElementHandle zur besseren Handhabung:
<span class="hljs-comment">// Incorrect: Returning a DOM element</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.dynamic-element'</span>);
});
<span class="hljs-comment">// Correct: Using ElementHandle</span>
<span class="hljs-keyword">const</span> element = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluateHandle</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.dynamic-element'</span>);
});
Lösen von Timing-Problemen
Skripts können ausgeführt werden, bevor die Seite vollständig geladen ist. Dies kann zu Zeitfehlern führen. Verwenden Sie zur Bewältigung solcher Fälle die folgenden Strategien:
<span class="hljs-comment">// Wait for navigation after an action</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-comment">// Wait for a specific condition</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.lazy-loaded'</span>);
<span class="hljs-keyword">return</span> element && element.<span class="hljs-property">dataset</span>.<span class="hljs-property">loaded</span> === <span class="hljs-string">'true'</span>;
}, { <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> });
Setzen Sie für dynamische Websites gezieltere Wartemechanismen ein:
<span class="hljs-comment">// Wait for specific network requests</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForResponse</span>(
<span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">url</span>().<span class="hljs-title function_">includes</span>(<span class="hljs-string">'/api/data'</span>)
);
<span class="hljs-comment">// Ensure elements are both present and visible</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'.dynamic-content'</span>, {
<span class="hljs-attr">visible</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span>
});
Verwalten von DOM-Referenzen
Um Speicherlecks zu vermeiden, verwalten Sie DOM-Referenzen sorgfältig. So geht's:
<span class="hljs-comment">// Use and dispose ElementHandles</span>
<span class="hljs-keyword">const</span> handle = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluateHandle</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">return</span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.temporary-element'</span>);
});
<span class="hljs-keyword">await</span> handle.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function"><span class="hljs-params">element</span> =></span> {
<span class="hljs-comment">// Perform operations</span>
});
<span class="hljs-keyword">await</span> handle.<span class="hljs-title function_">dispose</span>(); <span class="hljs-comment">// Dispose of handle after use</span>
Wenn Sie mit mehreren Elementen arbeiten, übergeben Sie Daten sicher zwischen Kontexten:
<span class="hljs-comment">// Extract data from the DOM</span>
<span class="hljs-keyword">const</span> selector = <span class="hljs-string">'.product-price'</span>;
<span class="hljs-keyword">const</span> price = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">sel</span>) =></span> {
<span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(sel);
<span class="hljs-keyword">return</span> element ? element.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">trim</span>() : <span class="hljs-literal">null</span>;
}, selector);
Sorgen Sie bei Ereignis-Listenern für eine ordnungsgemäße Bereinigung, um das Verbleiben von Handlern zu vermeiden:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> <span class="hljs-title function_">handler</span> = (<span class="hljs-params"></span>) => <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'clicked'</span>);
<span class="hljs-keyword">const</span> button = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#button'</span>);
button.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, handler);
<span class="hljs-comment">// Store cleanup references</span>
<span class="hljs-variable language_">window</span>.<span class="hljs-property">_cleanupHandlers</span> = <span class="hljs-variable language_">window</span>.<span class="hljs-property">_cleanupHandlers</span> || [];
<span class="hljs-variable language_">window</span>.<span class="hljs-property">_cleanupHandlers</span>.<span class="hljs-title function_">push</span>(<span class="hljs-function">() =></span> {
button.<span class="hljs-title function_">removeEventListener</span>(<span class="hljs-string">'click'</span>, handler);
});
});
Implementierungsrichtlinien
Für optimale Ergebnisse mit page.evaluate, müssen Sie sich auf die Verbesserung der Leistung, die Reduzierung unnötiger Kontextwechsel und die Gewährleistung der Sicherheit konzentrieren. So können Sie Ihre Browser-Automatisierungs-Workflows optimieren.
Leistungsoptimierung
Die effiziente Ausführung von Code im Seitenkontext spart Zeit und Systemressourcen. Im Folgenden finden Sie einige Techniken zur Beschleunigung Ihrer Skripte:
<span class="hljs-comment">// Block unnecessary resources like images and stylesheets</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-title function_">includes</span>(request.<span class="hljs-title function_">resourceType</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">// Batch operations to reduce overhead</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> results = [];
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.product-item'</span>).<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> {
results.<span class="hljs-title function_">push</span>({
<span class="hljs-attr">title</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.title'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">price</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.price'</span>).<span class="hljs-property">textContent</span>,
<span class="hljs-attr">stock</span>: item.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.stock'</span>).<span class="hljs-property">dataset</span>.<span class="hljs-property">value</span>
});
});
<span class="hljs-keyword">return</span> results;
});
Auch die Auswahl der richtigen Selektoren spielt eine große Rolle für die Leistung:
| Selektortyp | Schnelligkeit | Beispiel |
|---|---|---|
| ID | Schnellste | #Hauptinhalt |
| Klasse | Schnell | .product-item |
| Etikett | Moderat | div > span |
| Komplexer XPath | Am langsamsten | //div[@class='wrapper']//span |
Kontextwechselverwaltung
Der Kontextwechsel zwischen Node.js und der Browserumgebung kann die Leistung beeinträchtigen. So minimieren Sie ihn:
<span class="hljs-comment">// Example of inefficient context switching</span>
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> item <span class="hljs-keyword">of</span> items) {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">i</span>) =></span> {
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">`#item-<span class="hljs-subst">${i}</span>`</span>).<span class="hljs-title function_">click</span>();
}, item);
}
<span class="hljs-comment">// Better: Batch operations in a single context switch</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">itemsList</span>) =></span> {
itemsList.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">i</span> =></span> {
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">`#item-<span class="hljs-subst">${i}</span>`</span>).<span class="hljs-title function_">click</span>();
});
}, items);
Wenn Sie Daten in Node.js verarbeiten und an den Browser zurückgeben müssen, stellen Sie Funktionen bereit, anstatt wiederholt zwischen Kontexten zu wechseln:
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">exposeFunction</span>(<span class="hljs-string">'processData'</span>, <span class="hljs-title function_">async</span> (data) => {
<span class="hljs-comment">// Process data in Node.js</span>
<span class="hljs-keyword">return</span> transformedData;
});
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> result = <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">processData</span>(documentData);
<span class="hljs-comment">// Use the processed data in the browser</span>
});
Sicherheitsrichtlinien
Sobald Leistung und Kontextwechsel optimiert sind, konzentrieren Sie sich auf die Sicherheit Ihrer Skripte. Hier sind einige bewährte Methoden:
<span class="hljs-comment">// Always sanitize inputs before using them</span>
<span class="hljs-keyword">const</span> sanitizedInput = <span class="hljs-title function_">sanitizeHtml</span>(userInput);
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">(<span class="hljs-params">input</span>) =></span> {
<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'#search'</span>).<span class="hljs-property">value</span> = input;
}, sanitizedInput);
<span class="hljs-comment">// Use error handling for critical operations</span>
<span class="hljs-keyword">try</span> {
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-function">() =></span> {
<span class="hljs-keyword">if</span> (!<span class="hljs-variable language_">window</span>.<span class="hljs-property">__securityCheck</span>) {
<span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">'Security check failed'</span>);
}
<span class="hljs-comment">// Continue with the operation</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">'Security violation:'</span>, error);
}
Beachten Sie für Latenode-Workflows diese zusätzlichen Tipps:
- Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen,
userDataDirum Ressourcen zwischenzuspeichern und die Leistung zwischen Sitzungen zu verbessern. - Schließen Sie nicht verwendete Seiten und Browserinstanzen, um Speicher zu sparen.
- Bearbeiten Sie Screenshots mit Puffern, anstatt sich auf Dateisystemoperationen zu verlassen.
- Implementieren Sie eine robuste Fehlerbehandlung und gründliche Sicherheitsüberprüfungen.
Zusammenfassung
Überprüfung der wichtigsten Punkte
Die page.evaluate Die Methode verbindet Node.js- und Browserkontexte, indem sie eine JavaScript-Funktion in Stringform zur Ausführung im Browser sendet. Diese Funktion arbeitet unabhängig von der Node.js-Umgebung, daher ist bei der Datenübertragung Vorsicht geboten.
Hier ist ein gängiges Beispiel für das Extrahieren von Daten:
<span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">evaluate</span>(<span class="hljs-title function_">async</span> () => {
<span class="hljs-keyword">const</span> results = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.data-item'</span>);
<span class="hljs-keyword">return</span> <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(results, <span class="hljs-function"><span class="hljs-params">item</span> =></span> ({
<span class="hljs-attr">id</span>: item.<span class="hljs-property">dataset</span>.<span class="hljs-property">id</span>,
<span class="hljs-attr">value</span>: item.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">trim</span>()
}));
});
Dinge zu beachten:
- Argumente müssen JSON-serialisierbar sein.
- Rückgabewerte werden automatisch deserialisiert.
- Browser-APIs sind nur innerhalb der
evaluateKontext. - Auf Node.js-Variablen kann im Browserkontext nicht zugegriffen werden.
Diese Grundlagen bilden die Grundlage für den effektiven Einsatz von Puppeteer. Zusätzliche Tools können Ihre Automatisierungsaufgaben weiter optimieren.
Zusätzliche Puppenspieler-Tools
Puppeteer bietet mehrere Tools zur Erweiterung der Fähigkeiten von page.evaluate:
| Werkzeug | Zweck | Bester Anwendungsfall |
|---|---|---|
| page.evaluateHandle | Gibt Objektreferenzen zurück | Direkte Interaktion mit DOM-Elementen |
| page.exposeFunction | Macht Node.js-Funktionen im Browser nutzbar | Verwalten komplexer serverseitiger Logik |
| page.evaluateOnNewDocument | Führt Skripte aus, bevor eine Seite geladen wird | Vorbereiten der Browserumgebung |
Beispielsweise kann die Bereitstellung von Node.js-Funktionen im Browser die erweiterte Datenverarbeitung in Workflows wie denen in Latenode vereinfachen. Während page.evaluate eignet sich gut für die Handhabung primitiver Typen und JSON-serialisierbarer Objekte, page.evaluateHandle ist wichtig für den Umgang mit komplexen Browserobjekten, die nicht serialisiert werden können.
Ähnliche Artikel
- Puppeteer-Klickvorgänge: Umgang mit komplexen Elementen, Doppelklicks und Fehlerbehebung
- Formularautomatisierung mit Puppeteer: Texteingabe, Formularausfüllen und Benutzersimulation
- Benutzerdefinierte Wartebedingungen mit waitForFunction in Puppeteer
- Browserautomatisierung mit Puppeteer und JavaScript: Praktische Umsetzung in Node.js
