Marionnettiste est une bibliothèque Node.js qui automatise les navigateurs comme Chrome, simplifiant ainsi les tâches répétitives comme le remplissage de formulaires, la saisie de texte et l'interaction utilisateur. Voici ce que vous pouvez en faire :
Automatiser les saisies de formulaires:Remplissez des champs de texte, des listes déroulantes, des cases à cocher et même des formulaires dynamiques.
Simuler la frappe humaine: Ajoutez des délais, des corrections et des pauses pour une entrée réaliste.
Gérer des formulaires complexes: Gérez les sélecteurs de date, les formulaires en plusieurs étapes et la validation en temps réel.
Interaction de l'utilisateur: Simulez les mouvements de la souris, le défilement et la navigation.
Principaux avantages:
Gagnez du temps en réduisant le travail manuel jusqu'à 50%.
Améliorez la précision en éliminant les erreurs humaines.
Adaptez les flux de travail à plusieurs formulaires simultanément.
Réduisez les coûts en automatisant les tâches répétitives.
Que vous automatisiez des pages de connexion, des formulaires en plusieurs étapes ou que vous gériez du contenu dynamique, Puppeteer vous offre les outils nécessaires pour simplifier votre flux de travail. Prêt à vous lancer ? Découvrons son fonctionnement.
sbb-itb-23997f1
Utilisez le navigateur sans tête basé sur Puppeteer sur Latenode pour automatiser les soumissions de formulaires
Latenode offre une intégration directe avec un navigateur headless basé sur Puppeteer pour automatiser les soumissions de formulaires, la récupération de données sur les sites web, la capture d'écran et bien plus encore. Ajoutez du code, quelle que soit sa complexité, ou utilisez l'assistant IA pour configurer le nœud.
Pour une saisie plus naturelle, vous pouvez ajouter des délais entre les frappes. Plus de détails à ce sujet dans la section suivante.
Ajout de modèles de frappe de type humain
Pour simuler la façon dont une personne tape, vous pouvez introduire des délais variables, des corrections et des pauses. puppeteer-extra-plugin-human-typing le plugin est utile pour créer ces effets.
S'appuyant sur l'automatisation des champs de texte de base, les formulaires avancés comme les listes déroulantes, les saisies de date et les formulaires dynamiques nécessitent des approches spécifiques. Découvrons comment gérer efficacement ces composants.
Sélectionner les menus et les commandes d'entrée
Automatiser les menus déroulants, les cases à cocher et les boutons radio est simple avec Puppeteer. Voici comment procéder :
// Selecting a value from a dropdown
await page.select('#country-select', 'AUS'); // Selects "Australia"
// Interacting with a checkbox
await page.click('#terms-checkbox');
// Selecting a radio button
await page.click('[id=Mortgagees_0__MortgageeType][value=COR]');
« Les localisateurs encapsulent les informations sur la façon de sélectionner un élément et permettent à Puppeteer d'attendre automatiquement que l'élément soit présent dans le DOM et qu'il soit dans le bon état pour l'action. »
Automatisation de la saisie des dates
Les sélecteurs de date peuvent varier en complexité. Voici comment gérer les champs de date simples et en lecture seule :
// Typing directly into a simple date input
await page.type("#datepicker", "01/26/2025");
// Modifying a readonly date input
await page.$eval('#txt_FromDateText', el => el.removeAttribute('readonly'));
await page.type('#txt_FromDateText', '03/17/2025');
Pour les sélecteurs de dates basés sur le calendrier :
await page.click('#calendar-trigger'); // Open the calendar
await page.waitForSelector('.calendar-grid'); // Wait for the calendar UI
await page.click(`[data-date="2025-03-17"]`); // Select the desired date
Gestion dynamique des formulaires
Les formulaires dynamiques présentent souvent des difficultés telles que les délais de chargement, les champs conditionnels et la validation en temps réel. Voici comment les gérer :
// Wait for the input field to be ready
await page.waitForSelector('#dynamic-input');
// Enter data and wait for validation to complete
await page.type('#dynamic-input', '[email protected]');
await page.waitForFunction(
selector => !document.querySelector(selector).classList.contains('error'),
{},
'.validation-indicator'
);
La gestion des formulaires en plusieurs étapes nécessite une navigation prudente :
// Proceed to the next step
await page.click('#next-button');
await page.waitForNavigation();
// Accept confirmation dialogs
page.on('dialog', async dialog => {
await dialog.accept();
});
Enfin, incluez toujours la gestion des erreurs pour les problèmes inattendus :
En s'appuyant sur l'automatisation de la saisie, la simulation d'interactions utilisateur complètes améliore la gestion des tâches de soumission de formulaires. Puppeteer offre des outils pour des actions de souris et une navigation précises, ce qui le rend idéal pour la gestion de scénarios de formulaires complexes.
Actions de la souris et du défilement
Voici comment vous pouvez simuler des mouvements de souris et un défilement réalistes :
// Hover over an element
await page.hover('#form-element');
// Perform a delayed click
await page.click('#submit-button', { delay: 5000 });
// Smooth scrolling example
await page.evaluate(() => {
window.scrollTo({ top: 500, behavior: 'smooth' });
});
Pour un défilement infini, suivez la hauteur de la page et chargez le contenu de manière dynamique :
Ces techniques vont au-delà des interactions de base, en particulier lors de la gestion de formulaires en plusieurs étapes qui nécessitent une navigation fluide.
Navigation dans les formulaires en plusieurs étapes
Lors de l'automatisation de formulaires en plusieurs étapes, la gestion des comportements utilisateur est essentielle. Pour le développement, configurez le navigateur pour afficher son interface utilisateur et ralentir les opérations afin de faciliter le débogage :
const browser = await puppeteer.launch({
headless: false, // Display browser UI during development
slowMo: 100 // Add a delay of 100ms between actions
});
Introduisez des délais variables pour imiter le comportement naturel de l'utilisateur :
Pour la production, passez en mode sans tête (headless: true) pour améliorer les performances. Le SauceDemo L'exemple d'automatisation présente la validation des entrées en ciblant le .error-message-container sélecteur .
Pour gérer les boîtes de dialogue modales ou les fenêtres contextuelles, répondez en fonction de leur contenu :
Ces stratégies garantissent que vos flux d’automatisation sont à la fois efficaces et réalistes.
Directives d'automatisation des formulaires
Cette section développe les bases de l'automatisation des formulaires, en se concentrant sur la gestion des erreurs et l'amélioration des performances pour garantir le bon fonctionnement de vos flux de travail.
Gestion des erreurs
Utilisez blocs try-catch pour détecter et gérer efficacement les erreurs :
Voyons maintenant comment améliorer les performances pour une automatisation plus rapide et plus efficace.
Conseils de performance
Optimisez vos scripts d’automatisation avec ces techniques :
Technique
Mise en œuvre
Impact sur les performances
Réutilisation des cookies de session
Enregistrer et réutiliser les cookies d'authentification
Réduit le temps d'exécution de 30 %
Blocage des ressources
Bloquer les requêtes CSS, images et polices
Accélère les temps de chargement jusqu'à 50 %
Gestion des instances du navigateur
Utilisez userDataDir pour la persistance de session
Évite les connexions répétées
Attente sélective d'éléments
Utilisez waitForSelector avec contrôles de visibilité
Réduit les erreurs de délai d'attente
Par exemple, Solutions de récupération de données appliqué ces stratégies et réduit le temps de traitement de 50,000 7,500 soumissions de formulaires de 5,833 22 minutes à XNUMX XNUMX minutes, soit une amélioration de XNUMX % .
L'exécution en mode sans tête peut également accélérer considérablement l'exécution : les tests qui prenaient 5 secondes ont été terminés en seulement 3 secondes, soit une amélioration de 40 % .
« Maîtriser la gestion des erreurs n'était pas seulement bénéfique : c'était essentiel pour créer des workflows d'automatisation efficaces et fiables. » - Nathan, OneQuery
Enfin, pour les formulaires dynamiques, utilisez des stratégies d’attente intelligentes pour gérer les comportements imprévisibles :
// Wait for network activity to settle
await page.waitForNavigation({
waitUntil: 'networkidle0',
timeout: 30000
});
// Ensure the element is visible before interacting
await page.waitForSelector('#submit-button', {
visible: true,
timeout: 5000
});
Résumé et prochaines étapes
Puppeteer simplifie l'automatisation des formulaires, réduisant considérablement le travail manuel Voici comment vous pouvez intégrer Puppeteer dans vos flux de travail :
Zone de mise en œuvre
Impact sur les entreprises
Mesure de réussite
Collecte des Données
Suivi automatisé du marché en temps réel
60 % de prise de décision améliorée
Traitement de formulaire
Moins de saisie manuelle des données
Augmentation de l'efficacité de 30 à 50 %
Test et Validation
Des formulaires plus fiables
Moins d'erreurs
Test de performance
Expérience utilisateur plus fluide
Temps de chargement plus rapides
Ces méthodes peuvent vous aider à passer d’une automatisation de base à une configuration Puppeteer entièrement intégrée.
Puppeteer est plus qu'un simple outil : c'est une véritable passerelle vers l'efficacité opérationnelle. En automatisant les tâches répétitives, en simplifiant les flux de travail et en collectant des données en temps réel, les entreprises peuvent garder une longueur d'avance dans le paysage concurrentiel actuel.
Pour tirer parti des avantages décrits ci-dessus, explorez ces options d’intégration :
Solutions Low-CodeLatenode rend l'automatisation Puppeteer sans serveur accessible sans aucun codage. Par exemple, vous pouvez concevoir des workflows pour enregistrer des instantanés d'URL au format PDF et les charger automatiquement dans des buckets AWS S3. .
Fonctionnalités avancées:Utilisez les plugins Puppeteer Extra pour des tâches telles que la navigation anonyme Pour les défis CAPTCHA, des services comme 2Captcha peut aider à assurer une automatisation fluide .
Intégration d'entreprise: Des organisations telles que TâcheNous ont intégré avec succès Puppeteer à leurs opérations. Comme l'a déclaré Manish Pandya, vice-président senior du numérique chez TâcheNous, explique:
TaskUs exploite PixieBrix pour offrir à ses clients la flexibilité nécessaire pour améliorer l'expérience utilisateur et les flux de travail. C'est un atout essentiel pour concrétiser notre vision.
Pour une automatisation fiable des formulaires, concentrez-vous sur une gestion robuste des erreurs, des stratégies d'attente intelligentes et une surveillance cohérente.
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.