Automatisation de formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation d’utilisateurs

Puppeteer est une bibliothèque Node.js qui automatise des navigateurs comme Chrome, simplifiant les tâches répétitives telles que le remplissage de formulaires, la saisie de texte et les interactions utilisateur. Voici ce que vous pouvez faire avec :

• Automatiser les saisies de formulaires : remplissez des champs de texte, des listes déroulantes, des cases à cocher et même des formulaires dynamiques.
• Simuler une saisie humaine : ajoutez des délais, des corrections et des pauses pour une saisie 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 utilisateur : simulez les mouvements de 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.
• Faites évoluer les workflows pour gérer 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 la gestion de contenu dynamique, Puppeteer offre les outils nécessaires pour simplifier votre workflow. Prêt à vous lancer ? Découvrons comment cela fonctionne.

sbb-itb-23997f1

Utilisez le navigateur headless basé sur Puppeteer de Latenode pour automatiser l’envoi de formulaires

Latenode propose une intégration directe avec un navigateur headless basé sur Puppeteer afin d’automatiser l’envoi de formulaires, l’extraction de données depuis des sites web, la prise de captures d’écran et bien plus encore. Ajoutez du code de toute complexité ou utilisez l’assistant IA pour configurer le nœud.

Connectez-le à n’importe quels modèles d’IA, bases de données, systèmes CRM et autres services afin d’améliorer, d’étendre et d’accélérer vos workflows. Ne manquez pas l’occasion d’essayer l’automatisation web low-code sur Latenode. Essayez DÈS MAINTENANT le navigateur headless prêt à l’emploi et ne vous souciez plus jamais de l’installation et de la configuration !

Méthodes de base pour la saisie dans les formulaires

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

Automatisation des champs de texte

Voici quelques méthodes que vous pouvez utiliser pour automatiser la saisie de texte avec Puppeteer :

Par exemple, pour automatiser 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 rendre la saisie plus naturelle, vous pouvez ajouter des délais entre les frappes. La section suivante fournit davantage de détails à ce sujet.

Ajout de schémas de saisie semblables à ceux d’un humain

Pour simuler la façon dont une personne tape au clavier, vous pouvez introduire des délais variables, des corrections et des pauses. Le plugin puppeteer-extra-plugin-human-typing 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 :

• Ajustant la vitesse de frappe
• Simulant la correction des fautes de frappe
• Ajoutant des pauses entre les mots
• Reproduisant un comportement réaliste au clavier

Pour une interaction encore plus réaliste :

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

Automatisation de formulaires complexes

En s’appuyant sur l’automatisation de base des champs de texte, les formulaires avancés comme les listes déroulantes, les champs de date et les formulaires dynamiques nécessitent des approches spécifiques. Voyons comment gérer efficacement ces composants.

Menus de sélection et contrôles de saisie

Automatiser les listes déroulantes, 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 nécessaires pour sélectionner un élément et permettent à Puppeteer d’attendre automatiquement que l’élément soit présent dans le DOM et dans le bon état pour l’action. » [4]

Automatisation de la saisie de dates

Les sélecteurs de date peuvent présenter différents niveaux de complexité. Voici comment gérer à la fois 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 date basés sur un 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 des formulaires dynamiques

Les formulaires dynamiques impliquent souvent des défis tels que les délais de chargement, les champs conditionnels et la validation en temps réel. Voici comment les gérer :

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 attentive :

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

Simulation des interactions utilisateur

En allant au-delà de l’automatisation de la saisie, la simulation d’interactions utilisateur complètes améliore la gestion des tâches d’envoi de formulaires. Puppeteer fournit des outils pour des actions précises de souris et de navigation, ce qui le rend idéal pour gérer des workflows de formulaires complexes.

Actions de souris et de défilement

Voici comment 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 le défilement infini, suivez la hauteur de la page et chargez le contenu dynamiquement :

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, notamment lors de la gestion de formulaires en plusieurs étapes qui exigent une navigation fluide.

Navigation dans les formulaires en plusieurs étapes

Lors de l’automatisation de formulaires en plusieurs étapes, il est essentiel de gérer des comportements semblables à ceux des utilisateurs. Pour le développement, configurez le navigateur afin d’afficher son interface et de ralentir les opérations pour 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 des utilisateurs :

Pour la production, passez au mode headless (headless: true) afin d’améliorer les performances. L’exemple d’automatisation SauceDemo illustre la validation des saisies en ciblant le sélecteur .error-message-container [1].

Pour gérer les boîtes de dialogue modales ou les pop-ups, répondez selon 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 des flux d’automatisation à la fois efficaces et réalistes.

Bonnes pratiques pour l’automatisation des formulaires

Cette section approfondit les bases de l’automatisation des formulaires, en mettant l’accent sur la gestion des erreurs et l’amélioration des performances afin d’assurer le bon fonctionnement de vos workflows.

Gestion des erreurs

Utilisez des blocs try-catch pour détecter et gérer les erreurs efficacement :

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 recherchant les messages d’erreur et en confirmant les envois réussis :

// 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 afin d’empêcher votre script de rester bloqué 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 :

Par exemple, DataScrape Solutions a appliqué ces stratégies et réduit le temps de traitement de 50 000 envois de formulaires de 7 500 minutes à 5 833 minutes, soit une amélioration de 22 % [6].

Voici un exemple de configuration pour la 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 headless peut également accélérer considérablement l’opération : des tests qui prenaient 5 secondes ont été terminés en seulement 3 secondes, soit une amélioration de 40 % [7].

« 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 [5]

Enfin, pour les formulaires dynamiques, utilisez des stratégies d’attente intelligentes afin de 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 en réduisant considérablement le travail manuel [3]. Voici comment intégrer Puppeteer à vos workflows :

Ces méthodes peuvent vous aider à passer d’une automatisation de base à une configuration Puppeteer entièrement intégrée.

« Puppeteer est bien plus qu’un simple outil : c’est une porte d’entrée vers l’efficacité opérationnelle. En automatisant les tâches répétitives, en rationalisant les workflows et en collectant des données en temps réel, les entreprises peuvent garder une longueur d’avance dans le paysage concurrentiel actuel. » [3]

Pour tirer parti des avantages décrits ci-dessus, explorez ces options d’intégration :

• Solutions low-code : Latenode rend l’automatisation serverless avec Puppeteer accessible sans aucun codage. Par exemple, vous pouvez concevoir des workflows pour enregistrer des captures d’URL au format PDF et les charger automatiquement dans des buckets AWS S3 [8].
• Fonctionnalités avancées : utilisez les plugins Puppeteer Extra pour des tâches telles que la navigation anonyme [2]. Pour les défis CAPTCHA, des services comme 2Captcha peuvent contribuer à assurer une automatisation fluide [1].
• Intégration d’entreprise : des organisations telles que TaskUs ont intégré Puppeteer avec succès à leurs opérations. Comme l’explique Manish Pandya, SVP of Digital chez TaskUs :

« TaskUs exploite PixieBrix pour offrir à nos clients la flexibilité nécessaire afin d’améliorer facilement les expériences utilisateur et les workflows. C’est un élément clé pour concrétiser notre vision. » [9]

Pour une automatisation fiable des formulaires, concentrez-vous sur une gestion robuste des erreurs, des stratégies d’attente intelligentes et un suivi régulier.