Web Scraping mit Puppeteer Advanced Node.JS
Gabriel Cioci am 28. Juli 2021
Anstatt kommerzielle Tools zu verwenden, ziehen es viele Entwickler vor, ihre eigenen Web Scraper zu erstellen. Auch wenn verfügbare Produkte über umfangreichere Funktionen verfügen, können wir die Ergebnisse, die diese Bots liefern können, und den Spaß, den es macht, seine eigenen zu erstellen, nicht leugnen.
Im folgenden Artikel erfahren Sie, welche Schritte Sie unternehmen müssen, um mit Node.js und Puppeteer einen eigenen Web Scraper zu erstellen. Wir werden eine App programmieren, die eine Website lädt, einen Screenshot macht, sich mit einem Headless-Browser bei der Website anmeldet und einige Daten über mehrere Seiten hinweg scrapt. Die Komplexität Ihrer App wird mit dem Fortschritt wachsen.
Ein Überblick über Web Scraping mit Puppeteer
Google hat Puppeteer entwickelt, um eine einfache, aber leistungsstarke Schnittstelle in Node.js für die Automatisierung von Tests und verschiedenen Aufgaben mit der Chromium-Browser-Engine bereitzustellen. Es läuft standardmäßig ohne Headless, kann aber so konfiguriert werden, dass es vollständig mit Chrome oder Chromium läuft.
Die vom Puppeteer-Team erstellte API verwendet das DevTools-Protokoll, um die Kontrolle über einen Webbrowser wie Chrome zu übernehmen und verschiedene Aufgaben auszuführen, z. B:
- Screenshots aufnehmen und PDFs von Seiten erstellen
- Formularübermittlung automatisieren
- UI-Tests (Anklicken von Schaltflächen, Tastatureingaben usw.)
- Scrapen einer SPA und Generieren von vorgerenderten Inhalten (Server-Side Rendering)
Die meisten Aktionen, die Sie manuell im Browser durchführen können, lassen sich auch mit Puppeteer erledigen. Außerdem können sie automatisiert werden, so dass Sie mehr Zeit sparen und sich auf andere Dinge konzentrieren können.
Puppeteer wurde auch entwickelt, um entwicklerfreundlich zu sein. Personen, die mit anderen beliebten Test-Frameworks wie Mocha vertraut sind, werden sich mit Puppeteer sofort zu Hause fühlen und eine aktive Community vorfinden, die Unterstützung für Puppeteer anbietet. Dies führte zu einem massiven Anstieg der Popularität unter den Entwicklern.
Natürlich ist Puppeteer nicht nur zum Testen geeignet. Denn wenn es alles kann, was ein Standardbrowser kann, dann kann es für Web-Scraper äußerst nützlich sein. Er kann nämlich dabei helfen, Javascript-Code auszuführen, damit der Scraper den HTML-Code der Seite erreichen kann, und normales Benutzerverhalten zu imitieren, indem er durch die Seite scrollt oder auf beliebige Abschnitte klickt.
Diese dringend benötigten Funktionen machen Headless-Browser zu einer Kernkomponente für jedes kommerzielle Datenextraktionstool und alle anderen als die einfachsten selbstgebauten Web Scraper.
Voraussetzungen
Stellen Sie zuallererst sicher, dass Sie aktuelle Versionen von Node.js und Puppeteer auf Ihrem Rechner installiert haben. Sollte dies nicht der Fall sein, können Sie die folgenden Schritte ausführen, um alle Voraussetzungen zu installieren.
Sie können Node.js von hier herunterladen und installieren. Der Standard-Paketmanager von Node , npm, wird mit Node.js vorinstalliert.
Um die Puppeteer-Bibliothek zu installieren, können Sie den folgenden Befehl in Ihrem Projekt-Stammverzeichnis ausführen:
npm install puppeteer
# oder "yarn add puppeteer"
Beachten Sie, dass bei der Installation von Puppeteer auch die neueste Version von Chromium heruntergeladen wird, die garantiert mit der API funktioniert.
Puppenspieler in Aktion
Es gibt viele verschiedene Dinge, die Sie mit der Bibliothek tun können. Da unser Hauptaugenmerk auf Web-Scraping liegt, werden wir über die Anwendungsfälle sprechen, die Sie am ehesten interessieren, wenn Sie Webdaten extrahieren möchten.
Einen Screenshot machen
Lassen Sie uns mit einem einfachen Beispiel beginnen. Wir schreiben ein Skript, das einen Screenshot von einer Website unserer Wahl anfertigt.
Beachten Sie, dass Puppeteer eine auf Versprechen basierende Bibliothek ist (sie führt asynchrone Aufrufe an die Headless-Chrome-Instanz unter der Haube aus). Lassen Sie uns also den Code sauber halten, indem wir async/await verwenden.
Erstellen Sie zunächst eine neue Datei namens index.js in Ihrem Projekt-Stammverzeichnis.
In dieser Datei müssen wir eine asynchrone Funktion definieren und sie um den gesamten Puppeteer-Code wickeln.
const puppeteer = require('puppeteer')
async function snapScreenshot() {
try {
const URL = 'https://old.reddit.com/'
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(URL)
await page.screenshot({ path: 'screenshot.png' })
await browser.close()
} catch (error) {
console.error(error)
}
}
snapScreenshot()Zunächst wird eine Instanz des Browsers mit dem Befehl puppeteer.launch() gestartet. Dann erstellen wir eine neue Seite unter Verwendung der Browser-Instanz. Um zur gewünschten Website zu navigieren, können wir die Methode goto() verwenden und die URL als Parameter übergeben. Um einen Screenshot zu machen, verwenden wir die Methode screenshot(). Wir müssen auch den Speicherort für das Bild angeben.
Beachten Sie, dass Puppeteer eine anfängliche Seitengröße von 800×600 Pixel festlegt, die die Größe des Screenshots definiert. Sie können die Seitengröße mit der Methode setViewport() anpassen.
Vergessen Sie nicht, die Browser-Instanz zu schließen. Dann müssen Sie nur noch node index.js im Terminal ausführen.
Es ist wirklich so einfach! Sie sollten nun eine neue Datei namens screenshot.png in Ihrem Projektordner sehen.
Übermittlung eines Formulars
Wenn die Website, die Sie scrapen möchten, aus irgendeinem Grund den Inhalt nur anzeigt, wenn Sie angemeldet sind, können Sie den Anmeldevorgang mit Puppeteer automatisieren.
Zunächst müssen wir die Website, die wir auslesen, untersuchen und die Anmeldefelder finden. Dazu klicken wir mit der rechten Maustaste auf das Element und wählen die Option Untersuchen.
In meinem Fall befinden sich die Eingaben in einem Formular mit der Klasse login-form. Wir können die Anmeldedaten mit der Methode type() eingeben.
Wenn Sie sicherstellen möchten, dass die richtigen Aktionen ausgeführt werden, können Sie den Parameter headless hinzufügen und ihn beim Start der Puppeteer-Instanz auf false setzen. Sie werden dann sehen, wie Puppeteer den gesamten Prozess für Sie erledigt.
const puppeteer = require('puppeteer')
async function login() {
try {
const URL = 'https://old.reddit.com/'
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage()
await page.goto(URL)
await page.type('.login-form input[name="user"]', 'EMAIL@gmail.com')
await page.type('.login-form input[name="passwd"]', 'PASSWORD')
await Promise.all([
page.click('.login-form .submit button'),
page.waitForNavigation(),
]);
await browser.close()
} catch (error) {
console.error(error)
}
}
login()Um einen Mausklick zu simulieren, können wir die Methode click() verwenden. Nachdem wir auf die Login-Schaltfläche geklickt haben, sollten wir warten, bis die Seite geladen ist. Das können wir mit der Methode waitForNavigation() tun.
Wenn wir die richtigen Anmeldedaten eingegeben haben, sollten wir jetzt eingeloggt sein!
Mehrere Seiten scrapen
Für diesen Artikel werde ich das Subreddit /r/learnprogramming verwenden. Wir wollen also zur Website navigieren und den Titel und die URL für jeden Beitrag erfassen. Dafür verwenden wir die Methode evaluate().
Der Code sollte wie folgt aussehen:
const puppeteer = require('puppeteer')
async function tutorial() {
try {
const URL = 'https://old.reddit.com/r/learnprogramming/'
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto(URL)
let data = await page.evaluate(() => {
let results = []
let items = document.querySelectorAll('.thing')
items.forEach((item) => {
results.push({
url: item.getAttribute('data-url'),
title: item.querySelector('.title').innerText,
})
})
return results
})
console.log(data)
await browser.close()
} catch (error) {
console.error(error)
}
}
tutorial()Mit der zuvor vorgestellten Inspect-Methode können wir alle Beiträge erfassen, indem wir den .thing-Selektor anvisieren. Wir gehen sie durch und holen uns für jeden Beitrag die URL und den Titel und schieben sie in ein Array.
Nachdem der gesamte Vorgang abgeschlossen ist, können Sie das Ergebnis in Ihrer Konsole sehen.
Toll, wir haben die erste Seite gecrawlt. Aber wie können wir mehrere Seiten dieses Subreddits scrapen?
Es ist einfacher als Sie denken. Hier ist der Code:
const puppeteer = require('puppeteer')
async function tutorial() {
try {
const URL = 'https://old.reddit.com/r/learnprogramming/'
const browser = await puppeteer.launch({headless: false})
const page = await browser.newPage()
await page.goto(URL)
let pagesToScrape = 5;
let currentPage = 1;
let data = []
while (currentPage <= pagesToScrape) {
let newResults = await page.evaluate(() => {
let results = []
let items = document.querySelectorAll('.thing')
items.forEach((item) => {
results.push({
url: item.getAttribute('data-url'),
text: item.querySelector('.title').innerText,
})
})
return results
})
data = data.concat(newResults)
if (currentPage < pagesToScrape) {
await page.click('.next-button a')
await page.waitForSelector('.thing')
await page.waitForSelector('.next-button a')
}
currentPage++;
}
console.log(data)
await browser.close()
} catch (error) {
console.error(error)
}
}
tutorial()Wir brauchen eine Variable, um zu wissen, wie viele Seiten wir abrufen wollen, und eine weitere Variable für die aktuelle Seite. Solange die aktuelle Seite kleiner oder gleich der Anzahl der Seiten ist, die wir abrufen wollen, erfassen wir die URL und den Titel für jeden Beitrag auf der Seite. Nachdem jede Seite erfasst wurde, werden die neuen Ergebnisse mit den bereits erfassten Seiten verknüpft.
Dann klicken wir auf die Schaltfläche "Nächste Seite" und wiederholen den Scraping-Vorgang, bis wir die gewünschte Anzahl von extrahierten Seiten erreicht haben. Wir müssen auch die aktuelle Seite nach jeder Seite erhöhen.
Eine noch einfachere Option
Herzlichen Glückwunsch! Sie haben erfolgreich Ihren eigenen Web Scraper mit Puppeteer gebaut. Ich hoffe, dass Ihnen das Tutorial gefallen hat!
Trotzdem kann das Skript, das wir in diesem Leitfaden erstellt haben, nicht viel ausrichten. Ihm fehlen einige Schlüsselaspekte, die Web Scraping zu einem fehlerfreien Erlebnis machen. Die Verwendung von mobilen oder privaten Proxys und das Lösen von CAPTCHAs sind nur einige der fehlenden Funktionalitäten.
Wenn Sie auf der Suche nach einer professionelleren Methode zur Datenextraktion sind, sollten Sie sich ansehen, was WebScrapingAPI leisten kann, und prüfen, ob es eine gute Lösung ist. Es gibt ein kostenloses Paket, in das Sie nur 30 Minuten Ihrer Zeit investieren müssen.
Viel Spaß beim Web-Scraping!
Nachrichten und Aktualisierungen
Bleiben Sie auf dem Laufenden mit den neuesten Web Scraping-Anleitungen und Nachrichten, indem Sie unseren Newsletter abonnieren.
We care about the protection of your data. Read our <l>Privacy Policy</l>.Privacy Policy.
Ähnliche Artikel
Erfahren Sie, welcher Browser am besten geeignet ist, um Cloudflare-Erkennungssysteme beim Web-Scraping mit Selenium zu umgehen.
Entdecken Sie 3 Möglichkeiten, wie Sie mit Puppeteer Dateien herunterladen und einen Web Scraper erstellen können, der genau das tut.
In unserem umfassenden Leitfaden erfahren Sie, wie Sie Playwright für Web Scraping und Automatisierung einsetzen. Von der grundlegenden Einrichtung bis zu fortgeschrittenen Techniken deckt dieser Leitfaden alles ab.
