Une plateforme low-code alliant la simplicité du no-code à la puissance du full-code 🚀
Commencez gratuitement
Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur
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
Table des matières

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.

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.

Soumettre des formulaires | Soumission de données de formulaire

Méthodes de saisie de formulaire de base

Cette section explique comment Puppeteer peut gérer la saisie de texte et simuler la frappe d'une manière plus humaine.

Automatisation des champs de texte

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.

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.

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 :

  • Réglage de la vitesse de frappe
  • Simulation de corrections de fautes de frappe
  • Ajouter des pauses entre les mots
  • Reproduction d'un comportement réaliste du clavier

Pour une interaction encore plus réaliste :

await page.focus('#input-field');
await page.type('#input-field', 'Hello World');

Automatisation de formulaires complexes

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 :

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);
}
sbb-itb-23997f1

Simulation d'interaction utilisateur

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 :

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.

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 :

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.

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 :

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.

Conseils de performance

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

Résumé et prochaines étapes

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 :

  • Solutions Low-Code: Des plateformes comme Kumologica Rendez 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 comme la navigation anonyme. Pour les défis CAPTCHA, des services comme 2Captcha peut aider à garantir 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.

À lire également

Blogs connexes

Cas d'utilisation

Soutenu par