%20(1).png)
%20(1).png)
%20(1).png)
.png)
.svg){kind=icon}
Einsatzbereite KI-Agenten sind auf Latenode verfügbar 🚀
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:
const title = await page.evaluate(() => document.title);
Dadurch wird der Seitentitel direkt aus dem Browser abgerufen.
| Merkmal | Node.js-Kontext | Browserkontext |
|---|---|---|
| Globale Objekte | process, require |
window, document |
| Skriptspeicherort | Lokale Maschine | Zielwebseite |
| API-Zugriff | Node.js-APIs | Browser-Web-APIs |
Wasser page.evaluate() für präzise, effiziente Automatisierungsaufgaben, insbesondere bei der Arbeit mit JavaScript-lastigen Websites.
Bei der Arbeit mit Puppeteer für die Web-Automatisierung ist es wichtig, den Unterschied zwischen dem Node.js-Kontext und den BrowserkontextDiese beiden Umgebungen sind isoliert und jede hat ihre eigenen Regeln für die Ausführung von Code und den Datenaustausch.
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 | process, require, __dirname |
window, document, localStorage |
| Skriptspeicherort | Lokale Maschine | Zielwebseite |
| Variablenbereich | Puppenspieler-Skriptumfang | Seitenkontextbereich |
| API-Zugriff | Node.js-APIs | Browser-Web-APIs |
| Speicherplatz | Separater Prozess | Browser-Prozess |
Der Datenaustausch zwischen diesen Kontexten umfasst eine Reihe von Schritten, die stark auf Serialisierung beruhen:
Function.prototype.toString() [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.
Syntax:
await page.evaluate(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 |
Der 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.
Beispiele:
<h1> direkt aus dem DOM:const headingText = await page.evaluate(() => {
return document.querySelector('h1').textContent;
});
await page.evaluate((username, password) => {
document.getElementById('username').value = username;
document.getElementById('password').value = password;
document.querySelector('#login-form').submit();
}, 'myUsername', 'myPassword');
await page.evaluate(() => {
const div = document.createElement('div');
div.textContent = 'Added by Puppeteer';
document.body.appendChild(div);
return div.textContent;
});
Tipp zur Fehlerbehebung: Verwenden Sie die folgende Konfiguration, um das Debuggen während der Entwicklung zu aktivieren:
const browser = await puppeteer.launch({
headless: false,
slowMo: 100 // Adds a 100ms delay to each operation
});
Als Nächstes werden wir uns mit Techniken zum Datenaustausch zwischen Node.js und Browserkontexten befassen.
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 | Wasser page.exposeFunction |
| DOM-Elemente | ✓ Durch JSHandle | Wasser page.evaluateHandle |
Sehen wir uns nun an, wie diese Werte vom Browserkontext zurückgegeben werden.
Beim Benutzen page.evaluatewerden die zurückgegebenen Werte automatisch in JSON serialisiert. So funktioniert es:
// Returning a simple value
const pageTitle = await page.evaluate(() => document.title);
// Returning a complex object
const metrics = await page.evaluate(() => ({
viewport: window.innerWidth,
scrollHeight: document.body.scrollHeight,
timestamp: Date.now()
}));
„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.
Einige häufige Szenarien erfordern spezielle Problemumgehungen:
const bodyHandle = await page.$('body');
const html = await page.evaluate(body => body.innerHTML, bodyHandle);
await bodyHandle.dispose(); // Always clean up to avoid memory leaks
await page.exposeFunction('md5', text =>
crypto.createHash('md5').update(text).digest('hex')
);
const hash = await page.evaluate(async () => {
return await window.md5('test-string');
});
Wenn Sie mit TypeScript arbeiten, stellen Sie sicher, dass Ihr Transpiler richtig eingerichtet ist:
// tsconfig.json
{
"compilerOptions": {
"target": "es2018"
}
}
Diese Strategien helfen Ihnen, den Datenaustausch in verschiedenen Kontexten effektiv zu handhaben.
Hier ist, wie Sie verwenden können page.evaluate in realen Szenarien, komplett mit praktischen Codeausschnitten.
Beispiel: Scraping von Produktdetails
Dieses Skript sammelt Details wie Titel, Preis, Bewertung und Lagerstatus von Produktkarten auf einer Webseite:
const productData = await page.evaluate(() => {
const products = Array.from(document.querySelectorAll('.product-card'));
return products.map(product => ({
title: product.querySelector('.title').textContent.trim(),
price: product.querySelector('.price').textContent.trim(),
rating: parseFloat(product.querySelector('.rating').dataset.value),
inStock: product.querySelector('.stock').textContent.includes('Available')
}));
});
Beispiel: Extrahieren von Tabellendaten
Bei diesem Ansatz werden Daten aus einer Tabelle abgerufen, indem die Zeilen und Spalten durchlaufen werden:
const tableData = await page.evaluate(() => {
const rows = Array.from(document.querySelectorAll('table tr'));
return rows.map(row => {
const columns = row.querySelectorAll('td');
return Array.from(columns, column => column.innerText);
});
});
Grundlegende Formularautomatisierung
So füllen Sie Formularfelder aus, lösen Ereignisse aus und senden das Formular ab:
await page.evaluate(() => {
// Fill form fields
document.querySelector('#username').value = 'testuser';
document.querySelector('#password').value = 'secretpass';
// Trigger input events for dynamic forms
const event = new Event('input', { bubbles: true });
document.querySelector('#username').dispatchEvent(event);
// Submit form
document.querySelector('form').submit();
});
Umgang mit komplexen Formularen
Für Aufgaben wie das Auswählen von Dropdown-Optionen oder das Aktivieren von Optionsfeldern:
await page.evaluate(() => {
// Select dropdown option
const select = document.querySelector('#country');
select.value = 'US';
select.dispatchEvent(new Event('change', { bubbles: true }));
// Check radio button
const radio = document.querySelector('input[value="express"]');
radio.checked = true;
radio.dispatchEvent(new Event('change', { bubbles: true }));
});
Beispiel: Endloses Scrollen
Dieses Skript scrollt durch eine Seite, bis es mindestens 100 Elemente gesammelt hat:
const items = await page.evaluate(async () => {
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
const items = new Set();
while (items.size < 100) {
// Scroll to bottom
window.scrollTo(0, document.body.scrollHeight);
// Wait for new content
await delay(1000);
// Collect items
document.querySelectorAll('.item').forEach(item =>
items.add(item.textContent.trim())
);
}
return Array.from(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:
await page.evaluate(async () => {
// Click load more button
document.querySelector('#loadMore').click();
// Wait for content update
await new Promise(resolve => {
const observer = new MutationObserver((mutations, obs) => {
if (document.querySelectorAll('.item').length > 10) {
obs.disconnect();
resolve();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
});
});
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.
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.
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:
// Basic DOM interaction
await page.evaluate(() => {
const loginButton = document.querySelector('#login');
loginButton.click();
// Trigger a custom event
loginButton.dispatchEvent(new Event('customClick'));
});
// Processing data with exposed functions
await page.exposeFunction('processData', async (data) => {
// Process data in Node.js context
return transformedData;
});
await page.evaluate(async () => {
const rawData = document.querySelector('#data').textContent;
const processed = await window.processData(rawData);
return processed;
});
Latenode führt außerdem ein Protokoll des Ausführungsverlaufs, was das Debuggen von Skripts erleichtert.
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:
const extractProductData = await page.evaluate(async () => {
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
// Wait for dynamic content to load
while (!document.querySelector('.product-grid')) {
await delay(100);
}
return Array.from(document.querySelectorAll('.product'))
.map(product => ({
name: product.querySelector('.name').textContent,
price: product.querySelector('.price').textContent,
availability: product.querySelector('.stock').dataset.status
}));
});
Für fortgeschrittenere Operationen, page.exposeFunction ermöglicht eine nahtlose Interaktion zwischen Node.js und dem Browser:
await page.exposeFunction('md5', text =>
crypto.createHash('md5').update(text).digest('hex')
);
const processedData = await page.evaluate(async () => {
const sensitiveData = document.querySelector('#secure-data').value;
return await window.md5(sensitiveData);
});
Um Verweise auf DOM-Elemente über mehrere Schritte hinweg aufrechtzuerhalten, verwendet Latenode page.evaluateHandle:
const elementHandle = await page.evaluateHandle(() => {
return document.querySelector('.dynamic-content');
});
await page.evaluate(element => {
element.scrollIntoView();
}, 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.
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.
Konfigurieren Sie Ihre TypeScript-Einstellungen richtig, um Probleme durch Transpilation zu vermeiden. Beispiel:
// Use direct, non-transpiled functions
await page.evaluate(() => {
document.querySelector('#button').click();
});
await page.evaluate(`(async () => {
document.querySelector('#button').click();
})()`);
Vermeiden Sie die direkte Rückgabe von DOM-Elementen aus page.evaluate. Verwenden Sie stattdessen ElementHandle zur besseren Handhabung:
// Incorrect: Returning a DOM element
const element = await page.evaluate(() => {
return document.querySelector('.dynamic-element');
});
// Correct: Using ElementHandle
const element = await page.evaluateHandle(() => {
return document.querySelector('.dynamic-element');
});
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:
// Wait for navigation after an action
await Promise.all([
page.waitForNavigation(),
page.click('#submit-button')
]);
// Wait for a specific condition
await page.waitForFunction(() => {
const element = document.querySelector('.lazy-loaded');
return element && element.dataset.loaded === 'true';
}, { timeout: 5000 });
Setzen Sie für dynamische Websites gezieltere Wartemechanismen ein:
// Wait for specific network requests
await page.waitForResponse(
response => response.url().includes('/api/data')
);
// Ensure elements are both present and visible
await page.waitForSelector('.dynamic-content', {
visible: true,
timeout: 3000
});
Um Speicherlecks zu vermeiden, verwalten Sie DOM-Referenzen sorgfältig. So geht's:
// Use and dispose ElementHandles
const handle = await page.evaluateHandle(() => {
return document.querySelector('.temporary-element');
});
await handle.evaluate(element => {
// Perform operations
});
await handle.dispose(); // Dispose of handle after use
Wenn Sie mit mehreren Elementen arbeiten, übergeben Sie Daten sicher zwischen Kontexten:
// Extract data from the DOM
const selector = '.product-price';
const price = await page.evaluate((sel) => {
const element = document.querySelector(sel);
return element ? element.textContent.trim() : null;
}, selector);
Sorgen Sie bei Ereignis-Listenern für eine ordnungsgemäße Bereinigung, um das Verbleiben von Handlern zu vermeiden:
await page.evaluate(() => {
const handler = () => console.log('clicked');
const button = document.querySelector('#button');
button.addEventListener('click', handler);
// Store cleanup references
window._cleanupHandlers = window._cleanupHandlers || [];
window._cleanupHandlers.push(() => {
button.removeEventListener('click', handler);
});
});
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.
Die effiziente Ausführung von Code im Seitenkontext spart Zeit und Systemressourcen. Im Folgenden finden Sie einige Techniken zur Beschleunigung Ihrer Skripte:
// Block unnecessary resources like images and stylesheets
await page.setRequestInterception(true);
page.on('request', request => {
if (['image', 'stylesheet'].includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
// Batch operations to reduce overhead
await page.evaluate(() => {
const results = [];
document.querySelectorAll('.product-item').forEach(item => {
results.push({
title: item.querySelector('.title').textContent,
price: item.querySelector('.price').textContent,
stock: item.querySelector('.stock').dataset.value
});
});
return results;
});
Auch die Auswahl der richtigen Selektoren spielt eine große Rolle für die Leistung:
| Selektortyp | Schnelligkeit | Beispiel |
|---|---|---|
| ID | Schnellste | #main-content |
| Klasse | Schnell | .product-item |
| Etikett | Konservativ | div > span |
| Komplexer XPath | Am langsamsten | //div[@class='wrapper']//span |
Der Kontextwechsel zwischen Node.js und der Browserumgebung kann die Leistung beeinträchtigen. So minimieren Sie ihn:
// Example of inefficient context switching
for (const item of items) {
await page.evaluate((i) => {
document.querySelector(`#item-${i}`).click();
}, item);
}
// Better: Batch operations in a single context switch
await page.evaluate((itemsList) => {
itemsList.forEach(i => {
document.querySelector(`#item-${i}`).click();
});
}, 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:
await page.exposeFunction('processData', async (data) => {
// Process data in Node.js
return transformedData;
});
await page.evaluate(async () => {
const result = await window.processData(documentData);
// Use the processed data in the browser
});
Sobald Leistung und Kontextwechsel optimiert sind, konzentrieren Sie sich auf die Sicherheit Ihrer Skripte. Hier sind einige bewährte Methoden:
// Always sanitize inputs before using them
const sanitizedInput = sanitizeHtml(userInput);
await page.evaluate((input) => {
document.querySelector('#search').value = input;
}, sanitizedInput);
// Use error handling for critical operations
try {
await page.evaluate(() => {
if (!window.__securityCheck) {
throw new Error('Security check failed');
}
// Continue with the operation
});
} catch (error) {
console.error('Security violation:', error);
}
Beachten Sie für Latenode-Workflows diese zusätzlichen Tipps:
userDataDir um Ressourcen zwischenzuspeichern und die Leistung zwischen Sitzungen zu verbessern.Der 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:
const data = await page.evaluate(async () => {
const results = document.querySelectorAll('.data-item');
return Array.from(results, item => ({
id: item.dataset.id,
value: item.textContent.trim()
}));
});
Dinge zu beachten:
evaluate Kontext.Diese Grundlagen bilden die Grundlage für den effektiven Einsatz von Puppeteer. Zusätzliche Tools können Ihre Automatisierungsaufgaben weiter optimieren.
Puppeteer bietet mehrere Tools zur Erweiterung der Fähigkeiten von page.evaluate:
| Werkzeug | Sinn | 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.
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
