Utiliser puppeteer-humanize pour le Web Scraping : 2025 Guide

Dans cet article, vous apprendrez :

• Pourquoi le marionnettiste vanille n’est pas suffisant contre l’analyse du comportement des utilisateurs.
• Ce qu’est l’humanisation des marionnettistes et comment elle permet de surmonter ces limites.
• Comment l’utiliser pour le web scraping dans une section de tutoriel étape par étape.
• Les défis qui subsistent dans cette approche du scraping de données web.

Plongeons dans l’aventure !

Analyse du comportement des utilisateurs : Pourquoi le marionnettiste standard n’est pas à la hauteur

L’analyse du comportement des utilisateurs (UBA) est le processus de collecte et d’analyse des données sur la manière dont les utilisateurs interagissent avec une page web. Dans le cadre du web scraping, l’objectif principal est de repérer les comportements anormaux ou suspects afin d’identifier les robots.

Cette technique sophistiquée de lutte contre les robots gagne en popularité. En effet, les robots modernes alimentés par l’IA évoluent en permanence pour devenir plus proches de l’homme. Les méthodes traditionnelles de détection des bots risquent donc de ne plus être efficaces contre eux.

Pour contrer l’UBA, certaines bibliothèques d’automatisation tentent d’imiter le comportement humain de manière plus réaliste. Par exemple, elles simulent les mouvements de la souris en utilisant des heuristiques ou même l’apprentissage automatique. Cependant, la frappe a toujours tendance à paraître robotique dans la plupart des cas, ce qui est un problème.

Supposons maintenant que votre script de marionnettiste doive remplir un formulaire. Même si vous ajoutez un petit délai entre les frappes à l’aide de la fonction type(), cette interaction ne semble pas naturelle.

Prenons l’exemple du formulaire de connexion de Quotes to Scrape:

import puppeteer from "puppeteer";

(async () => {
  // set up a new browser instance in headful mode
  const browser = await puppeteer.launch({
    headless: false, // set to false so you can watch the interaction
    defaultViewport: null,
  });
  const page = await browser.newPage();

  // connect to the target page
  await page.goto("https://quotes.toscrape.com/login");

  // simulate typing with a delay of 200ms between each character
  await page.type("input[name=\"username\"]", "username", { delay: 200 });
  await page.type("input[name=\"password\"]", "password", { delay: 200 });

  // ...

  // close the browser and release its resources
  await browser.close();
})();

Voici à quoi ressemblerait l’interaction :

Même si l’approche ci-dessus est plus réaliste que la simple définition directe de la valeur des champs de saisie, elle n’a toujours pas l’air humaine. Le problème est que la saisie semble trop fluide, cohérente et sans erreur. Posez-vous la question suivante : quel utilisateur réel tape chaque caractère exactement à la même cadence, sans hésitation ni faute de frappe ?

Comme vous pouvez l’imaginer, les systèmes UBA avancés peuvent facilement repérer de tels scripts. C’est là que des outils comme puppeteer-humanize entrent en jeu !

Qu’est-ce que l’humanisation des marionnettes?

puppeteer-humanize est une bibliothèque Node.js qui rend l’automatisation de Puppeteer plus humaine, en particulier lors de l’interaction avec les champs de saisie de texte. Elle permet de contourner les méthodes courantes de détection des robots qui analysent le comportement des utilisateurs et qui signalent souvent des actions irréalistes ou trop précises.

Pour ce faire, puppeteer-humanize injecte des imperfections réalistes dans les interactions régulières du Puppeteer :

1. Simulation d’erreurs typographiques.
2. L’imitation de l’utilisation de la touche d’effacement arrière pour corriger ces erreurs.
3. Recopier un texte supprimé avec des délais aléatoires.
4. Introduire des délais aléatoires entre les frappes pour faire varier la vitesse de frappe.

La saisie automatisée semble ainsi plus naturelle et moins mécanique. Cependant, il est important de noter que la bibliothèque se concentre uniquement sur l’humanisation du comportement de frappe et des entrées de formulaire. Il ne s’agit donc pas d’une solution complète de contournement des robots.

N’oubliez pas non plus que son dernier commit date de 2021 et qu’il ne prend pas encore en charge des fonctionnalités avancées telles que la simulation du mouvement de la souris basée sur le GAN. Par conséquent, son champ d’application reste limité au comportement de frappe.

Comment utiliser puppeteer-humanize pour le Web Scraping ?

Suivez les étapes ci-dessous pour apprendre à utiliser puppeteer-humanize afin de construire un bot de scraping plus humain. Cela réduit les chances d’être détecté par les systèmes UBA, en particulier lorsque votre script doit saisir des données dans des formulaires.

La cible sera le formulaire de connexion à Quotes to Scrape:

Cet exemple servira uniquement à démontrer comment simuler un remplissage de formulaire réaliste. Dans les scénarios de scraping du monde réel, évitez de récupérer le contenu des formulaires de connexion sans autorisation explicite, car cela peut poser des problèmes d’ordre juridique.

Voyons maintenant comment utiliser puppeteer-humanize pour le web scraping !

Étape 1 : Configuration du projet

Si vous n’avez pas encore de projet Node.js, vous pouvez en créer un dans votre dossier de projet avec npm init:

npm init -y

La commande ci-dessus génère un fichier package.json dans le répertoire de votre projet. Dans le dossier du projet, créez un fichier script.js, dans lequel vous placerez votre logique de scraping JavaScript:

your-project-folder/
├── package.json
└── script.js

Ensuite, ouvrez le dossier dans votre IDE JavaScript préféré. Visual Studio Code fonctionnera parfaitement.

Dans votre IDE, modifiez le fichier package.json pour inclure la ligne suivante :

"type": "module"

Cela permet à votre projet d’utiliser ESM(ECMAScript Modules), qui est généralement recommandé pour les projets Node.js modernes plutôt que le format standard CommonJS.

C’est très bien ! Vous êtes maintenant prêt à tirer parti de puppeteer-humanize pour simuler des interactions réalistes dans vos scripts de scraping.

Étape 2 : Installation et démarrage de puppeteer-humanize

Alors que puppeteer-humanize était à l’origine un plugin pour Puppeteer Extra, ce n’est plus le cas. Pour l’utiliser, il suffit donc de l’installer :

• @forad/puppeteer-humanize: La bibliothèque qui simule les comportements humains.
• marionnettiste: La bibliothèque principale d’automatisation des navigateurs.

Installez-les tous les deux à l’aide de la commande suivante :

npm install @forad/puppeteer-humanize puppeteer

Ensuite, ouvrez votre fichier script.js et initialisez un script Puppeteer de base comme ceci :

import puppeteer from "puppeteer";

(async () => {
  // set up a new browser instance in headful mode
  const browser = await puppeteer.launch({
    headless: false, // set to false so you can watch the interaction
    defaultViewport: null,
  });
  const page = await browser.newPage();

  // ...

  // close the browser and release its resources
  await browser.close();
})();

Fantastique ! Vous pouvez maintenant commencer à mettre en œuvre vos interactions de scraping d’apparence humaine.

Étape 3 : Connexion à la page cible et sélection des éléments d’entrée

Utilisez Puppeteer pour naviguer jusqu’à la page cible :

await page.goto("https://quotes.toscrape.com/login");

Ouvrez maintenant la même page dans votre navigateur, faites un clic droit sur le formulaire de connexion et sélectionnez “Inspecter” pour examiner les éléments du formulaire :

Vous remarquerez que le formulaire contient

• Un champ de saisie du nom d’utilisateur que vous pouvez sélectionner avec input[name="username"].
• Un champ de saisie du mot de passe que vous pouvez sélectionner avec input[name="password"]

Pour sélectionner ces éléments d’entrée dans votre script, utilisez la méthode $() de Puppeteer:

const usernameInput = await page.$("input[name=\"username\"]");
const passwordInput = await page.$("input[name=\"password\"]");

⚠️ Important: puppeteer-humanize ne fonctionne pas avec les localisateurs. Cela signifie que vous devez utiliser $() ou $$() pour récupérer directement les poignées des éléments.

Si les deux entrées se trouvent sur la page, préparez-vous à interagir avec elles comme le ferait un utilisateur réel :

if (usernameInput && passwordInput) {
  // interaction...
}

Merveilleux ! Il est temps de remplir ces données comme si vous étiez un véritable utilisateur.

Étape 4 : Configurer la fonction de frappe "marionnettiste-humaniser

Tout d’abord, importez la fonction typeInto de puppeteer-humanize:

import { typeInto } from "@forad/puppeteer-humanize";

Ensuite, utilisez-le pour configurer une interaction de remplissage de formulaire semblable à celle d’un humain, comme illustré ci-dessous :

const typingConfig = {
  mistakes: {
    chance: 10, // 10% chance of introducing a typo that gets corrected
    delay: {
      min: 100, // minimum delay before correcting a mistake (in ms)
      max: 500, // maximum delay before correcting a mistake (in ms)
    },
  },
  delays: {
    all: {
      chance: 100, // 100% chance to add delay between each keystroke
      min: 100, // minimum delay between characters (in ms)
      max: 200, // maximum delay between characters (in ms)
    },
  },
};

// strings to fill into the input elements
const username = "username";
const password = "password";

// apply the human-like typing logic to both inputs
await typeInto(usernameInput, username, typingConfig);
await typeInto(passwordInput, password, typingConfig);

La configuration de saisie ci-dessus :

• Introduit occasionnellement des fautes de frappe, suivies de corrections réalistes – comme le ferait un véritable utilisateur.
• Ajoute des délais aléatoires entre chaque frappe, imitant ainsi les variations naturelles de la vitesse de frappe.

Ce comportement donne à votre automatisation une apparence beaucoup plus humaine, ce qui limite les chances de détection par les technologies UBA.

Génial ! Votre script Marionnettiste devrait maintenant se comporter beaucoup plus comme un véritable humain.

Étape 5 : Remplir le formulaire et se préparer au Web Scraping

Vous pouvez maintenant remplir le formulaire en utilisant le code ci-dessous :

const submitButton = page.locator("input[type=\"submit\"]");
await submitButton.click();

Gardez à l’esprit que le formulaire de connexion de Quotes to Scrape n’est qu’une page de test. En détail, vous pouvez y accéder avec votre nom d'utilisateur et votre mot de passe. Une fois que vous aurez soumis le formulaire, vous serez redirigé vers une page contenant les données que vous souhaitez récupérer :

À ce stade, vous pouvez utiliser l’API Puppeteer habituelle pour mettre en œuvre la logique d’extraction proprement dite :

// wait for the page to load
await page.waitForNavigation();

// scraping logic...

Cet article se concentre sur le marionnettiste et l'humanisation. Nous ne couvrirons donc pas la partie scraping ici.
Si vous souhaitez récupérer des données de Quotes to Scrape et les exporter au format CSV, lisez notre tutoriel complet sur le web scraping avec Puppeteer.

Étape n° 6 : Assembler le tout

Votre script.js doit maintenant contenir :

import puppeteer from "puppeteer";
import { typeInto } from "@forad/puppeteer-humanize";

(async () => {
  // set up a new browser instance in headful mode
  const browser = await puppeteer.launch({
    headless: false, // set to false so you can watch the interaction
    defaultViewport: null,
  });
  const page = await browser.newPage();

  // visit the target page
  await page.goto("https://quotes.toscrape.com/login");

  // select the login form inputs
  const usernameInput = await page.$("input[name=\"username\"]");
  const passwordInput = await page.$("input[name=\"password\"]");

  // if they are not both null, interact with them
  if (usernameInput && passwordInput) {
    // configure the typing behavior
    const typingConfig = {
      mistakes: {
        chance: 10, // 10% chance of introducing a typo that gets corrected
        delay: {
          min: 100, // minimum delay before correcting a mistake (in ms)
          max: 500, // maximum delay before correcting a mistake (in ms)
        },
      },
      delays: {
        all: {
          chance: 100, // 100% chance to add delay between each keystroke
          min: 100, // minimum delay between characters (in ms)
          max: 200, // maximum delay between characters (in ms)
        },
      },
    };

    // test strings to fill into the input elements
    const username = "username";
    const password = "password";

    // apply the human-like typing logic to both inputs
    await typeInto(usernameInput, username, typingConfig);
    await typeInto(passwordInput, password, typingConfig);

    // submit the form
    const submitButton = page.locator("input[type=\"submit\"]");
    await submitButton.click();

    // wait for the page to load
    await page.waitForNavigation();

    // scraping logic...
  }

  // close the browser and release its resources
  await browser.close();
})();

Lancez le script de scraping puppeteer-humanize ci-dessus avec :

node script.js

Le résultat sera le suivant :

Comme vous pouvez le constater, le robot Puppeteer interagit désormais avec le formulaire de connexion de manière beaucoup plus naturelle, comme le ferait un véritable utilisateur humain. Il tape à une vitesse réaliste, fait parfois des fautes de frappe et les corrige. C’est là toute la puissance de Puppeteer - humaniser!

Défis de cette approche du Web Scraping

puppeteer-humanize est sans aucun doute un allié de taille pour réduire les chances d’être détecté par les technologies qui analysent la façon dont les utilisateurs interagissent. Cependant, les techniques anti-scraping et anti-bot vont bien au-delà du simple comportement de l’utilisateur !

Tout d’abord, n’oubliez pas que Puppeteer doit instrumenter le navigateur pour le contrôler de manière programmatique. Cela introduit des changements subtils et des signes qui peuvent révéler que le navigateur est automatisé. Pour réduire ces fuites, vous devriez également envisager d’utiliser Puppeteer Stealth.

Même si les fonctions puppeteer-humanize et Puppeteer Stealth sont en place, il se peut que vous rencontriez encore des CAPTCHA au cours de vos interactions. Dans ce cas, consultez notre article sur le contournement des CAPTCHA avec Playwright.

Si ces outils et guides peuvent vous aider à mettre en place une configuration de scraping plus résistante, la plupart des solutions de contournement sur lesquelles ils s’appuient ne sont pas éternelles. Si vous avez affaire à des sites qui utilisent des solutions anti-bots très sophistiquées, vos chances de succès diminuent considérablement. De plus, l’ajout de plusieurs plugins peut alourdir votre installation en termes d’utilisation de la mémoire et du disque, et la rendre plus difficile à faire évoluer.

À ce stade, le problème n’est pas seulement Puppeteer lui-même, mais plutôt les limites du navigateur qu’il contrôle. La véritable avancée réside dans l’intégration de Puppeteer à un navigateur basé sur le cloud, spécialement conçu pour le web scraping. Cette solution comprend une prise en charge intégrée des proxys rotatifs, une résolution avancée des CAPTCHA, des empreintes digitales réalistes du navigateur, et bien d’autres choses encore. C’est exactement ce que propose l’API de navigateur de Bright Data!

Conclusion

Dans ce tutoriel, vous avez appris pourquoi vanilla Puppeteer n’est pas à la hauteur de l’analyse du comportement des utilisateurs et comment y remédier avec puppeteer-humanize. En particulier, vous avez vu comment intégrer cette approche dans un workflow de web scraping à travers un tutoriel étape par étape.

Bien que cette méthode puisse vous aider à contourner des systèmes anti-bots simples, elle ne garantit pas un taux de réussite élevé. C’est particulièrement vrai pour les sites de scraping qui utilisent des CAPTCHA, des bannissements d’adresses IP ou des techniques modernes de lutte contre les robots. De plus, la mise à l’échelle de cette configuration peut s’avérer complexe.

Si votre objectif est de faire en sorte que votre script de scraping – ou même un agent d’IA – se comporte davantage comme un véritable utilisateur, vous devriez envisager d’utiliser un navigateur spécialement conçu pour ce cas d’utilisation : Agent Browser de Bright Data.

Créez un compte Bright Data gratuit pour accéder à l’ensemble de notre infrastructure de scraping prête pour l’IA !