%20(1).png)
%20(1).png)
%20(1).png)
.png)
.svg){kind=icon}
Einsatzbereite KI-Agenten sind auf Latenode verfügbar 🚀
Möchte Dein Puppenspieler Skripte, um dynamische Websites besser zu handhaben? Hier ist der Schlüssel: waitForFunction ermöglicht Ihnen die Definition benutzerdefinierter Warteregeln um sicherzustellen, dass Ihre Automatisierung reibungslos mit sich ändernden Inhalten funktioniert.
waitForFunction?true wenn bereit.raf, mutation, oder Millisekunden) und Timeouts für eine bessere Leistung.await page.waitForFunction(
() => document.querySelector('.status').textContent === 'Ready'
);
Tipp: Benutzen waitForFunction veraltete ersetzen sleep Anrufe und verbessern Sie die Effizienz.
| Merkmal | Was es macht |
|---|---|
| Polling-Modi | Prüft Bedingungen über 'raf', 'mutation'oder benutzerdefinierte Intervalle |
| Benutzerdefinierte Bedingungen | Warten auf bestimmte DOM-Zustände oder API-Antworten |
| Timeout-Verwaltung | Festlegen vorgangsspezifischer oder globaler Timeouts |
Diese Methode stellt sicher, dass Ihre Skripte zuverlässig und effizient sind und für jede Herausforderung dynamischer Inhalte bereit sind.
Der waitForFunction Mit der Methode „Puppeteer“ können Sie benutzerdefinierte Bedingungen für Ihre Skripte festlegen, bevor diese fortgesetzt werden. So nutzen Sie sie effektiv.
So erstellen Sie auf einfache Weise eine Wartefunktion:
// Wait until the input element has a specific value
await page.waitForFunction(
'document.getElementById("loginUsername").value === "hello"'
);
// Using an arrow function for a condition
await page.waitForFunction(
() => document.querySelector('.status').textContent === 'Ready'
);
Der Schlüssel hier ist, dass Ihre Funktion eine Wahrheitswert bevor das Skript fortgesetzt werden kann [1].
Sehen wir uns nun an, wie Sie es für eine bessere Leistung konfigurieren.
Sie können die Feinabstimmung waitForFunction durch Übergabe eines Optionsobjekts. Wichtige Parameter sind:
| Parameter | Beschreibung | Gemeinsame Werte |
|---|---|---|
| Polling | Wie oft der Zustand überprüft wird | 'raf', 'mutation' oder Millisekunden |
| Timeout | Maximale Wartezeit | Standard: 30,000 ms (30 Sekunden) |
Polling-Modi [4]:
await page.waitForFunction(
() => document.readyState === 'complete',
{ polling: 1000, timeout: 5000 }
);
Wählen Sie den Abfragemodus entsprechend Ihren Anforderungen:
'raf' für Animationen oder Stilaktualisierungen.'mutation' für DOM-bezogene Änderungen.Um zu bestätigen, dass ein Element sichtbar ist, können Sie seine Präsenz und Abmessungen überprüfen:
await page.waitForFunction(() => {
const element = document.querySelector('.tv-lightweight-charts');
return element && element.offsetHeight > 0 && element.offsetWidth > 0;
});
Dadurch wird sichergestellt, dass das Element auf der Seite vorhanden ist und sichtbare Abmessungen aufweist. Dies ist besonders praktisch für dynamischer Inhalt das ordnungsgemäße Laden einige Zeit in Anspruch nimmt [2].
Über visuelle Kontrollen hinaus können Sie Textinhalte oder bestimmte Eigenschaften von Elementen überwachen:
// Wait for specific text content
await page.waitForFunction(
selector => {
const element = document.querySelector(selector);
return element && element.textContent.includes('Ready');
},
{},
'.status-message'
);
Für detailliertere Eigenschaftsprüfungen übergeben Sie zusätzliche Argumente:
const expectedValue = 'completed';
const selector = '.status';
await page.waitForFunction(
(sel, val) => {
const element = document.querySelector(sel);
return element && element.getAttribute('data-state') === val;
},
{},
selector,
expectedValue
);
Nachdem Sie einzelne Bedingungen getestet haben, können Sie diese für komplexere Szenarien kombinieren. Beispiel:
await page.waitForFunction(() => {
// Check multiple elements and conditions
const button = document.querySelector('.donate-button');
const searchBox = document.querySelector('.search-button');
return button &&
searchBox &&
button.offsetHeight > 0 &&
searchBox.offsetHeight > 0 &&
!button.disabled;
});
Für die Handhabung mehrerer Elemente mit unabhängigen Bedingungen verwenden Sie Promise Kombinationen [5]:
| Wartemuster | Luftüberwachung | Umsetzung |
|---|---|---|
| Alle Elemente | Warten Sie auf mehrere erforderliche Elemente | Promise.all() |
| Beliebiges Element | Weiter, wenn das erste Element erscheint | Promise.race() |
| Benutzerdefinierte Logik | Behandeln Sie komplexe bedingte Prüfungen | Kombinierte Wartefunktionen |
Für asynchrone Vorgänge können Sie erweiterte Wartebedingungen erstellen:
await page.waitForFunction(
async () => {
const response = await fetch('/api/status');
const data = await response.json();
return data.isReady && document.querySelector('.content').offsetHeight > 0;
},
{ polling: 'mutation' }
);
Diese Methode kombiniert Validierung der API-Antwort mit DOM-Elementprüfungen, um sicherzustellen, dass sowohl die Daten als auch die visuellen Inhalte bereit sind [1].
Für dynamischere Webanwendungen können Sie warteAufFunktion um detaillierte JavaScript-Bedingungen zu erstellen. Hier ist ein Beispiel:
await page.waitForFunction(
(threshold) => {
const chart = document.querySelector('.tv-lightweight-charts');
const dataPoints = chart?.querySelectorAll('.data-point');
return chart &&
dataPoints?.length > threshold &&
Array.from(dataPoints).every(point =>
point.getBoundingClientRect().height > 0 &&
!point.classList.contains('loading')
);
},
{ polling: 'mutation' },
5
);
Dieses Skript stellt sicher:
Für komplexere Szenarien können Sie auch asynchrone Prüfungen mit DOM-Auswertungen kombinieren:
await page.waitForFunction(
async () => {
// Check if the container is ready
const container = document.querySelector('.dynamic-content');
if (!container || container.offsetHeight === 0) return false;
// Validate API response
try {
const response = await fetch('/api/status');
const data = await response.json();
return data.isReady && container.children.length > 0;
} catch {
return false;
}
},
{
polling: 'raf',
timeout: 30000
}
);
Dieser Ansatz kombiniert DOM-Prüfungen mit einem API-Aufruf, um sicherzustellen, dass sowohl die Benutzeroberfläche als auch das Backend synchron sind.
Das Timeout-Management ist entscheidend bei der Arbeit mit warteAufFunktionHier ist ein Beispiel für die effektive Handhabung von Timeouts:
try {
await page.setDefaultTimeout(60000); // Set a global timeout of 60 seconds
await page.waitForFunction(
() => {
const element = document.querySelector('.dynamic-element');
return element?.complete === true;
},
{
timeout: 45000, // Specific timeout for this operation
polling: 'mutation'
}
);
} catch (error) {
if (error.name === 'TimeoutError') {
console.error('Element state check timed out:', error.message);
await page.reload(); // Reload page as a fallback
}
throw error;
}
Hier ist ein kurzer Überblick über Timeout-Strategien:
| Timeout-Strategie | Luftüberwachung | Konfiguration |
|---|---|---|
| Standard-Timeout | Allgemeine Operationen | page.setDefaultTimeout() |
| Navigations-Timeout | Seitenladevorgänge | page.setDefaultNavigationTimeout() |
| Betriebsspezifisch | Detaillierte Kontrollen | Verwenden Sie das timeout Option in Methode |
| Unendliches Warten | Bekannte Verzögerungen | timeout: 0 |
So verbessern Sie die Fehlerbehandlung:
try-catch Blöcke, um Fehler ordnungsgemäß zu beheben.Diese Vorgehensweisen tragen dazu bei, dass Ihre Skripte sowohl zuverlässig als auch effizient sind.
Um warteAufFunktion Um die Effizienz zu steigern, konzentrieren Sie sich auf intelligente Wartestrategien und ein angemessenes Ressourcenmanagement. Nutzen Sie Browser-Entwicklertools, um Ladezeiten zu messen und präzise Timeouts festzulegen.
// Optimize waiting with a networkidle strategy
await page.goto('https://example.com', {
waitUntil: 'networkidle2',
timeout: 30000
});
// Combine checks in a single evaluate call
await page.evaluate(() => {
const element = document.querySelector('.dynamic-content');
const isVisible = element?.offsetHeight > 0;
const hasData = element?.children.length > 0;
return isVisible && hasData;
});
So reduzieren Sie die Ressourcennutzung:
waitForSelector or waitForFunction statt veraltet waitForTimeout.evaluate Aufruf, um die Kommunikation zwischen Browser und Knoten zu reduzieren.| Strategie | Auswirkungen auf die Leistung | Bester Anwendungsfall |
|---|---|---|
networkidle2 |
Konservativ | Seitennavigation |
waitForSelector |
Schnell | Einzelelementprüfungen |
waitForFunction |
Variable | Komplexe Bedingungen |
Kombiniert evaluate |
Schnellste | Mehrfachelementprüfungen |
Diese Methoden können dabei helfen, häufige Engpässe zu beheben, die im nächsten Abschnitt behandelt werden.
Leistungsprobleme entstehen oft durch ineffiziente Wartemuster. So gehen Sie damit um:
Selektorprobleme
Zu starre Selektoren können Fehler verursachen. Vereinfachen Sie sie für eine bessere Zuverlässigkeit:
// Avoid rigid selectors like this
await page.waitForSelector('div.container > div:nth-child(2) > span.text-red');
// Use a more flexible approach
await page.waitForFunction(
() => document.querySelector('.text-red')?.offsetParent !== null
);
Ressourcenmanagement
Verwalten Sie Ressourcen und vermeiden Sie unnötige Verzögerungen:
try {
await page.waitForFunction(
() => document.readyState === 'complete' &&
performance.now() > 1000
);
} catch (error) {
console.error('Page load timeout:', error.message);
}
„Puppeteer verfügt über eine ereignisgesteuerte Architektur, die viele potenzielle Schwachstellen beseitigt. Es besteht kein Bedarf für böse
sleep[undefined]Aufrufe in Puppeteer-Skripten." - Puppeteers Readme [6]
Verpacken Sie wartende Methoden immer in try...catch Blöcke, um Fehler ordnungsgemäß zu behandeln und Fallback-Optionen bereitzustellen. Dieser Ansatz stellt sicher, dass Ihre Skripte robust und zuverlässig bleiben.
Um genaue Daten zu erfassen, ist es unerlässlich, dass Produkte korrekt geladen werden. Verwenden Sie eine benutzerdefinierte Warteregel, um die Ausführung anzuhalten, bis die Produkte vollständig geladen sind:
await page.waitForFunction(() => {
const products = document.querySelectorAll('.product-card');
return products.length > 0 && all images and prices fully load;
});
Für mehr Präzision können Sie diesen Ansatz verwenden:
await page.waitForFunction(() => {
const productDetails = document.querySelector('.product-details');
return productDetails &&
productDetails.offsetHeight > 0 &&
productDetails.querySelector('.inventory-status') !== null;
}, {timeout: 30000});
Dadurch wird sichergestellt, dass Ihr Skript wartet, bis alle erforderlichen Elemente geladen sind, wodurch die Zuverlässigkeit der Datenerfassung in E-Commerce-Szenarien verbessert wird.
Dynamische Web-Apps erfordern oft bestimmte Wartebedingungen, um das Laden von Inhalten zu bewältigen. Sie können beispielsweise warten, bis ein bestimmtes Element vollständig sichtbar ist:
await page.waitForFunction(() => {
const element = document.querySelector('.tv-lightweight-charts');
return element && element.offsetHeight > 0 && element.offsetWidth > 0;
});
Wenn mehrere Abschnitte geladen werden müssen, kombinieren Sie Bedingungen wie folgt:
await page.waitForFunction(() => {
const contentLoaded = document.querySelector('.content').children.length > 0;
const dataUpdated = document.body.textContent.includes('Last updated:');
return contentLoaded && dataUpdated;
}, {polling: 1000});
Mit dieser Methode stellen Sie sicher, dass Ihre Automatisierungsskripte nahtlos mit dynamischen Inhalten interagieren.
Die Erkennung von Formularfehlern erfolgt nach einer ähnlichen Logik wie die Überprüfung der Elementsichtbarkeit. So können Sie Fehlermeldungen überwachen:
await page.waitForFunction(() => {
const errorContainer = document.querySelector('.error-messages');
const hasErrors = errorContainer?.children.length > 0;
const isVisible = errorContainer?.offsetParent !== null;
return hasErrors && isVisible;
});
Sie können auch verschiedene Formularvalidierungszustände mithilfe bestimmter Wartebedingungen verfolgen:
| Validierungstyp | Wartebedingung | Luftüberwachung |
|---|---|---|
| Feldfehler | Überprüfen Sie, ob eine Fehlerklasse vorhanden ist | Validierung einzelner Felder |
| Formularweite Fehler | Überwachen des Fehlercontainers | Gesamtformularstatus |
| Erfolgsmeldungen | Achten Sie auf Bestätigungsanzeigen | Abschluss der Übermittlung |
| Ladezustände | Status der Schaltfläche „Senden“ verfolgen | Verarbeitungshinweis |
Der waitForFunction Methode in Puppeteer wertet JavaScript-Bedingungen aus, bis sie zurückkehren true, bietet präzise Kontrolle über dynamische Seiteninteraktionen [3].
Hier sind einige der wichtigsten Vorteile der Verwendung waitForFunction:
Dieser Ansatz ist besonders praktisch, wenn Standard-Wartemethoden nicht ausreichen. Beispielsweise können in komplexen Single-Page-Anwendungen mehrere Elemente gleichzeitig geladen werden oder bestimmte JavaScript-Zustände müssen vor dem Fortfahren bestätigt werden.
Latenode nutzt waitForFunction zur Verbesserung der Workflow-Automatisierung. Durch die Integration dieser Methode hat Latenode einen benutzerdefinierten Überwachungsknoten erstellt, der den Status von Websites überprüft und Screenshots erstellt, wenn bestimmte Bedingungen nicht erfüllt sind. [7].
Hier ist ein Beispiel, wie Latenode verwendet waitForFunction um sicherzustellen, dass kritische Elemente vollständig gerendert sind, bevor Sie fortfahren:
await page.waitForFunction(() => {
const element = document.querySelector('.tv-lightweight-charts');
return element && element.offsetHeight > 0 && element.offsetWidth > 0;
});
Dieses Snippet wartet auf ein Element mit der Klasse .tv-lightweight-charts nicht nur im DOM angezeigt, sondern auch vollständig gerendert werden [2].
Für beste Ergebnisse bei der Verwendung von Latenode mit Puppeteer:
page.setDefaultTimeout().try-catch Blöcke für eine robuste Fehlerbehandlung.
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
