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.
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 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
Le 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 :
// 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'
);
La clé ici est que votre fonction doit renvoyer une valeur véridique avant que le script puisse avancer .
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:
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 :
Choisissez le mode de sondage en fonction de vos besoins :
Utilisez '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 :
await page.waitForFunction(() => {
const element = document.querySelector('.tv-lightweight-charts');
return element && element.offsetHeight > 0 && element.offsetWidth > 0;
});
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 .
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 :
// Wait for specific text content
await page.waitForFunction(
selector => {
const element = document.querySelector(selector);
return element && element.textContent.includes('Ready');
},
{},
'.status-message'
);
Pour des vérifications de propriétés plus détaillées, transmettez des arguments supplémentaires :
Cette méthode combine Validation de la réponse de l'API avec Vérifications des éléments DOM, en veillant à ce que les données et le contenu visuel soient prêts .
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 :
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 :
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;
}
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 timeout option dans la méthode
Attente infinie
Retards connus
timeout: 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 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.
// 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;
});
Pour réduire l’utilisation des ressources :
Bloquez les ressources inutiles comme les images ou les polices.
Utilisez 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
networkidle2
Modérée
Navigation de page
waitForSelector
Rapide
Vérifications d'éléments uniques
waitForFunction
Variable
Conditions complexes
Combiné evaluate
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é :
// 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
);
Gestion des ressources
Gérez les ressources et évitez les retards inutiles :
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
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 :
await page.waitForFunction(() => {
const products = document.querySelectorAll('.product-card');
return products.length > 0 && all images and prices fully load;
});
Pour plus de précision, vous pouvez utiliser cette approche :
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 :
await page.waitForFunction(() => {
const element = document.querySelector('.tv-lightweight-charts');
return element && element.offsetHeight > 0 && element.offsetWidth > 0;
});
Si plusieurs sections doivent être chargées, combinez les conditions comme ceci :
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 :
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
Faits marquants
Le 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 .
Voici quelques avantages clés de l’utilisation waitForFunction:
Évaluation flexible: Gère les fonctions asynchrones pour surveiller les états de page complexes .
Intégration du contexte: Permet le passage direct des arguments Node.js dans le contexte du navigateur .
Logique personnalisée:Permet une automatisation personnalisée en fonction des conditions spécifiques de la page .
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.
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. .
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 :
await page.waitForFunction(() => {
const element = document.querySelector('.tv-lightweight-charts');
return element && element.offsetHeight > 0 && element.offsetWidth > 0;
});
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 .
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 try-catch blocs pour une gestion robuste des erreurs.
Suivez les temps d’exécution pour affiner vos conditions d’attente.
Créez des flux de travail d'IA puissants et automatisez les routines
Unifiez les meilleurs outils d'IA sans codage ni gestion de clés API, déployez des agents d'IA et des chatbots intelligents, automatisez les flux de travail et réduisez les coûts de développement.