Conditions d'attente personnalisées avec waitForFunction dans Puppeteer

Voulez votre Marionnettiste des scripts pour mieux gérer les sites Web dynamiques ? Voici la clé : waitForFunction vous permet de définir des règles d'attente personnalisées pour garantir que votre automatisation fonctionne de manière transparente avec un contenu changeant.

Pourquoi utiliser `waitForFunction`?

Synchronisation du contrôle:Attendez que des conditions spécifiques soient remplies (par exemple, le chargement des éléments, les modifications du texte).
Gérer le contenu dynamique:Parfait pour les sites Web modernes et dynamiques.
Éviter les erreurs: Évitez les retards inutiles ou les interactions prématurées.

Comment ça fonctionne

Écrire des conditions JavaScript qui renvoient true quand prêt
Utilisez des options telles que la fréquence d'interrogation (raf, mutation, ou millisecondes) et des délais d'attente pour de meilleures performances.
Combinez les vérifications DOM avec les réponses API pour les scénarios avancés.

Exemple :

<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>
);

Caractéristiques principales:

Surveillez la visibilité des éléments, le contenu du texte ou les propriétés personnalisées.
Combinez plusieurs conditions pour des flux de travail complexes.
Gérez les délais d’attente et les erreurs avec élégance.

Astuce: Utilisation waitForFunction pour remplacer les obsolètes sleep appels et améliorer l'efficacité.

Description rapide:

Fonctionnalité	Ce qu'il fait
Modes de sondage	Vérifie les conditions via 'raf', 'mutation' ou des intervalles personnalisés
Conditions personnalisées	Attendre des états DOM spécifiques ou des réponses API
Gestion des délais d'attente	Définir des délais d'expiration spécifiques à l'opération ou globaux

Cette méthode garantit que vos scripts sont fiables, efficaces et prêts à relever tout défi de contenu dynamique.

Comment attendre / dormir pendant N secondes dans marionnettiste?

Notions de base sur waitForFunction

L'espace waitForFunction La méthode Puppeteer vous permet de définir des conditions personnalisées pour l'attente de vos scripts avant leur exécution. Voici comment l'utiliser efficacement.

Comment écrire des fonctions d'attente de base

Voici une manière simple de créer une fonction d’attente :

<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>
);

La clé ici est que votre fonction doit renvoyer une valeur véridique avant que le script puisse avancer [1].

Voyons maintenant comment le configurer pour de meilleures performances.

Configuration des paramètres de fonction

Vous pouvez affiner waitForFunction en passant un objet d'options. Les paramètres clés incluent :

Paramètre	Description	Valeurs communes
vote	À quelle fréquence la condition est-elle vérifiée	« raf », « mutation » ou millisecondes
temps mort	Temps d'attente maximum	Par défaut : 30,000 30 ms (XNUMX secondes)

Modes de sondage [4]:

RequestAnimationFrame ('raf')
Idéal pour surveiller les changements de style, car il vérifie les conditions pendant chaque image d'animation.
Observateur de mutation (« mutation »)
Utile pour suivre les modifications dans la structure du DOM. Il déclenche des vérifications à chaque mise à jour du DOM.

Intervalle personnalisé (millisecondes)
Par exemple, cela vérifie la condition toutes les secondes :

<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> }
);

Choisissez le mode de sondage en fonction de vos besoins :

Utilisez le 'raf' pour des animations ou des mises à jour de style.
Opter pour 'mutation' pour les modifications liées au DOM.
Définissez un intervalle personnalisé (millisecondes) pour des cas d’utilisation plus larges.

Création de règles d'attente personnalisées

Vérification de l'état d'affichage des éléments

Pour confirmer qu'un élément est visible, vous pouvez vérifier sa présence et ses dimensions :

<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>;
});

Cela garantit que l'élément existe et que ses dimensions sont visibles sur la page. C'est particulièrement utile pour contenu dynamique cela prend du temps à charger correctement [2].

Tester les propriétés du texte et des éléments

Au-delà des contrôles visuels, vous pouvez surveiller le contenu du texte ou les propriétés spécifiques des éléments :

<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>
);

Pour des vérifications de propriétés plus détaillées, transmettez des arguments supplémentaires :

<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
);

Combinaison de plusieurs règles d'attente

Une fois les conditions individuelles testées, vous pouvez les combiner pour créer des scénarios plus complexes. Par exemple :

<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>;
});

Pour gérer plusieurs éléments avec des conditions indépendantes, utilisez Promise комбинации [5]:

Modèle d'attente	Case Study	Mise en œuvre
Tous les éléments	Attendre plusieurs éléments requis	Promesse.tout()
Tout élément	Continuer lorsque le premier élément apparaît	Promise.race()
Logique personnalisée	Gérer des contrôles conditionnels complexes	Fonctions d'attente combinées

Pour les opérations asynchrones, vous pouvez créer des conditions d’attente avancées :

<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> }
);

Cette méthode combine Validation de la réponse de l'API au Vérifications des éléments DOM, en veillant à ce que les données et le contenu visuel soient prêts [1].

sbb-itb-23997f1

Méthodes waitForFunction avancées

Écrire des conditions JavaScript complexes

Pour des applications Web plus dynamiques, vous pouvez utiliser waitForFunction pour créer des conditions JavaScript détaillées. Voici un exemple :

<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>
);

Ce script assure :

Le conteneur de graphique existe.
Un nombre minimum de points de données est présent.
Tous les points de données sont visibles.
Aucun des points n'est en état de chargement.

Vous pouvez également combiner des vérifications asynchrones avec des évaluations DOM pour des scénarios plus complexes :

<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>
    }
);

Cette approche combine les vérifications DOM avec un appel API pour garantir que l'interface utilisateur et le backend sont synchronisés.

Gestion des délais d'attente et des erreurs

La gestion des délais d'attente est cruciale lorsque l'on travaille avec waitForFunctionVoici un exemple de gestion efficace des délais d'attente :

<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;
}

Voici un bref aperçu des stratégies de temporisation :

Stratégie de temporisation	Case Study	Configuration
Délai d'expiration par défaut	Opérations générales	page.setDefaultTimeout()
Délai d'expiration de la navigation	Chargements de pages	page.setDefaultNavigationTimeout()
Spécifique à l'opération	Contrôles détaillés	Utilisez l'option de délai d'attente dans la méthode
Attente infinie	Retards connus	délai d'attente : 0

Pour améliorer la gestion des erreurs :

Ajustez les paramètres de délai d’expiration en fonction de la complexité de chaque opération.
Utilisez le try-catch blocs pour récupérer gracieusement des erreurs.
Surveillez l’activité du réseau pour identifier les goulots d’étranglement.
Implémentez des actions de secours, comme le rechargement de la page, lorsque des délais d'attente se produisent.
Vérifiez deux fois les sélecteurs pour éviter des retards inutiles.

Ces pratiques contribueront à garantir que vos scripts sont à la fois fiables et efficaces.

Accélérer l'exécution de waitForFunction

Conseils sur la vitesse et les ressources

Pour obtenir waitForFunction Pour une meilleure efficacité, privilégiez des stratégies d'attente intelligentes et une gestion optimale des ressources. Utilisez les outils de développement de navigateur pour mesurer les temps de chargement et définir des délais d'expiration précis.

<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;
});

Pour réduire l’utilisation des ressources :

Bloquez les ressources inutiles comme les images ou les polices.
Utilisez le waitForSelector or waitForFunction au lieu d'être obsolète waitForTimeout.
Combinez plusieurs chèques en un seul evaluate appel pour réduire la communication entre le navigateur et le nœud.

de Marketing	Impact sur les performances	Meilleur cas d'utilisation
réseau inactif2	Modérée	Navigation de page
attendre le sélecteur	Rapide	Vérifications d'éléments uniques
waitForFunction	Variable	Conditions complexes
Évaluation combinée	Résultats des tests	Vérifications d'éléments multiples

Ces méthodes peuvent aider à résoudre les goulots d’étranglement courants, qui sont abordés dans la section suivante.

Résoudre les problèmes courants

Les problèmes de performance proviennent souvent de modes d'attente inefficaces. Voici comment les résoudre :

Problèmes de sélection
Des sélecteurs trop rigides peuvent entraîner des pannes. Simplifiez-les pour une meilleure fiabilité :

<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>
);

Gestion des ressources
Gérez les ressources et évitez les retards inutiles :

<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 possède une architecture pilotée par événements, ce qui élimine de nombreuses failles potentielles. Il n'y a pas besoin de mal. sleep[undefined] appels dans les scripts du marionnettiste." - Lisez-moi du marionnettiste [6]

Enveloppez toujours les méthodes d'attente dans try...catch Des blocs pour gérer les erreurs efficacement et fournir des options de secours. Cette approche garantit la robustesse et la fiabilité de vos scripts.

Utilisations courantes des règles d'attente personnalisées

Chargement des produits de la boutique en ligne

Il est essentiel de s'assurer que les produits se chargent correctement pour collecter des données précises. Utilisez une règle d'attente personnalisée pour suspendre l'exécution jusqu'à ce que les éléments du produit soient entièrement chargés :

<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;
});

Pour plus de précision, vous pouvez utiliser cette approche :

<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>});

Cela garantit que votre script attend que tous les éléments nécessaires soient chargés, améliorant ainsi la fiabilité de la collecte de données dans les scénarios de commerce électronique.

Chargement de contenu dans les applications Web modernes

Les applications web dynamiques nécessitent souvent des conditions d'attente spécifiques pour gérer le chargement du contenu. Par exemple, vous pouvez attendre qu'un élément particulier soit entièrement visible :

<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>;
});

Si plusieurs sections doivent être chargées, combinez les conditions comme ceci :

<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>});

Cette méthode permet de garantir que vos scripts d’automatisation interagissent de manière transparente avec le contenu dynamique.

Détection des messages d'erreur de formulaire

La détection des erreurs de formulaire utilise une logique similaire à celle des contrôles de visibilité des éléments. Voici comment surveiller les messages d'erreur :

<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;
});

Vous pouvez également suivre différents états de validation de formulaire à l'aide de conditions d'attente spécifiques :

Type de validation	Condition d'attente	Case Study
Erreurs de terrain	Vérifier la présence d'une classe d'erreur	Validation individuelle des champs
Erreurs à l'échelle du formulaire	Surveiller le conteneur d'erreurs	État général de la forme
Messages de réussite	Soyez attentif aux affichages de confirmation	Achèvement de la soumission
États de chargement	Suivre l'état du bouton d'envoi	Indication de traitement

Conclusion

À retenir

L'espace waitForFunction La méthode dans Puppeteer évalue les conditions JavaScript jusqu'à ce qu'elles renvoient true, offrant un contrôle précis sur les interactions dynamiques des pages [3].

Voici quelques avantages clés de l’utilisation waitForFunction:

Évaluation flexible: Gère les fonctions asynchrones pour surveiller les états de page complexes [3].
Intégration du contexte: Permet le passage direct des arguments Node.js dans le contexte du navigateur [3].
Logique personnalisée:Permet une automatisation personnalisée en fonction des conditions spécifiques de la page [2].

Cette approche est particulièrement utile lorsque les méthodes d'attente standard ne suffisent pas. Par exemple, dans les applications monopage avancées, plusieurs éléments peuvent se charger simultanément, ou certains états JavaScript doivent être confirmés avant de poursuivre.

Marionnettiste et Laténode en action

Latenode profite de waitForFunction Pour améliorer l'automatisation des flux de travail. En intégrant cette méthode, Latenode a créé un nœud de surveillance personnalisé qui vérifie l'état des sites web et effectue des captures d'écran lorsque certaines conditions ne sont pas remplies. [7].

Voici un exemple de la façon dont Latenode utilise waitForFunction pour garantir que les éléments critiques sont entièrement rendus avant de continuer :

<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>;
});

Cet extrait attend un élément avec la classe .tv-lightweight-charts pour non seulement apparaître dans le DOM mais aussi être entièrement rendu [2].

Pour de meilleurs résultats lors de l'utilisation de Latenode avec Puppeteer :

Définissez des valeurs de délai d'expiration appropriées à l'aide de page.setDefaultTimeout().
Utilisez le try-catch blocs pour une gestion robuste des erreurs.
Suivez les temps d’exécution pour affiner vos conditions d’attente.

Conditions d'attente personnalisées avec waitForFunction dans Puppeteer

Pourquoi utiliser `waitForFunction`?

Comment ça fonctionne

Exemple :

Caractéristiques principales:

Description rapide:

Comment attendre / dormir pendant N secondes dans marionnettiste?

Notions de base sur waitForFunction

Comment écrire des fonctions d'attente de base

Configuration des paramètres de fonction

Création de règles d'attente personnalisées

Vérification de l'état d'affichage des éléments

Tester les propriétés du texte et des éléments

Combinaison de plusieurs règles d'attente

sbb-itb-23997f1

Méthodes waitForFunction avancées

Écrire des conditions JavaScript complexes

Gestion des délais d'attente et des erreurs

Accélérer l'exécution de waitForFunction

Conseils sur la vitesse et les ressources

Résoudre les problèmes courants

Utilisations courantes des règles d'attente personnalisées

Chargement des produits de la boutique en ligne

Chargement de contenu dans les applications Web modernes

Détection des messages d'erreur de formulaire

Conclusion

À retenir

Marionnettiste et Laténode en action

articles similaires

Articles Relatifs

Qu'est-ce qu'un navigateur headless ? Guide d'automatisation, de test et de scraping Web

Navigateurs sans tête pour le Web Scraping : les meilleurs outils et techniques pour 2025

Détection de navigateur sans tête : techniques et stratégies pour déjouer les robots

Pourquoi utiliser waitForFunction?

Comment ça fonctionne

Exemple :

Caractéristiques principales:

Description rapide:

Comment attendre / dormir pendant N secondes dans marionnettiste?

Notions de base sur waitForFunction

Comment écrire des fonctions d'attente de base

Configuration des paramètres de fonction

Création de règles d'attente personnalisées

Vérification de l'état d'affichage des éléments

Tester les propriétés du texte et des éléments

Combinaison de plusieurs règles d'attente

sbb-itb-23997f1

Méthodes waitForFunction avancées

Écrire des conditions JavaScript complexes

Gestion des délais d'attente et des erreurs

Accélérer l'exécution de waitForFunction

Conseils sur la vitesse et les ressources

Résoudre les problèmes courants

Utilisations courantes des règles d'attente personnalisées

Chargement des produits de la boutique en ligne

Chargement de contenu dans les applications Web modernes

Détection des messages d'erreur de formulaire

Conclusion

À retenir

Marionnettiste et Laténode en action

articles similaires

Articles Relatifs

Qu'est-ce qu'un navigateur headless ? Guide d'automatisation, de test et de scraping Web

Navigateurs sans tête pour le Web Scraping : les meilleurs outils et techniques pour 2025

Détection de navigateur sans tête : techniques et stratégies pour déjouer les robots

Pourquoi utiliser `waitForFunction`?