.png)
.svg){kind=icon}
17 mars 2025
•
8
min lire
Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur
Georges Miloradovitch
Chercheur, rédacteur et intervieweur de cas d'utilisation
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 :
Exemple rapide:
await page.type('#username', 'exampleUser');
await page.type('#password', 'examplePass');
await page.click('#submit-button');
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.
Cette section explique comment Puppeteer peut gérer la saisie de texte et simuler la frappe d'une manière plus humaine.
Voici quelques méthodes que vous pouvez utiliser pour automatiser la saisie de texte avec Puppeteer :
| Méthode | Case Study | Avantages | Limites |
|---|---|---|---|
page.type() |
Entrée générale | Déclenche tous les événements du clavier | Plus lent mais imite la frappe réelle |
page.keyboard.type() |
Saisie rapide des données | Saisit directement les séquences de touches | Plus rapide mais saute certains événements |
page.$eval() |
Mises à jour groupées | Définit les valeurs instantanément | Ignore les contrôles de validation des entrées |
Par exemple, lors de l’automatisation d’un formulaire de connexion comme https://the-internet.herokuapp.com/login, vous pouvez utiliser le code suivant :
await page.type('#username', 'tomsmith');
await page.type('#password', 'SuperSecretPassword!');
await page.keyboard.press('Enter');
Pour une saisie plus naturelle, vous pouvez ajouter des délais entre les frappes. Plus de détails à ce sujet dans la section suivante.
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.
await page.type('#search-input', 'automation testing', { delay: 100 });
await page.typeHuman('[name="q"]', "Is a robot writing right now?", {
backspaceMaximumDelayInMs: 1500,
backspaceMinimumDelayInMs: 750,
maximumDelayInMs: 650,
minimumDelayInMs: 150
});
Cette méthode rend la saisie plus naturelle en :
Pour une interaction encore plus réaliste :
await page.focus('#input-field');
await page.type('#input-field', 'Hello World');
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.
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. »
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
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 :
| Défi | Solution | Exemple de code |
|---|---|---|
| Chargement AJAX | Utiliser des attentes explicites | await page.waitForSelector('.dynamic-field') |
| Champs conditionnels | Vérifiez la visibilité | await page.waitForSelector('#conditional-input:not([style*="display: none"])') |
| Validation en temps réel | Surveiller les états d'erreur | await page.waitForFunction('document.querySelector(".error-message") === null') |
Pour les champs avec validation dynamique :
// 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 :
try {
await page.waitForSelector('#dynamic-content', { timeout: 5000 });
} catch (error) {
console.error('Dynamic content failed to load:', error);
}
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.
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 :
await page.evaluate(async () => {
await new Promise((resolve) => {
let totalHeight = 0;
const distance = 100;
const timer = setInterval(() => {
const scrollHeight = document.body.scrollHeight;
window.scrollBy(0, distance);
totalHeight += distance;
if (totalHeight >= scrollHeight) {
clearInterval(timer);
resolve();
}
}, 100);
});
});
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.
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 :
| type d'action | Plage de retard | Exemple de mise en œuvre |
|---|---|---|
| Mouvement de la souris | 100 à 300 ms | await page.waitForTimeout(Math.random() * 200 + 100) |
| Saisie de formulaire | 50 à 150 ms | await page.type('#input', 'text', { delay: Math.random() * 100 + 50 }) |
| Défilement des pages | 500 à 1000 ms | await page.waitForTimeout(Math.random() * 500 + 500) |
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 :
page.on('dialog', async dialog => {
const message = dialog.message();
if (message.includes('confirm')) {
await dialog.accept();
} else {
await dialog.dismiss();
}
});
Ces stratégies garantissent que vos flux d’automatisation sont à la fois efficaces et réalistes.
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.
Utilisez blocs try-catch pour détecter et gérer efficacement les erreurs :
try {
await page.type('#username', 'testuser');
await page.type('#password', 'password123');
await page.click('#submit');
} catch (error) {
console.error(`Form submission failed: ${error.message}`);
await page.screenshot({ path: `error-${Date.now()}.png` });
}
Validez vos formulaires en vérifiant les messages d’erreur et en confirmant les soumissions réussies :
// Look for error messages
const errorMessage = await page.$('.error-message-container');
if (errorMessage) {
const text = await page.evaluate(el => el.textContent, errorMessage);
throw new Error(`Validation failed: ${text}`);
}
// Confirm successful submission
const success = await page.waitForSelector('.success-message', { timeout: 5000 })
.catch(() => false);
if (!success) {
throw new Error('Form submission timeout');
}
Définissez des délais d'attente pour empêcher votre script de se bloquer indéfiniment :
await page.setDefaultNavigationTimeout(30000);
await page.setDefaultTimeout(20000);
Voyons maintenant comment améliorer les performances pour une automatisation plus rapide et plus efficace.
Optimisez vos scripts d’automatisation avec ces techniques :
| Technique | Implantation | 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 Nous avons appliqué ces stratégies et réduit le temps de traitement de 50,000 7,500 formulaires soumis de 5,833 22 minutes à XNUMX XNUMX minutes, soit une amélioration de XNUMX %.
Voici un exemple de configuration de production :
const browser = await puppeteer.launch({
headless: "new",
args: [
'--disable-gpu',
'--disable-dev-shm-usage',
'--disable-setuid-sandbox',
'--no-sandbox'
]
});
// Block unnecessary resources
await page.setRequestInterception(true);
page.on('request', request => {
if (['image', 'stylesheet', 'font'].includes(request.resourceType())) {
request.abort();
} else {
request.continue();
}
});
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
});
Puppeteer simplifie l'automatisation des formulaires et réduit considérablement le travail manuel. Voici comment intégrer Puppeteer à 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 :
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.
