Wie man einen Scraper erstellt und ein Formular mit Puppeteer einreicht

Mihnea-Octavian Manolache am 28. Februar 2023

Haben Sie beim Web Scraping schon einmal mit POST-Anfragen arbeiten müssen? Ich bin sicher, das haben Sie! Und meistens sind es Formulare, die wir bearbeiten müssen. Deshalb werde ich heute darüber sprechen, wie man das Formular mit Puppeteer abschickt. Wenn Sie noch nicht wissen, was Puppeteer ist, machen Sie sich keine Sorgen. Sie werden es in Kürze herausfinden. Bis dahin möchte ich einige Erwartungen an den heutigen Artikel formulieren. Wenn Sie mir auf unserem Lernpfad folgen, sollten Sie heute in der Lage sein zu lernen:

• Was ist Puppeteer im Web Scraping
• Wie man ein einfaches Puppeteer-Projekt einrichtet
• Wie wird die Formularübermittlung in Puppeteer gehandhabt?

Also, ohne weitere Umschweife, auf geht's!

Was ist Puppeteer und warum ist es wichtig für Web Scraping?

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

Puppeteer ist eine Node.js-Bibliothek, die es Ihnen ermöglicht, einen Headless Chrome- oder Chromium-Browser über das DevTools-Protokoll zu steuern. Langer Rede kurzer Sinn, es bietet eine High-Level-API, um Chrome zu automatisieren.

Beim Web-Scraping ist Puppeteer nützlich für das Scraping von Websites, die JavaScript zum Rendern benötigen. Darüber hinaus kann es auch verwendet werden, um mit Webseiten auf ähnliche Weise zu interagieren wie ein Mensch. Zum Beispiel, indem man auf Schaltflächen klickt oder, wie in unserem heutigen Schwerpunkt, Formulare ausfüllt. Dies macht es ideal für das Scraping von Websites, die Anti-Scraping-Techniken verwenden.

Einrichten eines einfachen Puppeteer-Projekts

Ich glaube daran, die Dinge langsam anzugehen, um den Gesamtprozess besser zu verstehen. Bevor ich Ihnen zeige, wie Sie das Formular mit Puppeteer übermitteln, lassen Sie uns über das einfache Puppeteer sprechen. In diesem Abschnitt werde ich Ihnen zeigen, wie Sie ein Node-Projekt einrichten, Puppeteer installieren und es zum Scrapen von Daten verwenden. Als Erstes erstellen wir also einen neuen Ordner und öffnen ihn in der IDE unserer Wahl. Ich bevorzuge Visual Studio Code, aber Sie können jede beliebige IDE verwenden.

Wussten Sie das?

• Sie können einen neuen Ordner "programmatisch" von Ihrem Terminal aus erstellen, indem Sie den Befehl "mkdir" eingeben.
• Sie können den Befehl `npm init -y` verwenden, um ein Node-Projekt einzurichten und Standardwerte zu akzeptieren
• Sie können eine neue Datei mit dem Befehl `touch` erstellen.
• Sie können VSCode auch mit dem Befehl `code .` öffnen.

Wenn Sie möchten, können Sie alle vier kombinieren und so in Sekundenschnelle ein Projekt auf die Beine stellen:

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

Öffnen Sie innerhalb Ihrer IDE ein neues Terminal (Terminal > Neues Terminal) und installieren Sie Puppeteer. Geben Sie "npm i puppeteer --save" in Ihr Terminal ein. Außerdem verwende ich gerne JS-Module anstelle von CommonJS. Die Unterschiede zwischen den beiden finden Sie hier. Wenn Sie auch Module verwenden wollen, öffnen Sie `package. json` und fügen Sie `"type": "module"` zum JSON-Objekt hinzu.

Nun, da wir alles eingerichtet haben, können wir mit dem Hinzufügen von Code beginnen. Erstellen Sie eine neue Datei "index.js" und öffnen Sie sie in der IDE. Diesmal müssen Sie das nicht vom Terminal aus tun, aber als Tipp können Sie 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 wir wollen sehen, was wir tun:

1. Wir importieren Puppeteer und `executablePath` in unser Projekt
2. Wir definieren eine neue Funktion, die einen "URL"-Parameter benötigt
3. Wir starten einen neuen Browser mit `puppeteer.launch`
   a. Wir geben an, dass er headfull laufen soll
   b. Wir verwenden `executablePath`, um den Chrome-Pfad zu erhalten
4. Wir öffnen eine neue Seite und navigieren zu der "URL".
5. Wir speichern den `Seiteninhalt()` in einer Konstante
6. Wir haben die Browserinstanz geschlossen
7. Und schließlich geben wir die "html"-Ausgabe der Seite zurück, die wir gerade ausgewertet haben

So weit sind die Dinge nicht kompliziert. Dies ist das absolute Minimum einer Web Scraper-Implementierung mit Node JS und Puppeteer. Wenn Sie den Code ausführen möchten, geben Sie der Funktion "Scraper" einfach ein Ziel und protokollieren Sie ihren Rückgabewert:

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

Aber denken Sie daran, dass unser Ziel darin besteht, Daten nach dem Absenden eines Formulars zu extrahieren. Das bedeutet, dass wir einen Weg finden müssen, das Formular mit Puppeteer zu übermitteln. Glücklicherweise habe ich das schon einmal gemacht und weiß, dass es nicht schwer ist. Schauen wir uns also an, wie Sie es auch tun können.

Wie man Formulare mit Puppeteer einreicht

Betrachten Sie Puppeteer als Mittel zur Nachahmung des menschlichen Verhaltens auf einer bestimmten Website. Wie füllen wir Menschen Formulare aus? Nun, wir identifizieren das Formular, füllen es aus und klicken normalerweise auf eine Schaltfläche. Das ist die gleiche Logik, mit der wir Formulare mit Puppeteer abschicken. Der einzige Unterschied besteht darin, wie wir diese Aktionen durchführen. Denn Menschen verlassen sich auf ihre Sinne. Da es sich bei Puppeteer um eine Software handelt, führen wir die Aktionen programmatisch aus, indem wir die in Puppeteer eingebauten Methoden verwenden, etwa so:

#1: Einfache Formulare mit Puppeteer einreichen

Zunächst einmal müssen wir unser Formular "visualisieren". Auf einer Website sind alle Elemente in einem HTML-Block gruppiert und jedes Element hat einen Bezeichner. Die Bezeichner bestehen normalerweise aus CSS-Attributen des Elements. Es kann jedoch vorkommen, dass Sie auf Websites stoßen, die nicht über solche Selektoren verfügen. In solchen Fällen können Sie zum Beispiel xPaths verwenden. Aber das ist ein Thema für einen anderen Vortrag. Konzentrieren wir uns auf die Identifizierung von Elementen in Puppeteer mit CSS.

Um eine Art Hintergrund zu haben, sagen wir, wir wollen die Login-Aktion auf Stack Overflow automatisieren. Das Ziel ist also https://stackoverflow.com/users/login. Öffnen Sie Ihren Browser, navigieren Sie zu der Anmeldeseite und öffnen Sie die Entwicklertools. Sie können mit der rechten Maustaste auf die Seite klicken und "Inspect" auswählen. Sie sollten dann etwas wie das hier sehen:

Auf der linken Seite befindet sich eine grafische Oberfläche. Auf der rechten Seite befindet sich die HTML-Struktur. Wenn Sie auf der rechten Seite genau hinschauen, sehen Sie unser Formular. Es besteht hauptsächlich aus zwei Eingaben 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, was wir bisher gelernt haben, 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 den Parameter meiner Funktion durch ein Objekt ersetzt. Dieses Objekt besteht aus der Ziel-URL, den Eingabeselektoren und -werten sowie dem Selektor für die Schaltfläche "Submit". Um den Code auszuführen, erstellen Sie einfach ein neues Objekt "TARGET", 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))

#Nr. 2: Hochladen von Dateien mit Puppeteer

Manchmal müssen wir bei der Web-Automatisierung Dateien hochladen, anstatt einfache Formulare zu übermitteln. Wenn Sie mit einer solchen Aufgabe konfrontiert werden und Dateien anhängen müssen, bevor Sie das Formular mit Puppeteer übermitteln, sollten Sie die Methode `uploadFile` von Puppeteer verwenden. Um die Dinge einfach zu halten, schlage ich vor, eine neue Funktion für diese Aktion zu erstellen:

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

}

Sehen Sie, wie ich dieses Mal `page.$` verwende, um das Element zuerst zu identifizieren. Und erst danach rufe ich die Methode `uploadFile` auf, die nur mit dem Typ `ElementHandle` funktioniert. Bei den Parametern verwende ich, wie zuvor, ein Objekt, um alle Daten auf einmal an meine Funktion zu übergeben. Wenn Sie das Skript testen wollen, fügen Sie einfach den folgenden Code ein 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)

Schlussfolgerungen

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

Nun sollte ich anmerken, dass ein Scraper in der realen Welt viel mehr benötigt, um effizient zu sein. Wenn Sie einen Server "missbrauchen", indem Sie zu viele Formulare in einer kurzen Zeitspanne übermitteln, werden Sie wahrscheinlich blockiert. Deshalb empfehle ich Ihnen, einen professionellen Scraping-Dienst in Anspruch zu nehmen, wenn Sie den Prozess der Formularübermittlung automatisieren möchten. Bei Web Scraping API bieten wir die Möglichkeit, POST- und PUT-Anfragen zu senden. Sie können mehr darüber in unserer Dokumentation lesen.