So entfernen Sie Daten von einer Seite mit Infinite Scroll

Sind Sie jemals auf eine Webseite gestoßen, die Aktionen wie „Klicken auf eine Schaltfläche“ erfordert, um mehr Inhalt anzuzeigen? Solche Seiten werden als „dynamische Webseiten“ bezeichnet, da sie je nach Benutzerinteraktion mehr Inhalte laden. Im Gegensatz dazu zeigen statische Webseiten ihren gesamten Inhalt auf einmal an, ohne dass Benutzeraktionen erforderlich sind.

Das Scrapen von Inhalten aus dynamischen Seiten kann entmutigend sein, da es die Simulation von Benutzerinteraktionen erfordert, z. B. das Klicken auf eine Schaltfläche, um auf zusätzliche versteckte Inhalte zuzugreifen. In diesem Tutorial erfahren Sie, wie Sie mit unendlichem Scrollen über die Schaltfläche „Mehr laden“ Daten von einer Webseite extrahieren.

Voraussetzungen

Um diesem Tutorial folgen zu können, benötigen Sie:

• Node.js: Installieren Sie die Version mit dem Tag „LTS“ (Long Time Support), die stabiler ist als die neueste Version.
• Npm: Dies ist ein Paketmanager, der zum Installieren von Paketen verwendet wird. Die gute Nachricht ist, dass „npm“ automatisch mit Node.js installiert wird, was die Dinge viel schneller macht.
• Cheerio: Zum Parsen von HTML
• Puppenspieler: Damit steuern Sie einen Headless-Browser.
• Eine IDE zum Erstellen des Scrapers: Sie können einen beliebigen Code-Editor wie Visual Studio Code erhalten.

Darüber hinaus benötigen Sie grundlegende Kenntnisse in HTML, CSS und JavaScript. Sie benötigen außerdem einen Webbrowser wie Chrome.

Initialisieren Sie das Projekt

Erstellen Sie einen neuen Ordner und öffnen Sie ihn dann in Ihrem Code-Editor. Suchen Sie in Ihrem Code-Editor nach der Registerkarte „Terminal“ und öffnen Sie ein neues Terminal. So können Sie es mit Visual Studio Code erkennen.

Führen Sie als Nächstes den folgenden Befehl im Terminal aus, um die benötigten Pakete für diesen Build zu installieren.

$ npm install cheerio puppeteer

Erstellen Sie im Code-Editor eine neue Datei in Ihrem Projektordner und nennen Sie sie „dynamicScraper.js“.

Ausgezeichnete Arbeit, Kumpel!

Zugriff auf den Inhalt der Seite

Puppeteer ist eine leistungsstarke Node.js-Bibliothek, mit der Sie kopflose Chrome-Browser steuern können, was sie ideal für die Interaktion mit Webseiten macht. Mit Puppeteer können Sie mithilfe der URL eine Webseite ansprechen, auf die Inhalte zugreifen und ganz einfach Daten von dieser Seite extrahieren.

In diesem Abschnitt erfahren Sie, wie Sie eine Seite mit einem Headless-Browser öffnen, auf den Inhalt zugreifen und den HTML-Inhalt dieser Seite abrufen. Die Zielwebsite für dieses Tutorial finden Sie hier.

Hinweis: Sie müssen den gesamten Code in die Datei „dynamicScraper.js“ schreiben.

Beginnen Sie mit dem Importieren von Puppeteer mithilfe der in Node.js integrierten Funktion require(), die Ihnen beim Laden von Modulen hilft: Kernmodule, Bibliotheken von Drittanbietern (wie Puppeteer) oder benutzerdefinierte Module (wie Ihre lokalen JS-Dateien).

$ npm install cheerio puppeteer

Als nächstes definieren Sie eine Variable zum Speichern Ihrer Ziel-URL. Dies ist nicht zwingend erforderlich, aber es macht Ihren Code sauberer, da Sie nur an einer beliebigen Stelle in Ihrem Code auf diese globale Variable verweisen müssen.

const puppeteer = require('puppeteer');

Der nächste Schritt besteht darin, die Funktion zu erstellen, die den Headless-Browser startet und den HTML-Inhalt der Zielseite abruft. Sie sollten sich für die Methode „Sofort aufgerufener Funktionsausdruck“ (IIFE) entscheiden, um die Arbeit viel schneller zu machen.

Definieren Sie ein asynchrones IIFE mit einem Try-and-Catch-Block:

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

Hinweis: Sie sollten jeden anderen Code für dieses Tutorialsegment in den Try-Block schreiben.

Erstellen Sie direkt im IIFE eine neue Instanz von Puppeteer und öffnen Sie eine neue Seite für die Interaktion.

Starten Sie eine neue Instanz der Puppeteer-Bibliothek mit der Startmethode und übergeben Sie ihr den Headless-Modus. Der Headless-Modus kann entweder auf true oder false gesetzt werden. Wenn Sie den Headless-Modus auf „true“ setzen, ist der Headless-Browser nicht sichtbar, wenn der Puppenspieler gestartet wird. Wenn Sie ihn jedoch auf „false“ setzen, wird der Browser sichtbar.

Nachdem Sie Puppeteer gestartet haben, möchten Sie auch die newPage-Methode aufrufen, die das Öffnen eines neuen Tabs im Headless-Browser auslöst.

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

Fragen Sie nun die newPage-Methode ab, um auf die erwartete URL abzuzielen, und öffnen Sie diese Website in diesem neuen Tab mithilfe der page.goto-Methode. Darüber hinaus möchten Sie sicherstellen, dass Puppeteer die Seite nur dann als bereit für die Interaktion und Extraktion von Daten betrachtet, wenn die Seite alle wesentlichen Ressourcen (wie Bilder und JS) geladen hat.

Um sicherzustellen, dass die Seite bereit ist, bietet Puppeteer eine Option namens „waitUntil“, die verschiedene Werte annehmen kann, die unterschiedliche Bedingungen für das Laden der Seite definieren:

• load: Dies wartet auf die Auslösung des Ladeereignisses, das auftritt, nachdem das HTML-Dokument und seine Ressourcen (z. B. Bilder, CSS, JS) geladen wurden. Allerdings berücksichtigt dies möglicherweise nicht den zusätzlichen JavaScript-gerenderten Inhalt, der nach dem Ladeereignis geladen wird.

• domcontentloaded: Dies wartet auf das DOMContentLoaded-Ereignis, das ausgelöst wird, sobald der ursprüngliche HTML-Code analysiert wird. Dies wird jedoch geladen, bevor externe Ressourcen (wie Bilder oder zusätzliche JS) geladen werden.

• networkidle2: Dies wartet 500 Millisekunden lang, bis nicht mehr als zwei aktive Netzwerkanforderungen (laufende HTTP-Anforderungen (z. B. Laden von Bildern, Skripten oder anderen Ressourcen)) vorliegen. Dieser Wert wird bevorzugt, wenn es um Seiten geht, die kleine, kontinuierliche Anfragen stellen, sich aber nicht auf den Hauptinhalt auswirken.
  

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

Schließlich müssen Sie nur noch den gesamten HTML-Inhalt der aktuellen Seite mithilfe von page.content() abrufen. Am wichtigsten ist, dass Sie die Browserinstanz schließen, um unnötigen Speicherverbrauch zu vermeiden, der Ihr System verlangsamen kann. Verwenden Sie browser.close() am Ende Ihres Skripts, um den Browser zu schließen.

$ npm install cheerio puppeteer

Mit dem aktuellen Code, den Sie haben, wird der Browser sehr schnell geladen und geschlossen, und Sie können die Seite möglicherweise nicht einmal richtig anzeigen. In diesem Fall können Sie den Browser mit der Methode page.waitForTimeout um einige Sekunden verzögern. Diese Methode sollte unmittelbar vor der browser.close-Methode stehen.

const puppeteer = require('puppeteer');

Hier ist der gesamte Code für diesen Abschnitt:

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

Speichern Sie Ihre Datei und führen Sie das Skript mit dem folgenden Befehl in Ihrem Terminal aus:

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

Das Skript öffnet einen Headless-Browser wie den folgenden:

Der Browser wird geladen, Puppeteer ruft seinen gesamten HTML-Inhalt ab und die Konsole protokolliert den Inhalt im Terminal.

Hier ist die Ausgabe, die Sie in Ihrem Terminal erhalten sollten:

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

Als nächstes möchten Sie eine Schleife durchführen, um die Klicks zu simulieren. Die Simulation verwendet eine for-Schleife, die i-mal ausgeführt wird, wobei i die Klickvariable ist.

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

Hinweis: Ihr verbleibender Code für diesen Abschnitt sollte in den Try-Block in der for-Schleife geschrieben werden.

Um beim Debuggen und Nachverfolgen der Ausgabe zu helfen, melden Sie den aktuellen Klickversuch ab.

// 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();

Als nächstes möchten Sie die Schaltfläche „Mehr laden“ finden und mindestens dreimal darauf klicken. Bevor Sie den Klick simulieren, sollten Sie jedoch sicherstellen, dass die Schaltfläche „Mehr laden“ verfügbar ist.

Puppeteer bietet die Methode waitForSelector(), um die Sichtbarkeit eines Elements zu überprüfen, bevor es verwendet wird.

Für die Schaltfläche „Mehr laden“ müssen Sie sie zunächst mithilfe des Werts des darauf befindlichen ID-Selektors finden und dann den Sichtbarkeitsstatus wie folgt überprüfen:

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

Da Sie nun wissen, dass die Schaltfläche „Mehr laden“ verfügbar ist, können Sie mit der Puppeteer-Methode click() darauf klicken.

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

Sobald Sie einen Klick auf die Schaltfläche „Mehr laden“ simulieren, sollten Sie warten, bis der Inhalt geladen ist, bevor Sie einen weiteren Klick simulieren, da die Daten möglicherweise von einer Serveranfrage abhängen. Sie müssen mithilfe von setTimeout() eine Verzögerung zwischen den Anforderungen einführen.

Der folgende Code weist das Skript an, mindestens zwei Sekunden zu warten, bevor es einen weiteren Klick auf die Schaltfläche „Mehr laden“ simuliert.

$ node dynamicScraper.js

Um diesen Abschnitt abzuschließen, möchten Sie den aktuellen HTML-Inhalt nach jedem Klick mit der Methode content() abrufen und dann die Ausgabe am Terminal abmelden.

    <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="So entfernen Sie Daten von einer Seite mit Infinite Scroll">
                <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;

Ihr vollständiger Code bis jetzt:

for (let i = 0; i 



<p>Hier ist das Ergebnis der Simulation des dreimaligen Klickens auf die Schaltfläche, um 48 Produkte zu erhalten:<br>
</p>

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

Jetzt sollten Sie sich nur noch um die Interaktion mit der Ausgabe aller 48 Produkte kümmern. Dazu müssen Sie den vorherigen Code im letzten Abschnitt bereinigen.

Sie müssen außerdem die HTML-Variable nach dem for-Schleifenblock herunterfahren, damit Sie nur eine Ausgabe mit allen 48 Produkten erhalten.

Ihr Bereinigungscode sollte mit diesem Codeausschnitt identisch sein:

$ npm install cheerio puppeteer

Jetzt beginnen wir mit der HTML-Analyse mit Cheerio.

Zuallererst muss Cheerio Zugriff auf den HTML-Inhalt haben, den es analysieren möchte, und stellt dafür eine Load()-Methode bereit, die diesen HTML-Inhalt aufnimmt und ihn mithilfe einer jQuery-ähnlichen Syntax zugänglich macht.

Erstellen Sie eine Instanz der Cheerio-Bibliothek mit dem HTML-Inhalt:

const puppeteer = require('puppeteer');

Sie können jetzt $ verwenden, um Elemente im geladenen HTML abzufragen und zu bearbeiten.

Als nächstes initialisieren Sie ein Array zum Speichern der Produktinformationen. Dieses Array enthält die extrahierten Daten und jedes Produkt wird als Objekt mit seinem Namen, Preis, Bild und Link gespeichert.

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

Denken Sie daran, dass jedes Produkt eine Klasse .product-item hat. Sie verwenden dies mit der Variableninstanz von Cheerio ($), um jedes Produkt abzurufen und dann einige Manipulationen durchzuführen.

Die Methode .each() wird verwendet, um jedes übereinstimmende Element mit dem Klassenselektor .product-item zu durchlaufen.

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

Lassen Sie uns die Produktdetails von jedem Produkt mithilfe der Klassenauswahl dieses bestimmten Details abrufen. Um beispielsweise den Produktnamen zu erhalten, müssen Sie das untergeordnete Element in jedem Produkt mit dem Klassenselektor .product-item finden. Rufen Sie den Textinhalt dieses untergeordneten Elements ab und kürzen Sie ihn, falls Leerzeichen vorhanden sind.

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

• $(element).find('.product-name'): Sucht im aktuellen .product-item nach dem untergeordneten Element mit der Klasse .product-name.
• .text(): Ruft den Textinhalt innerhalb des Elements ab.
• .trim(): Entfernt unnötige Leerzeichen aus dem Text.

Anhand dieses Konzepts ermitteln wir den Preis, die Bild-URL und den Link mithilfe ihres Klassenattributs.

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

Da Sie nun alle erwarteten Informationen haben, besteht der nächste Schritt darin, jede analysierte Produktinformation als einzelnes Objekt in das Produktarray zu übertragen.

// 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();

Abschließend melden Sie sich vom Array „products“ ab, um die erwartete Ausgabe im Terminal zu erhalten.

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

Ihr gesamter Code sollte wie dieses Code-Snippet aussehen:

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

So sollte Ihre Ausgabe aussehen, wenn Sie das Skript speichern und ausführen:

$ node dynamicScraper.js

Produktinformationen in CSV exportieren

Der nächste Schritt besteht darin, die analysierten Produktinformationen, die derzeit im Json-Format (JavaScript Object Notation) vorliegen, in ein CSV-Format (Comma-Separated Values) zu exportieren. Wir verwenden die json2csv-Bibliothek, um die analysierten Daten in das entsprechende CSV-Format zu konvertieren.

Beginnen Sie mit dem Importieren der erforderlichen Module.

Node.js stellt das Dateisystemmodul (fs) für die Dateiverwaltung bereit, z. B. das Schreiben von Daten in eine Datei. Nach dem Import des fs-Moduls sollten Sie die parse()-Methode aus der json2csv-Bibliothek destrukturieren.

$ npm install cheerio puppeteer

CSV-Dateien erfordern normalerweise Spaltenüberschriften; Schreiben Sie dies sorgfältig in der gleichen Reihenfolge wie Ihre analysierten Informationen. Hier sind die analysierten Daten das Produktarray, wobei jedes Element ein Objekt mit vier Schlüsseln (Name, Preis, Bild und Link) ist. Sie sollten diese Objektschlüssel verwenden, um Ihre Spaltenüberschriften für eine ordnungsgemäße Zuordnung zu benennen.

Definieren Sie die Felder (Spaltenköpfe) für Ihre CSV-Datei:

const puppeteer = require('puppeteer');

Da Sie nun Ihre Felder definiert haben, müssen Sie als Nächstes die aktuell geparsten Informationen in ein CSV-Format konvertieren. Die Methode parse() funktioniert in diesem Format: parse(WHAT_YOU_WANT_TO_CONVERT, { YOUR_COLUMN_HEADERS }).

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

Sie müssen diese CSV-Informationen nun in einer neuen Datei mit der Dateierweiterung .csv speichern. Wenn Sie Node.js verwenden, können Sie die Dateierstellung mithilfe der Methode writeFileSync() im fs-Modul durchführen. Diese Methode benötigt zwei Parameter: den Dateinamen und die Daten.

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

Ihr vollständiger Code für diesen Abschnitt sollte so aussehen:

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

Sobald Sie das Skript speichern und ausführen, sollte automatisch eine Datei mit dem Namen „products.csv“ zu Ihrer Dateistruktur hinzugefügt werden.

Die Ausgabe – products.csv:

Abschluss

Dieses Tutorial befasste sich mit den Feinheiten des Scrapings von Daten von einer Seite, die eine Simulation erfordert, um auf ihre verborgenen Inhalte zuzugreifen. Sie haben gelernt, wie Sie mit Node.js und einigen zusätzlichen Bibliotheken Web Scraping auf dynamischen Seiten durchführen, Ihre Scraping-Daten in ein besser organisiertes Format analysieren und sie in eine CSV-Datei entpacken.