Comment créer un scraper et soumettre un formulaire avec Puppeteer

Mihnea-Octavian Manolache le 28 février 2023

Avez-vous déjà eu à travailler avec des requêtes POST en faisant du web scraping ? Je suis sûr que oui ! Et ce sont des formulaires que nous devons gérer la plupart du temps. C'est pourquoi aujourd'hui, je vais parler de la façon de soumettre le formulaire avec Puppeteer. Si vous ne savez pas encore ce qu'est Puppeteer, ne vous inquiétez pas. Vous le saurez dans un instant. D'ici là, permettez-moi de définir quelques attentes pour l'article d'aujourd'hui. Si vous me suivez sur le chemin de l'apprentissage, vous devriez être en mesure d'apprendre aujourd'hui :

• Qu'est-ce que Puppeteer dans le web scraping ?
• Comment mettre en place un projet Puppeteer simple
• Comment la soumission d'un formulaire est-elle gérée dans Puppeteer ?

Alors, sans plus attendre, allons-y !

Qu'est-ce que Puppeteer et pourquoi est-il important pour le web scraping ?

En général, le web scraping désigne le processus d'automatisation de l'extraction de données à partir de divers serveurs. Autrefois, un simple client HTTP aurait suffi pour effectuer cette tâche. Aujourd'hui, cependant, les sites web reposent de plus en plus sur JavaScript. Or, les clients HTTP traditionnels sont incapables de rendre les fichiers JavaScript. C'est là que Puppeteer entre en jeu.

Puppeteer est une bibliothèque Node.js qui vous permet de contrôler un navigateur Chrome ou Chromium sans tête via le protocole DevTools. En bref, elle fournit une API de haut niveau pour automatiser Chrome.

En termes de scraping web, Puppeteer est utile pour le scraping de sites web qui requièrent l'utilisation de JavaScript. En outre, il peut également être utilisé pour interagir avec des pages web d'une manière similaire à celle d'un humain. Par exemple, cliquer sur des boutons ou, comme nous le faisons aujourd'hui, remplir des formulaires. Il est donc idéal pour le scraping de sites web qui utilisent des techniques anti-scraping.

Mise en place d'un projet Puppeteer simple

Je crois qu'il faut prendre son temps pour mieux comprendre le processus global. Avant de voir comment soumettre le formulaire avec Puppeteer, parlons de Puppeteer simple. Dans cette section, je vais vous montrer comment mettre en place un projet Node, installer Puppeteer, et l'utiliser pour récupérer des données. Tout d'abord, créons un nouveau dossier et ouvrons-le dans l'IDE de notre choix. Je préfère Visual Studio Code mais n'hésitez pas à utiliser ce que vous voulez.

Le saviez-vous ?

• Vous pouvez créer un nouveau dossier de manière "programmatique" depuis votre terminal en tapant la commande `mkdir`.
• Vous pouvez utiliser la commande `npm init -y` pour configurer un projet node et accepter les valeurs par défaut
• Vous pouvez créer un nouveau fichier avec la commande `touch`.
• Vous pouvez également ouvrir VSCode avec la commande `code .`.

Si vous le souhaitez, vous pouvez combiner les quatre et créer un projet en quelques secondes comme celui-ci :

~ " mkdir scraper && cd scraper && npm init -y && code . 

Dans votre IDE, ouvrez un nouveau terminal (Terminal > New Terminal) et installons Puppeteer. Tapez `npm i puppeteer --save` dans votre terminal. Aussi, j'aime utiliser les modules JS au lieu de CommonJS. Voyez les différences entre les deux ici. Si vous voulez aussi utiliser des modules, ouvrez `package. json` et ajoutez `"type" : "module"` à l'objet JSON.

Maintenant que nous sommes prêts, nous pouvons commencer à ajouter du code. Créez un nouveau fichier `index.js` et ouvrez-le dans l'IDE. Il n'est pas nécessaire de le faire depuis le terminal cette fois-ci, mais à titre d'indication, vous pouvez utiliser la commande `touch`. Maintenant, ajoutons le code :

import puppeteer, { executablePath } from 'puppeteer'

const scraper = async (url) => {

   const browser = await puppeteer.launch({

       headless: false,

       executablePath: executablePath(),

   })

   const page = await browser.newPage()

   await page.goto(url)

   const html = await page.content()

   await browser.close()

   return html

}

Et voyons ce que nous faisons :

1. Nous importons Puppeteer et `executablePath` dans notre projet
2. Nous définissons une nouvelle fonction qui prend un paramètre `url`.
3. Nous lançons un nouveau navigateur en utilisant `puppeteer.launch`
   a. Nous spécifions que nous voulons qu'il s'exécute headfull
   b. Nous utilisons `executablePath` pour obtenir le chemin d'accès à Chrome
4. Nous ouvrons une nouvelle page et naviguons vers l'adresse `url`
5. Nous sauvegardons le `page.content()` dans une constante
6. Nous avons fermé l'instance du navigateur
7. Enfin, nous renvoyons la sortie `html` de la page que nous venons de récupérer

Jusqu'à présent, les choses ne sont pas compliquées. C'est le strict minimum d'une implémentation de web scraper avec Node JS et Puppeteer. Si vous voulez exécuter le code, donnez simplement une cible à la fonction `scraper` et enregistrez sa valeur de retour :

console.log(await scraper('https://webscrapingapi.com/'))

Mais n'oubliez pas que notre objectif est d'extraire des données lors de la soumission d'un formulaire. Cela signifie que nous devons trouver un moyen de soumettre le formulaire avec Puppeteer. Heureusement, je l'ai déjà fait et je sais que ce n'est pas difficile. Voyons donc comment vous pouvez le faire vous aussi.

Comment soumettre des formulaires avec Puppeteer

Pensez à Puppeteer comme un moyen d'imiter le comportement humain sur un site web donné. Comment nous, les humains, soumettons-nous des formulaires ? Eh bien, nous identifions le formulaire, nous le remplissons et nous cliquons généralement sur un bouton. C'est la même logique qui est utilisée pour soumettre des formulaires avec Puppeteer. La seule différence réside dans la manière dont nous effectuons ces actions. En effet, les êtres humains s'appuient sur leurs sens. Puisque Puppeteer est un logiciel, nous le ferons par programme, en utilisant les méthodes intégrées de Puppeteer, comme suit :

#1 : Soumettre des formulaires simples avec Puppeteer

Tout d'abord, nous devons "visualiser" notre formulaire. Dans un site web, tous les éléments sont regroupés dans un bloc HTML et chaque élément possède un identifiant. Les identifiants sont généralement constitués des attributs CSS de l'élément. Cependant, il se peut que vous rencontriez des sites web qui n'ont pas de tels sélecteurs. Dans ce cas, vous pouvez utiliser xPaths par exemple. Mais il s'agit là d'un sujet pour un autre exposé. Concentrons-nous sur l'identification des éléments dans Puppeteer à l'aide de CSS.

Pour avoir un peu de contexte, disons que nous voulons automatiser l'action de connexion sur Stack Overflow. La cible est donc https://stackoverflow.com/users/login. Ouvrez votre navigateur, naviguez jusqu'à la page de connexion et ouvrez Developer Tools. Vous pouvez faire un clic droit sur la page et sélectionner "Inspecter". Vous devriez voir quelque chose comme ceci :

Sur le côté gauche, il y a une interface graphique. Sur le côté droit, il y a la structure HTML. Si vous regardez attentivement le côté droit, vous verrez notre formulaire. Il se compose principalement de deux entrées et d'un bouton. Ce sont les trois éléments que nous ciblons. Et comme vous pouvez le voir, les trois éléments ont un `id` comme identifiant CSS. Traduisons en code ce que nous avons appris jusqu'à présent :

import puppeteer, { executablePath } from 'puppeteer'

const scraper = async (target) => {

   const browser = await puppeteer.launch({

       headless: false,

       executablePath: executablePath(),

   })

   const page = await browser.newPage()

   await page.goto(target.url,{waitUntil: 'networkidle0'})

   await page.type(target.username.selector, target.username.value)

   await page.type(target.password.selector, target.password.value)

   await page.click(target.buttonSelector)

   const html = await page.content()

   await browser.close()

   return html

}

Pour qu'elle reste fonctionnelle et réutilisable, j'ai choisi de remplacer le paramètre de ma fonction par un objet. Cet objet est constitué de l'URL ciblée, des sélecteurs et valeurs d'entrée, et du sélecteur pour le bouton de soumission. Ainsi, pour exécuter le code, il suffit de créer un nouvel objet `TARGET` qui contient vos données, et de le passer à votre fonction `scraper` :

const TARGET = {

   url: 'https://stackoverflow.com/users/login',

   username: {

       selector: 'input[id=email]',

       value: '<YOUR_USERNAME>'

   },

   password: {

       selector: 'input[id=password]',

       value: '<YOUR_PASSWORD>'

   },

   buttonSelector: 'button[id=submit-button]'

}

console.log(await scraper(TARGET))

#2 : Télécharger des fichiers avec Puppeteer

Parfois, l'automatisation du Web nous oblige à télécharger des fichiers, plutôt que de soumettre de simples formulaires. Si vous rencontrez une telle tâche et que vous avez besoin d'attacher des fichiers avant de soumettre le formulaire avec Puppeteer, vous voudrez utiliser la méthode `uploadFile` de Puppeteer. Pour simplifier les choses, je vous suggère de créer une nouvelle fonction pour cette action :

const upload = async (target) => {

   const browser = await puppeteer.launch({

       headless: false,

       executablePath: executablePath(),

   })

   const page = await browser.newPage()

   await page.goto(target.url,{waitUntil: 'networkidle0'})

   const upload = await page.$(target.form.file)

   await upload.uploadFile(target.file);

   await page.click(target.form.submit)

  

   await browser.close()

}

Vous voyez que cette fois-ci, j'utilise `page.$` pour identifier l'élément. Et seulement après cela, j'appelle la méthode `uploadFile` qui ne fonctionne que sur les types `ElementHandle`. En ce qui concerne les paramètres, comme précédemment, j'utilise un objet pour passer toutes les données en une seule fois à ma fonction. Si vous voulez tester le script, ajoutez simplement le code suivant et lancez `node index.js` dans votre terminal :

const TARGET = {

   url: 'https://ps.uci.edu/~franklin/doc/file_upload.html',

   form: {

       file: 'input[type=file]',

       submit: 'input[type=submit]'

   } ,

   file: './package.json'

}

upload(TARGET)

Conclusions

En conclusion, je dirais qu'il est assez facile de soumettre le formulaire avec Puppeteer. De plus, je trouve que par rapport à ses alternatives, Puppeteer gère complètement cette action. En fait, tout ce que l'utilisateur a à faire, c'est d'identifier correctement les éléments.

Il convient de noter qu'un scraper du monde réel a besoin de beaucoup plus pour être efficace. La plupart du temps, si vous "abusez" d'un serveur en soumettant trop de formulaires dans un court laps de temps, vous serez probablement bloqué. C'est pourquoi, si vous souhaitez automatiser le processus de soumission des formulaires, je vous recommande de faire appel à un service de scraping professionnel. Chez Web Scraping API, nous offrons la possibilité d'envoyer des requêtes POST et PUT. Vous pouvez en savoir plus dans notre documentation.