Comment récupérer les données d'une page avec un défilement infini

Avez-vous déjà rencontré une page Web nécessitant des actions telles que « cliquer sur un bouton » pour révéler plus de contenu ? Ces pages sont appelées « pages Web dynamiques », car elles chargent davantage de contenu en fonction de l'interaction de l'utilisateur. En revanche, les pages Web statiques affichent tout leur contenu en même temps sans nécessiter d'action de l'utilisateur.

Récupérer du contenu à partir de pages dynamiques peut être intimidant car cela nécessite de simuler les interactions de l'utilisateur, comme cliquer sur un bouton pour accéder à du contenu caché supplémentaire. Dans ce didacticiel, vous apprendrez à récupérer les données d'une page Web avec un défilement infini via un bouton "Charger plus".

Conditions préalables

Pour suivre ce tutoriel, il vous faut :

• Node.js : Installez la version étiquetée "LTS" (Long Time Support), qui est plus stable que la dernière version.
• Npm : Il s'agit d'un gestionnaire de packages utilisé pour installer des packages. La bonne nouvelle est que « npm » est automatiquement installé avec Node.js, ce qui rend les choses beaucoup plus rapides.
• Cheerio : Pour analyser le HTML
• Marionnettiste : vous l'utiliserez pour contrôler un navigateur sans tête.
• Un IDE pour créer le Scraper : vous pouvez obtenir n'importe quel éditeur de code, comme Visual Studio Code.

De plus, vous devrez avoir une compréhension de base du HTML, du CSS et du JavaScript. Vous aurez également besoin d'un navigateur Web comme Chrome.

Initialiser le projet

Créez un nouveau dossier, puis ouvrez-le dans votre éditeur de code. Repérez l'onglet « terminal » dans votre éditeur de code et ouvrez un nouveau terminal. Voici comment le repérer à l’aide de Visual Studio Code.

Ensuite, exécutez la commande suivante dans le terminal pour installer les packages nécessaires à cette version.

$ npm install cheerio puppeteer

Créez un nouveau fichier dans le dossier de votre projet dans l'éditeur de code et nommez-le DynamicScraper.js.

Excellent travail, mon pote !

Accéder au contenu de la page

Puppeteer est une puissante bibliothèque Node.js qui vous permet de contrôler les navigateurs Chrome sans tête, ce qui la rend idéale pour interagir avec les pages Web. Avec Puppeteer, vous pouvez cibler une page Web à l'aide de l'URL, accéder au contenu et extraire facilement des données de cette page.

Dans cette section, vous apprendrez comment ouvrir une page à l'aide d'un navigateur sans tête, accéder au contenu et récupérer le contenu HTML de cette page. Vous pouvez trouver le site Web cible de ce tutoriel ici.

Remarque : Vous devez écrire tout le code à l'intérieur de DynamicScraper.js.

Commencez par importer Puppeteer à l'aide de la fonction intégrée require() Node.js, qui vous aide à charger des modules : modules de base, bibliothèques tierces (comme Puppeteer) ou modules personnalisés (comme vos fichiers JS locaux).

$ npm install cheerio puppeteer

Ensuite, définissez une variable pour stocker votre URL cible. Faire cela n'est pas obligatoire, mais cela rend votre code plus propre, car il vous suffit de référencer cette variable globale depuis n'importe où dans votre code.

const puppeteer = require('puppeteer');

L'étape suivante consiste à créer la fonction qui lancera le navigateur sans tête et récupérera le contenu HTML de la page cible. Vous devriez opter pour la méthode d'expression de fonction immédiatement invoquée (IIFE) pour rendre les choses beaucoup plus rapides.

Définissez un IIFE asynchrone avec un bloc try-and-catch :

const url = 'https://www.scrapingcourse.com/button-click';

Remarque : Vous devez écrire tous les autres codes pour ce segment de didacticiel dans le bloc try.

Directement dans l'IIFE, créez une nouvelle instance de Puppeteer et ouvrez une nouvelle page pour l'interaction.

Lancez une nouvelle instance de la bibliothèque Marionnettiste en utilisant la méthode de lancement et passez-lui le mode sans tête. Le mode sans tête peut être défini sur vrai ou faux. Définir le mode sans tête sur true rend le navigateur sans tête invisible au lancement du marionnettiste, mais le définir sur false rend le navigateur visible.

Après avoir lancé Puppeteer, vous souhaitez également appeler la méthode newPage, qui déclenche l'ouverture d'un nouvel onglet dans le navigateur sans tête.

(async () => {
    try {
        // Code goes here
    } catch (error) {
        console.error('Error:', error.message);
    }
})();

Maintenant, interrogez la méthode newPage pour cibler l'URL attendue et ouvrez ce site Web dans ce nouvel onglet à l'aide de la méthode page.goto. Au-delà de cela, vous voulez vous assurer que Puppeteer ne considère la page prête pour l'interaction et l'extraction de données que si et seulement si la page a chargé toutes ses ressources essentielles (comme les images et JS).

Pour garantir que la page est prête, Puppeteer propose une option appelée waitUntil, qui peut prendre différentes valeurs définissant différentes conditions de chargement de la page :

• load : Ceci attend que l'événement de chargement se déclenche, qui se produit après le chargement du document HTML et de ses ressources (par exemple, images, CSS, JS). Toutefois, cela peut ne pas tenir compte du contenu supplémentaire rendu en JavaScript qui se charge après l'événement de chargement.

• domcontentloaded : Ceci attend l'événement DOMContentLoaded, qui est déclenché une fois le code HTML initial analysé. Mais cela se charge avant le chargement des ressources externes (comme des images ou du JS supplémentaire).

• networkidle2 : ceci attend qu'il n'y ait pas plus de deux requêtes réseau actives (requêtes HTTP en cours (par exemple, chargement d'images, de scripts ou d'autres ressources)) pendant 500 millisecondes. Cette valeur est préférable lorsqu'il s'agit de pages qui effectuent de petites requêtes continues mais n'affectent pas le contenu principal.
  

// Launch Puppeteer
const browser = await puppeteer.launch({ headless: false }); // Headless mode
const page = await browser.newPage(); // Open a new page

Enfin, il vous suffit de récupérer tout le contenu HTML de la page courante à l'aide de la fonction page.content(). Plus important encore, vous devez fermer l'instance du navigateur pour éviter une utilisation inutile de la mémoire, ce qui peut ralentir votre système. Utilisez browser.close() à la fin de votre script pour fermer le navigateur.

$ npm install cheerio puppeteer

Avec le code actuel dont vous disposez, le navigateur se chargera et se fermera très rapidement, et vous ne pourrez peut-être même pas bien visualiser la page. Dans ce cas, vous pouvez retarder le navigateur de quelques secondes à l'aide de la méthode page.waitForTimeout. Cette méthode devrait venir juste avant la méthode browser.close.

const puppeteer = require('puppeteer');

Voici le code complet de cette section :

const url = 'https://www.scrapingcourse.com/button-click';

Enregistrez votre fichier et exécutez le script dans votre terminal à l'aide de la commande ci-dessous :

(async () => {
    try {
        // Code goes here
    } catch (error) {
        console.error('Error:', error.message);
    }
})();

Le script ouvrira un navigateur sans interface graphique comme celui ci-dessous :

Le navigateur se charge, Puppeteer récupère l'intégralité de son contenu HTML et la console enregistre le contenu sur le terminal.

Voici le résultat que vous devriez obtenir dans votre terminal :

// Launch Puppeteer
const browser = await puppeteer.launch({ headless: false }); // Headless mode
const page = await browser.newPage(); // Open a new page

Ensuite, vous souhaitez faire une boucle pour simuler les clics. La simulation utilisera une boucle for qui s'exécute un certain nombre de fois, où i sera la variable de clics.

// Navigate to the target URL
await page.goto(url, {
    waitUntil: 'networkidle2', // Ensure the page is fully loaded
});

Remarque : Votre code restant pour cette section doit être écrit à l'intérieur du bloc try dans la boucle for.

Pour faciliter le débogage et le suivi de la sortie, déconnectez-vous de la tentative de clic en cours.

// Get the full HTML content of the page
const html = await page.content();

// Log the entire HTML content
console.log(html);

// Close the browser
await browser.close();

Ensuite, vous voulez pouvoir localiser le bouton « Charger plus » et cliquer dessus au moins trois fois. Mais avant de simuler le clic, vous devez vous assurer que le bouton « Charger plus » est disponible.

Puppeteer fournit la méthode waitForSelector() pour vérifier la visibilité d'un élément avant de l'utiliser.

Pour le bouton « Charger plus », vous devrez d'abord le localiser à l'aide de la valeur du sélecteur d'identifiant situé dessus, puis vérifier l'état de visibilité comme ceci :

// Delay for 10 seconds to allow you to see the browser
await page.waitForTimeout(10000);

Maintenant que vous savez que le bouton « Charger plus » est disponible, vous pouvez cliquer dessus en utilisant la méthode click() de Puppeteer.

const puppeteer = require('puppeteer');

const url = 'https://www.scrapingcourse.com/button-click';

(async () => {
    try {
        // Launch Puppeteer
        const browser = await puppeteer.launch({ headless: false }); // Headless mode
        const page = await browser.newPage(); // Open a new page

        // Navigate to the target URL
        await page.goto(url, {
            waitUntil: 'networkidle2', // Ensure the page is fully loaded
        });

        // Get the entire HTML content of the page
        const html = await page.content();

        // Log the entire HTML content
        console.log(html);

        // Delay for 10 seconds to allow you to see the browser
        await page.waitForTimeout(10000);

        // Close the browser
        await browser.close();
    } catch (error) {
        console.error('Error fetching the page:', error.message);
    }
})();

Une fois que vous simulez un clic sur le bouton « Charger plus », vous devez attendre que le contenu se charge avant de simuler un autre clic car les données peuvent dépendre d'une requête du serveur. Vous devez introduire un délai entre les requêtes en utilisant setTimeout().

Le code ci-dessous indique au script d'attendre au moins deux secondes avant de simuler un autre clic sur le bouton « Charger plus ».

$ node dynamicScraper.js

Pour conclure cette section, vous souhaitez récupérer le contenu HTML actuel après chaque clic à l'aide de la méthode content(), puis déconnecter la sortie sur le terminal.

    <title>Load More Button Challenge - ScrapingCourse.com</title>


    <header>
        <!-- Navigation Bar -->
        <nav>
            <a href="/">
                <img src="/static/imghwm/default1.png" data-src="logo.svg" class="lazy" alt="Comment récupérer les données dune page avec un défilement infini">
                <span>Scraping Course</span>
            </a>
        </nav>
    </header>

    <main>
        <!-- Product Grid -->
        <div>



<p>Note that the code structure above is what your output should look like.</p>

<p>Wow! You should be proud of yourself for getting this far. You’ve just completed your first attempt at scraping the contents of a webpage. </p>

<h2>
  
  
  Simulate the LOad More Products Process
</h2>

<p>Here, you want to access more products, and to do that, you need to click on the “Load more” button multiple times until you’ve either exhausted the list of all products or gotten the desired number of products you want to access. </p>

<p>To access this button and click on it, you must first locate the element using any CSS selectors (the class, id, attribute of the element, or tag name). </p>

<p>This tutorial aims to get at least 48 products from the target website, and to do that, you’ll have to click on the “Load more” button at least three times.</p>

<p>Start by locating the “Load more” button using any of the CSS selectors on it. Go to the target website, find the “Load more” button, right-click, and select the inspect option. </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587927350910.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Scrape Data from a Page with Infinite Scroll"></p>

<p>Selecting the inspect option will open up developer tools just like the page below:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173587927639663.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to Scrape Data from a Page with Infinite Scroll"></p>

<p>The screenshot above shows that the “Load more” button element has an id attribute with the value "load-more-btn". You can use this id selector to locate the button during the simulation and click on it multiple times.</p>

<p>Back to the code, still inside the try block, after the line of code that logs out the previous HTML content for the default 12 products on the page.</p>

<p>Define the number of times you want to click the button. Recall that each click loads an additional 12 products. For 48 products, three clicks are required to load the remaining 36.<br>
</p>

<pre class="brush:php;toolbar:false">// Number of times to click "Load More"
const clicks = 3;

Votre code complet jusqu'à présent :

for (let i = 0; i 



<p>Voici le résultat de la simulation du clic sur le bouton trois fois pour obtenir 48 produits :<br>
</p>

<pre class="brush:php;toolbar:false">console.log(`Clicking the 'Load More' button - Attempt ${i + 1}`);

Maintenant, vous ne devriez vous soucier que d'interagir avec la sortie des 48 produits. Pour ce faire, vous devez nettoyer le code précédent dans la dernière section.

Vous devrez également supprimer la variable html après le bloc de boucle for afin d'obtenir une seule sortie avec les 48 produits.

Votre code de nettoyage doit être identique à cet extrait de code :

$ npm install cheerio puppeteer

Maintenant, passons à l'analyse HTML à l'aide de Cheerio.

Tout d'abord, Cheerio doit avoir accès au contenu HTML qu'il souhaite analyser, et pour cela, il fournit une méthode load() qui prend en compte ce contenu HTML, le rendant accessible à l'aide d'une syntaxe de type jQuery.

Créez une instance de la bibliothèque Cheerio avec le contenu HTML :

const puppeteer = require('puppeteer');

Vous pouvez désormais utiliser $ pour interroger et manipuler des éléments dans le code HTML chargé.

Ensuite, initialisez un tableau pour stocker les informations sur le produit. Ce tableau contiendra les données extraites et chaque produit sera stocké sous forme d'objet avec son nom, son prix, son image et son lien.

const url = 'https://www.scrapingcourse.com/button-click';

Rappelons que chaque produit a une classe .product-item. Vous l'utiliserez avec l'instance variable de Cheerio ($) pour obtenir chaque produit, puis effectuerez quelques manipulations.

La méthode .each() est utilisée pour parcourir chaque élément correspondant avec le sélecteur de classe .product-item.

(async () => {
    try {
        // Code goes here
    } catch (error) {
        console.error('Error:', error.message);
    }
})();

Récupérons les détails du produit de chaque produit en utilisant le sélecteur de classe de ce détail particulier. Par exemple, pour obtenir le nom du produit, vous devrez rechercher l'élément enfant dans chaque produit avec le sélecteur de classe .product-item. Récupérez le contenu textuel de cet élément enfant et coupez-le en cas d'espaces.

// Launch Puppeteer
const browser = await puppeteer.launch({ headless: false }); // Headless mode
const page = await browser.newPage(); // Open a new page

• $(element).find('.product-name') : recherche dans le .product-item actuel l'élément enfant avec la classe .product-name.
• .text() : Récupère le contenu du texte à l'intérieur de l'élément.
• .trim() : supprime les espaces inutiles du texte.

En tirant parti de ce concept, obtenons le prix, l'URL de l'image et le lien en utilisant leur attribut de classe.

// Navigate to the target URL
await page.goto(url, {
    waitUntil: 'networkidle2', // Ensure the page is fully loaded
});

Maintenant que vous disposez de toutes les informations attendues, la prochaine étape consiste à transmettre chaque information de produit analysée en tant qu'objet individuel vers le tableau de produits.

// Get the full HTML content of the page
const html = await page.content();

// Log the entire HTML content
console.log(html);

// Close the browser
await browser.close();

Enfin, déconnectez-vous du tableau products pour obtenir le résultat attendu dans le terminal.

// Delay for 10 seconds to allow you to see the browser
await page.waitForTimeout(10000);

L'intégralité de votre code devrait ressembler à cet extrait de code :

const puppeteer = require('puppeteer');

const url = 'https://www.scrapingcourse.com/button-click';

(async () => {
    try {
        // Launch Puppeteer
        const browser = await puppeteer.launch({ headless: false }); // Headless mode
        const page = await browser.newPage(); // Open a new page

        // Navigate to the target URL
        await page.goto(url, {
            waitUntil: 'networkidle2', // Ensure the page is fully loaded
        });

        // Get the entire HTML content of the page
        const html = await page.content();

        // Log the entire HTML content
        console.log(html);

        // Delay for 10 seconds to allow you to see the browser
        await page.waitForTimeout(10000);

        // Close the browser
        await browser.close();
    } catch (error) {
        console.error('Error fetching the page:', error.message);
    }
})();

Voici à quoi devrait ressembler votre résultat lorsque vous enregistrez et exécutez le script :

$ node dynamicScraper.js

Exporter les informations sur le produit au format CSV

L'étape suivante consiste à exporter les informations sur le produit analysées, qui sont actuellement au format JavaScript Object Notation (Json), au format CSV (Comma-Separated Values). Nous utiliserons la bibliothèque json2csv pour convertir les données analysées dans leur format CSV correspondant.

Commencez par importer les modules requis.

Node.js fournit le module de système de fichiers (fs) pour la gestion des fichiers, comme l'écriture de données dans un fichier. Après avoir importé le module fs, vous devez déstructurer la méthode parse() de la bibliothèque json2csv.

$ npm install cheerio puppeteer

Les fichiers CSV nécessitent généralement des en-têtes de colonne ; écrivez-le soigneusement dans le même ordre que vos informations analysées. Ici, les données analysées sont le tableau de produits, où chaque élément est un objet avec quatre clés (nom, prix, image et lien). Vous devez utiliser ces clés d'objet pour nommer vos en-têtes de colonnes afin d'obtenir un mappage approprié.

Définissez les champs (en-têtes de colonnes) pour votre fichier CSV :

const puppeteer = require('puppeteer');

Maintenant que vous avez défini vos champs, la ligne d'action suivante consiste à convertir les informations actuellement analysées au format CSV. La méthode parse() fonctionne dans ce format : parse(WHAT_YOU_WANT_TO_CONVERT, { YOUR_COLUMN_HEADERS }).

const url = 'https://www.scrapingcourse.com/button-click';

Vous devez maintenant enregistrer ces informations CSV dans un nouveau fichier avec l'extension de fichier .csv. Lorsque vous utilisez Node.js, vous pouvez gérer la création de fichiers à l'aide de la méthode writeFileSync() sur le module fs. Cette méthode prend deux paramètres : le nom du fichier et les données.

(async () => {
    try {
        // Code goes here
    } catch (error) {
        console.error('Error:', error.message);
    }
})();

Votre code complet pour cette section devrait ressembler à ceci :

// Launch Puppeteer
const browser = await puppeteer.launch({ headless: false }); // Headless mode
const page = await browser.newPage(); // Open a new page

Vous devriez voir un ajout automatique d'un fichier nommé products.csv à votre structure de fichiers une fois que vous avez enregistré et exécuté le script.

Le résultat - products.csv :

Conclusion

Ce tutoriel a exploré les subtilités de la récupération des données d'une page qui nécessite une simulation pour accéder à son contenu caché. Vous avez appris à effectuer du web scraping sur des pages dynamiques à l'aide de Node.js et de certaines bibliothèques supplémentaires, à analyser vos données récupérées dans un format plus organisé et à les décompresser dans un fichier CSV.