Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur

Table des matières

Automatisation des formulaires avec Puppeteer : saisie de texte, remplissage de formulaires et simulation utilisateur

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.

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.

Connectez-le à tous vos modèles d'IA, bases de données, systèmes CRM et autres services pour améliorer, développer et accélérer vos flux de travail. Ne manquez pas l'occasion d'essayer l'automatisation web low-code sur Latenode. Essayez le navigateur sans tête prêt à l'emploi MAINTENANT et ne vous souciez plus jamais de l'installation et de la configuration !

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

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.

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 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 % .

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, 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.