Benutzerdefinierte Wartebedingungen mit waitForFunction in Puppeteer

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.

Warum verwenden waitForFunction?

• Kontrollieren Sie das Timing: Warten Sie, bis bestimmte Bedingungen erfüllt sind (z. B. Elemente geladen, Text geändert).
• Umgang mit dynamischem Inhalt: Perfekt für moderne, dynamische Websites.
• Fehler vermeiden: Vermeiden Sie unnötige Verzögerungen oder vorzeitige Interaktionen.

So funktioniert es:

• Schreiben Sie JavaScript-Bedingungen, die true wenn bereit.
• Verwenden Sie Optionen wie die Abfragehäufigkeit (raf, mutation, oder Millisekunden) und Timeouts für eine bessere Leistung.
• Kombinieren Sie DOM-Prüfungen mit API-Antworten für erweiterte Szenarien.

Ejemplo:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.status'</span>).<span class="hljs-property">textContent</span> === <span class="hljs-string">'Ready'</span>
);

Hauptmerkmale

• Überwachen Sie die Sichtbarkeit von Elementen, den Textinhalt oder benutzerdefinierte Eigenschaften.
• Kombinieren Sie mehrere Bedingungen für komplexe Arbeitsabläufe.
• Behandeln Sie Timeouts und Fehler ordnungsgemäß.

Tipp: Benutzen waitForFunction veraltete ersetzen sleep Anrufe und verbessern Sie die Effizienz.

Kurzübersicht:

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.

So warten/schlafen Sie N Sekunden in Puppenspieler?

Grundlagen von waitForFunction

Die 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 schreiben Sie grundlegende Wartefunktionen

So erstellen Sie auf einfache Weise eine Wartefunktion:

<span class="hljs-comment">// Wait until the input element has a specific value</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-string">'document.getElementById("loginUsername").value === "hello"'</span>
);

<span class="hljs-comment">// Using an arrow function for a condition</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
  <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.status'</span>).<span class="hljs-property">textContent</span> === <span class="hljs-string">'Ready'</span>
);

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.

Einrichten von Funktionsparametern

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].:

1. RequestAnimationFrame ('raf')
   Am besten geeignet für die Überwachung von Stiländerungen, da die Bedingungen während jedes Animationsbilds überprüft werden.

2. Mutationsbeobachter ('Mutation')
   Nützlich zum Verfolgen von Änderungen in der DOM-Struktur. Es löst bei jeder DOM-Aktualisierung Prüfungen aus.

3. Benutzerdefiniertes Intervall (Millisekunden)
   Beispielsweise wird die Bedingung jede Sekunde überprüft:

   <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
     <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">readyState</span> === <span class="hljs-string">'complete'</span>,
     { <span class="hljs-attr">polling</span>: <span class="hljs-number">1000</span>, <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span> }
   );
   

Wählen Sie den Abfragemodus entsprechend Ihren Anforderungen:

• Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, 'raf' für Animationen oder Stilaktualisierungen.
• Entscheide dich für 'mutation' für DOM-bezogene Änderungen.
• Legen Sie für umfassendere Anwendungsfälle ein benutzerdefiniertes Intervall (Millisekunden) fest.

Erstellen benutzerdefinierter Warteregeln

Überprüfen des Elementanzeigestatus

Um zu bestätigen, dass ein Element sichtbar ist, können Sie seine Präsenz und Abmessungen überprüfen:

<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">'.tv-lightweight-charts'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && element.<span class="hljs-property">offsetWidth</span> > <span class="hljs-number">0</span>;
});

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]..

Testen von Text- und Elementeigenschaften

Über visuelle Kontrollen hinaus können Sie Textinhalte oder bestimmte Eigenschaften von Elementen überwachen:

<span class="hljs-comment">// Wait for specific text content</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function"><span class="hljs-params">selector</span> =></span> {
        <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(selector);
        <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'Ready'</span>);
    },
    {},
    <span class="hljs-string">'.status-message'</span>
);

Für detailliertere Eigenschaftsprüfungen übergeben Sie zusätzliche Argumente:

<span class="hljs-keyword">const</span> expectedValue = <span class="hljs-string">'completed'</span>;
<span class="hljs-keyword">const</span> selector = <span class="hljs-string">'.status'</span>;

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function">(<span class="hljs-params">sel, val</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-title function_">getAttribute</span>(<span class="hljs-string">'data-state'</span>) === val;
    },
    {},
    selector,
    expectedValue
);

Kombinieren mehrerer Warteregeln

Nachdem Sie einzelne Bedingungen getestet haben, können Sie diese für komplexere Szenarien kombinieren. Beispiel:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(<span class="hljs-function">() =></span> {
    <span class="hljs-comment">// Check multiple elements and conditions</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">'.donate-button'</span>);
    <span class="hljs-keyword">const</span> searchBox = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.search-button'</span>);

    <span class="hljs-keyword">return</span> button && 
           searchBox && 
           button.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && 
           searchBox.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> &&
           !button.<span class="hljs-property">disabled</span>;
});

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:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-title function_">async</span> () => {
        <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">'/api/status'</span>);
        <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
        <span class="hljs-keyword">return</span> data.<span class="hljs-property">isReady</span> && <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.content'</span>).<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span>;
    },
    { <span class="hljs-attr">polling</span>: <span class="hljs-string">'mutation'</span> }
);

Diese Methode kombiniert Validierung der API-Antwort und DOM-Elementprüfungen, um sicherzustellen, dass sowohl die Daten als auch die visuellen Inhalte bereit sind [1]..

sbb-itb-23997f1

Erweiterte waitForFunction-Methoden

Schreiben komplexer JavaScript-Bedingungen

Für dynamischere Webanwendungen können Sie warteAufFunktion um detaillierte JavaScript-Bedingungen zu erstellen. Hier ist ein Beispiel:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function">(<span class="hljs-params">threshold</span>) =></span> {
        <span class="hljs-keyword">const</span> chart = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.tv-lightweight-charts'</span>);
        <span class="hljs-keyword">const</span> dataPoints = chart?.<span class="hljs-title function_">querySelectorAll</span>(<span class="hljs-string">'.data-point'</span>);

        <span class="hljs-keyword">return</span> chart && 
               dataPoints?.<span class="hljs-property">length</span> > threshold && 
               <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(dataPoints).<span class="hljs-title function_">every</span>(<span class="hljs-function"><span class="hljs-params">point</span> =></span> 
                   point.<span class="hljs-title function_">getBoundingClientRect</span>().<span class="hljs-property">height</span> > <span class="hljs-number">0</span> &&
                   !point.<span class="hljs-property">classList</span>.<span class="hljs-title function_">contains</span>(<span class="hljs-string">'loading'</span>)
               );
    },
    { <span class="hljs-attr">polling</span>: <span class="hljs-string">'mutation'</span> },
    <span class="hljs-number">5</span>
);

Dieses Skript stellt sicher:

• Der Diagrammcontainer ist vorhanden.
• Es ist eine Mindestanzahl an Datenpunkten vorhanden.
• Alle Datenpunkte sind sichtbar.
• Keiner der Punkte befindet sich im Ladezustand.

Für komplexere Szenarien können Sie auch asynchrone Prüfungen mit DOM-Auswertungen kombinieren:

<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-title function_">async</span> () => {
        <span class="hljs-comment">// Check if the container is ready</span>
        <span class="hljs-keyword">const</span> container = <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">if</span> (!container || container.<span class="hljs-property">offsetHeight</span> === <span class="hljs-number">0</span>) <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;

        <span class="hljs-comment">// Validate API response</span>
        <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">const</span> response = <span class="hljs-keyword">await</span> <span class="hljs-title function_">fetch</span>(<span class="hljs-string">'/api/status'</span>);
            <span class="hljs-keyword">const</span> data = <span class="hljs-keyword">await</span> response.<span class="hljs-title function_">json</span>();
            <span class="hljs-keyword">return</span> data.<span class="hljs-property">isReady</span> && container.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
        } <span class="hljs-keyword">catch</span> {
            <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;
        }
    },
    { 
        <span class="hljs-attr">polling</span>: <span class="hljs-string">'raf'</span>,
        <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
    }
);

Dieser Ansatz kombiniert DOM-Prüfungen mit einem API-Aufruf, um sicherzustellen, dass sowohl die Benutzeroberfläche als auch das Backend synchron sind.

Umgang mit Zeitüberschreitungen und Fehlern

Das Timeout-Management ist entscheidend bei der Arbeit mit warteAufFunktionHier ist ein Beispiel für die effektive Handhabung von Timeouts:

<span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">setDefaultTimeout</span>(<span class="hljs-number">60000</span>); <span class="hljs-comment">// Set a global timeout of 60 seconds</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">'.dynamic-element'</span>);
            <span class="hljs-keyword">return</span> element?.<span class="hljs-property">complete</span> === <span class="hljs-literal">true</span>;
        },
        {
            <span class="hljs-attr">timeout</span>: <span class="hljs-number">45000</span>, <span class="hljs-comment">// Specific timeout for this operation</span>
            <span class="hljs-attr">polling</span>: <span class="hljs-string">'mutation'</span>
        }
    );
} <span class="hljs-keyword">catch</span> (error) {
    <span class="hljs-keyword">if</span> (error.<span class="hljs-property">name</span> === <span class="hljs-string">'TimeoutError'</span>) {
        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Element state check timed out:'</span>, error.<span class="hljs-property">message</span>);
        <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">reload</span>(); <span class="hljs-comment">// Reload page as a fallback</span>
    }
    <span class="hljs-keyword">throw</span> 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 die Timeout-Option in der Methode
Unendliches Warten	Bekannte Verzögerungen	Zeitüberschreitung: 0

So verbessern Sie die Fehlerbehandlung:

• Passen Sie die Timeout-Einstellungen basierend auf der Komplexität jedes Vorgangs an.
• Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, try-catch Blöcke, um Fehler ordnungsgemäß zu beheben.
• Überwachen Sie die Netzwerkaktivität, um Engpässe zu identifizieren.
• Implementieren Sie Fallback-Aktionen, wie etwa das Neuladen der Seite, wenn Timeouts auftreten.
• Überprüfen Sie die Selektoren doppelt, um unnötige Verzögerungen zu vermeiden.

Diese Vorgehensweisen tragen dazu bei, dass Ihre Skripte sowohl zuverlässig als auch effizient sind.

waitForFunction schneller ausführen

Tipps zu Geschwindigkeit und Ressourcen

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.

<span class="hljs-comment">// Optimize waiting with a networkidle strategy</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-attr">waitUntil</span>: <span class="hljs-string">'networkidle2'</span>,
    <span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>
});

<span class="hljs-comment">// Combine checks in a single evaluate call</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> element = <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">const</span> isVisible = element?.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">const</span> hasData = element?.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">return</span> isVisible && hasData;
});

So reduzieren Sie die Ressourcennutzung:

• Blockieren Sie unnötige Elemente wie Bilder oder Schriftarten.
• Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, waitForSelector or waitForFunction statt veraltet waitForTimeout.
• Kombinieren Sie mehrere Prüfungen in einer einzigen evaluate Aufruf, um die Kommunikation zwischen Browser und Knoten zu reduzieren.

Strategie	Auswirkungen auf die Leistung	Bester Anwendungsfall
Netzwerkleerlauf2	Moderat	Seitennavigation
warteAufAuswahl	Schnell	Einzelelementprüfungen
warteAufFunktion	Variable	Komplexe Bedingungen
Kombinierte Bewertung	Schnellste	Mehrfachelementprüfungen

Diese Methoden können dabei helfen, häufige Engpässe zu beheben, die im nächsten Abschnitt behandelt werden.

Häufige Probleme beheben

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:

<span class="hljs-comment">// Avoid rigid selectors like this</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForSelector</span>(<span class="hljs-string">'div.container > div:nth-child(2) > span.text-red'</span>);

<span class="hljs-comment">// Use a more flexible approach</span>
<span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
    <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.text-red'</span>)?.<span class="hljs-property">offsetParent</span> !== <span class="hljs-literal">null</span>
);

Ressourcenmanagement
Verwalten Sie Ressourcen und vermeiden Sie unnötige Verzögerungen:

<span class="hljs-keyword">try</span> {
    <span class="hljs-keyword">await</span> page.<span class="hljs-title function_">waitForFunction</span>(
        <span class="hljs-function">() =></span> <span class="hljs-variable language_">document</span>.<span class="hljs-property">readyState</span> === <span class="hljs-string">'complete'</span> &&
              performance.<span class="hljs-title function_">now</span>() > <span class="hljs-number">1000</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">'Page load timeout:'</span>, error.<span class="hljs-property">message</span>);
}

„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.

Häufige Verwendungsmöglichkeiten für benutzerdefinierte Warteregeln

Laden von Produkten im Online-Shop

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:

<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> products = <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-property">length</span> > <span class="hljs-number">0</span> && all images and prices fully load;
});

Für mehr Präzision können Sie diesen Ansatz verwenden:

<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> productDetails = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.product-details'</span>);
    <span class="hljs-keyword">return</span> productDetails && 
           productDetails.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && 
           productDetails.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.inventory-status'</span>) !== <span class="hljs-literal">null</span>;
}, {<span class="hljs-attr">timeout</span>: <span class="hljs-number">30000</span>});

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.

Laden von Inhalten in modernen Web-Apps

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:

<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">'.tv-lightweight-charts'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && element.<span class="hljs-property">offsetWidth</span> > <span class="hljs-number">0</span>;
});

Wenn mehrere Abschnitte geladen werden müssen, kombinieren Sie Bedingungen wie folgt:

<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> contentLoaded = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.content'</span>).<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">const</span> dataUpdated = <span class="hljs-variable language_">document</span>.<span class="hljs-property">body</span>.<span class="hljs-property">textContent</span>.<span class="hljs-title function_">includes</span>(<span class="hljs-string">'Last updated:'</span>);
    <span class="hljs-keyword">return</span> contentLoaded && dataUpdated;
}, {<span class="hljs-attr">polling</span>: <span class="hljs-number">1000</span>});

Mit dieser Methode stellen Sie sicher, dass Ihre Automatisierungsskripte nahtlos mit dynamischen Inhalten interagieren.

Erkennung von Formularfehlermeldungen

Die Erkennung von Formularfehlern erfolgt nach einer ähnlichen Logik wie die Überprüfung der Elementsichtbarkeit. So können Sie Fehlermeldungen überwachen:

<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> errorContainer = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">'.error-messages'</span>);
    <span class="hljs-keyword">const</span> hasErrors = errorContainer?.<span class="hljs-property">children</span>.<span class="hljs-property">length</span> > <span class="hljs-number">0</span>;
    <span class="hljs-keyword">const</span> isVisible = errorContainer?.<span class="hljs-property">offsetParent</span> !== <span class="hljs-literal">null</span>;
    <span class="hljs-keyword">return</span> 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

Fazit

Key Take Away

Die 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:

• Flexible Auswertung: Verarbeitet asynchrone Funktionen zur Überwachung komplexer Seitenzustände [3]..
• Kontextintegration: Ermöglicht die direkte Übergabe von Node.js-Argumenten in den Browserkontext [3]..
• Benutzerdefinierte Logik: Ermöglicht maßgeschneiderte Automatisierung basierend auf bestimmten Seitenbedingungen [2]..

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.

Puppenspieler und Latenknoten in Aktion

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:

<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">'.tv-lightweight-charts'</span>);
    <span class="hljs-keyword">return</span> element && element.<span class="hljs-property">offsetHeight</span> > <span class="hljs-number">0</span> && element.<span class="hljs-property">offsetWidth</span> > <span class="hljs-number">0</span>;
});

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:

• Legen Sie geeignete Timeout-Werte fest, indem Sie page.setDefaultTimeout().
• Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, try-catch Blöcke für eine robuste Fehlerbehandlung.
• Verfolgen Sie die Ausführungszeiten, um Ihre Wartebedingungen zu optimieren.

Ähnliche Artikel

• Installieren und Konfigurieren von Puppeteer: Lösen häufiger Abhängigkeits- und Chromium-Probleme
• Seitennavigation mit Puppeteer meistern: Effektive Nutzung von „goto“ und Navigationsoptionen
• Puppeteer-Klickvorgänge: Umgang mit komplexen Elementen, Doppelklicks und Fehlerbehebung
• Browserautomatisierung mit Puppeteer und JavaScript: Praktische Umsetzung in Node.js