So erstellen Sie einen Scraper und senden ein Formular mit Puppeteer ab

Im Allgemeinen bezieht sich Web-Scraping auf den Prozess der automatisierten Datenextraktion von verschiedenen Servern. Früher hätte ein einfacher HTTP-Client ausgereicht, um diese Aufgabe zu erledigen. Heutzutage setzen Websites jedoch immer mehr auf JavaScript. Und herkömmliche HTTP-Clients sind nicht in der Lage, JavaScript-Dateien darzustellen. Hier kommt Puppeteer ins Spiel.

Puppeteer ist eine Node.js-Bibliothek, mit der Sie einen headless Chrome- oder Chromium-Browser über das DevTools-Protokoll steuern können. Kurz gesagt: Es bietet eine High-Level-API zur Automatisierung von Chrome.

Im Hinblick auf Web-Scraping ist Puppeteer nützlich für das Scraping von Websites, die JavaScript zum Rendern benötigen. Darüber hinaus kann es auch dazu verwendet werden, mit Webseiten auf eine Weise zu interagieren, die der eines Menschen ähnelt. Zum Beispiel durch das Klicken auf Schaltflächen oder – unser heutiger Schwerpunkt – das Ausfüllen von Formularen. Dies macht es ideal für das Scraping von Websites, die Anti-Scraping-Techniken einsetzen.

Ich bin der Meinung, dass man die Dinge langsam angehen sollte, um den Gesamtprozess besser zu verstehen. Bevor wir uns damit befassen, wie man das Formular mit Puppeteer absendet, lassen Sie uns über die Grundlagen von Puppeteer sprechen. In diesem Abschnitt zeige ich Ihnen, wie Sie ein Node-Projekt einrichten, Puppeteer installieren und damit Daten scrapen. Also, das Wichtigste zuerst: Erstellen wir einen neuen Ordner und öffnen ihn in unserer bevorzugten IDE. Ich bevorzuge Visual Studio Code, aber du kannst gerne jede IDE verwenden, die du möchtest.

Wusstest du schon?

• Sie können „programmgesteuert“ einen neuen Ordner über Ihr Terminal erstellen, indem Sie den Befehl `mkdir` eingeben.
• Mit dem Befehl `npm init -y` können Sie ein Node-Projekt einrichten und die Standardwerte übernehmen
• Mit dem Befehl `touch` kannst du eine neue Datei erstellen.
• Und du kannst VSCode auch mit dem Befehl `code .` öffnen.

Wenn du möchtest, kannst du die vier Befehle kombinieren und so in Sekundenschnelle ein Projekt starten:

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

Öffnen Sie in Ihrer IDE ein neues Terminal (Terminal > Neues Terminal) und installieren wir Puppeteer. Geben Sie in Ihrem Terminal `npm i puppeteer --save` ein. Außerdem verwende ich lieber JS-Module statt CommonJS. Sehen Sie sich hier die Unterschiede zwischen den beiden an. Wenn Sie ebenfalls Module verwenden möchten, öffnen Sie `package.json` und fügen Sie `"type": "module"` zum JSON-Objekt hinzu.

Jetzt, da alles eingerichtet ist, können wir damit beginnen, etwas Code hinzuzufügen. Erstelle eine neue Datei `index.js` und öffne sie in der IDE. Diesmal musst du das nicht über das Terminal machen, aber als Tipp: Du könntest den Befehl `touch` verwenden. Fügen wir nun den Code hinzu:

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

}

Und schauen wir uns an, was wir hier tun:

• Wir importieren Puppeteer und `executablePath` in unser Projekt
• Wir definieren eine neue Funktion, die einen `url`-Parameter akzeptiert
• Wir starten einen neuen Browser mit `puppeteer.launch` a. Wir geben an, dass er im Head-Full-Modus laufen soll b. Wir verwenden `executablePath`, um den Chrome-Pfad abzurufen
• Wir öffnen eine neue Seite und navigieren zur `url`
• Wir speichern `page.content()` in einer Konstante
• Wir schließen die Browser-Instanz
• Und schließlich geben wir die `html`-Ausgabe der Seite zurück, die wir gerade gescrapt haben

Bisher ist das Ganze nicht kompliziert. Dies ist das absolute Minimum einer Web-Scraper-Implementierung mit Node.js und Puppeteer. Wenn Sie den Code ausführen möchten, übergeben Sie der Funktion `scraper` einfach ein Ziel und protokollieren Sie ihren Rückgabewert:

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

Aber denk daran: Unser Ziel ist es, Daten beim Absenden eines Formulars zu extrahieren. Das bedeutet, wir müssen uns überlegen, wie wir das Formular mit Puppeteer absenden können. Zum Glück habe ich das schon einmal gemacht und weiß, dass es nicht schwer ist. Schauen wir uns also an, wie du das auch hinbekommst.

Stellen Sie sich Puppeteer als Mittel vor, um menschliches Verhalten auf einer bestimmten Website nachzuahmen. Wie senden wir Menschen Formulare ab? Nun, wir identifizieren das Formular, füllen es aus und klicken in der Regel auf eine Schaltfläche. Das ist dieselbe Logik, die beim Absenden von Formularen mit Puppeteer zum Einsatz kommt. Der einzige Unterschied besteht darin, wie wir diese Aktionen ausführen. Denn Menschen verlassen sich auf ihre Sinne. Da Puppeteer eine Software ist, erledigen wir dies programmgesteuert unter Verwendung der in Puppeteer integrierten Methoden, etwa so:

Das Wichtigste zuerst: Wir müssen unser Formular „visualisieren“. Auf einer Website sind alle Elemente in einem HTML-Block gruppiert, und jedes Element hat eine Kennung. Kennungen bestehen in der Regel aus CSS-Attributen des Elements. Es kann jedoch vorkommen, dass Sie auf Websites stoßen, die keine solchen Selektoren haben. In solchen Fällen können Sie beispielsweise xPaths verwenden. Aber das ist ein Thema für einen anderen Vortrag. Konzentrieren wir uns darauf, Elemente in Puppeteer mithilfe von CSS zu identifizieren.

Um einen kleinen Hintergrund zu schaffen: Nehmen wir an, wir möchten die Anmeldeaktion auf Stack Overflow automatisieren. Das Ziel ist also https://stackoverflow.com/users/login. Öffnen Sie Ihren Browser, navigieren Sie zur Anmeldeseite und öffnen Sie die Entwicklertools. Sie können mit der rechten Maustaste auf die Seite klicken und „Untersuchen“ auswählen. Sie sollten nun etwa Folgendes sehen:

Auf der linken Seite befindet sich eine grafische Oberfläche. Auf der rechten Seite sehen Sie die HTML-Struktur. Wenn Sie genau hinschauen, erkennen Sie auf der rechten Seite unser Formular. Es besteht im Wesentlichen aus zwei Eingabefeldern und einer Schaltfläche. Dies sind die drei Elemente, auf die wir abzielen. Und wie Sie sehen können, haben alle drei Elemente eine `id` als CSS-Bezeichner. Lassen Sie uns das bisher Gelernte in Code umsetzen:

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

}

Um die Funktionalität und Wiederverwendbarkeit zu gewährleisten, habe ich mich dafür entschieden, den Parameter meiner Funktion durch ein Objekt zu ersetzen. Dieses Objekt besteht aus der Ziel-URL, den Selektoren und Werten der Eingabefelder sowie dem Selektor für die Absenden-Schaltfläche. Um den Code auszuführen, erstellen Sie also einfach ein neues `TARGET`-Objekt, das Ihre Daten enthält, und übergeben Sie es an Ihre `scraper`-Funktion:

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))

Manchmal erfordert die Web-Automatisierung, dass wir Dateien hochladen, anstatt einfache Formulare abzuschicken. Wenn du auf eine solche Aufgabe stößt und Dateien anhängen musst, bevor du das Formular mit Puppeteer absendest, solltest du die `uploadFile`-Methode von Puppeteer nutzen. Um die Dinge einfach zu halten, schlage ich vor, dass du für diese Aktion eine neue Funktion erstellst:

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

}

Beachten Sie, dass ich diesmal `page.$` verwende, um zunächst das Element zu identifizieren. Erst danach rufe ich die Methode `uploadFile` auf, die nur mit `ElementHandle`-Typen funktioniert. Was die Parameter angeht, verwende ich wie zuvor ein Objekt, um alle Daten auf einmal an meine Funktion zu übergeben. Wenn Sie das Skript testen möchten, fügen Sie einfach den folgenden Code hinzu und führen Sie `node index.js` in Ihrem Terminal aus:

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)

Zusammenfassend würde ich sagen, dass es recht einfach ist, das Formular mit Puppeteer abzuschicken. Außerdem finde ich, dass Puppeteer im Vergleich zu seinen Alternativen diese Aktion vollständig bewältigt. Im Grunde muss der Benutzer lediglich die Elemente korrekt identifizieren.

Nun sollte ich anmerken, dass ein Scraper in der Praxis viel mehr benötigt, um effizient zu sein. Meistens wirst du gesperrt, wenn du einen Server „missbrauchst“, indem du zu viele Formulare in kurzer Zeit absendest. Deshalb empfehle ich dir, einen professionellen Scraping-Dienst zu nutzen, wenn du den Prozess der Formularübermittlung automatisieren möchtest. Bei Web Scraping API bieten wir die Möglichkeit, POST- und PUT-Anfragen zu senden. Mehr dazu erfahren Sie in unserer Dokumentation.