Vollständiger Leitfaden zum Puppenspieler Teil 1

Puppeteer: Das Power-Tool für die Web-Automatisierung

In der heutigen schnelllebigen Webentwicklungslandschaft ist Automatisierung der Schlüssel – und hier kommt Puppeteer ins Spiel. Puppeteer wurde von Google entwickelt und ist eine leistungsstarke Node.js-Bibliothek, die es Entwicklern ermöglicht, Chrome-Browser mithilfe von JavaScript zu steuern. Ganz gleich, ob Sie aus Effizienzgründen im Headless-Modus oder für visuelles Feedback in einem Vollbrowser durch das Web navigieren, mit Puppeteer können Sie Aufgaben wie Web Scraping, Tests und mehr einfacher denn je automatisieren. Mit Puppeteer ist das, was früher manuellen Aufwand erforderte, jetzt nur noch ein Skript entfernt.

Warum Web Scraping?

In einem aktuellen Projekt habe ich mit einem Kunden zusammengearbeitet, der eine Landingpage für seine Forex-Handelsgemeinschaft benötigte. Er wollte etwas Ähnliches wie die Börsenticker, die Sie auf MarketWatch oder Yahoo Finance sehen, aber anstelle von Aktien wollte er, dass auf der Website Echtzeit-Währungsumrechnungskurse für 1 USD angezeigt werden.

Es gibt zwar APIs, die die Daten bereitstellen könnten – mit Nutzungsbeschränkungen und monatlichen Gebühren –, aber ich sah eine Möglichkeit, mit Puppeteer eine benutzerdefinierte Lösung zu erstellen. Indem ich im Vorfeld etwas Zeit investierte, war ich in der Lage, die Daten kostenlos zu extrahieren und anzuzeigen, was meinem Kunden letztendlich wiederkehrende Kosten ersparte.

Kunden-Website: Majesticpips.com

Puppenspieler einrichten leicht gemacht

Bevor wir damit beginnen können, das Web in seiner ganzen Pracht zu erkunden, müssen wir Puppeteer in unserer Anwendung installieren.

Genau wie in den Dokumenten beschrieben

Schritt 1

Installieren Sie die Bibliothek mit npm, Yarn oder pnpm Ihrer Wahl.

• npm i puppeteer

• Garn hinzufügen Puppenspieler

• pnpm Puppenspieler hinzufügen

Dadurch wird während der Installation eine kompatible Version von Chrome heruntergeladen, was es für Anfänger einfacher macht, alles schnell zum Laufen zu bringen.

Wenn Sie ein erfahrenerer Entwickler sind und eine bestimmte Chrome-/Chromium-Version haben, mit der Sie arbeiten möchten; dann diese Pakete installieren

• npm i puppeteer-core

• Garn hinzufügen Puppenspieler-Kern

• pnpm add puppeteer-core

wäre am besten für Sie, das Paket wird leichtgewichtig sein, da es nur Puppeteer installiert und die Entscheidung für die Chrome-Version Ihnen überlassen bleibt.

Die Installation von „puppeteer“ ist die bessere Option für Ersttester. Es vereinfacht die Einrichtung und stellt sicher, dass Sie über eine funktionierende Version von Chromium verfügen, sodass Sie sich auf das Schreiben Ihrer Skripte konzentrieren können.

Schritt 2

Jetzt möchten Sie in Ihrer JS-Datei Puppeteer für Anwendungen importieren, die ES-Modulsysteme (ES6-Standards) mit Knotenversionen 12 und höher verwenden.

Puppenspieler aus 'Puppenspieler' importieren; (empfohlen)
oder
Puppenspieler aus „puppeteer-core“ importieren;

Oder Sie können die erforderliche Syntax für das commonJs-Modulsystem für Node.js verwenden, die auch mit älteren Versionen von Node.js kompatibel ist.

const puppeteer = require('puppeteer');
oder
const puppeteer = require('puppeteer-core');

Schritt 3

Nach dem Import von Puppeteer können wir mit dem Schreiben der Befehle zum Durchführen von Web Scraping beginnen. Der folgende Code zeigt, was Sie verwenden müssen.

Wir starten den Browser mit diesen von der Bibliothek bereitgestellten Methoden.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = Diese Methode startet eine neue Browserinstanz.

browser.newPage() = Diese Methode erstellt eine neue Seite (oder Registerkarte) innerhalb der Browserinstanz.

browser.close() = Diese Methode schließt die Browserinstanz.

In puppeteer.launch() können wir Argumente übergeben, um den Browserstart entsprechend unseren Vorlieben anzupassen. Wir werden dies in Teil 2 ausführlicher behandeln. Allerdings hat puppeteer.launch() standardmäßig voreingestellte Werte, wie zum Beispiel, dass der Headless-Modus auf „true“ gesetzt ist.

Schritt 4

Der Browser wurde gestartet und wir haben jetzt eine Seite, die zum Surfen im Internet bereit ist. Navigieren wir zur Website, auf der wir einige Daten extrahieren.

In diesem Beispiel extrahieren wir Daten von einer Angebots-Website.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

Ich habe „await page.screenshot({ path: 'screenshot.png' })“ zum Mix hinzugefügt. Dies ist ein großartiges Tool, um sicherzustellen, dass alles nach Plan verläuft. Wenn dieser Code ausgeführt wird, befindet sich in Ihrem Projektverzeichnis eine Bilddatei, die den aktuellen Status der Website erfasst, die Sie durchsuchen. Sie können den Dateinamen auch nach Ihren Wünschen anpassen.

Wenn alles funktioniert, fahren Sie mit Schritt 5 fort.

Schritt 5

Jetzt, da unser Skript Gestalt annimmt, tauchen wir in den Schlüsselteil ein, in dem wir Daten aus der Webseite extrahieren. So sieht unser Skript bisher aus:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

Um zu überprüfen, ob die Daten erfolgreich gescrapt wurden, können wir den Knoten „server-file-name“ in der CLI ausführen und die Daten werden in der Konsole mit console.log(quotesScraper); angezeigt.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): Hier passiert die Magie. Mit der Evaluierungsmethode können wir JavaScript-Code im Kontext der Seite ausführen, die wir gerade scannen. Es ist, als würden Sie die Entwicklerkonsole des Browsers öffnen und den Code direkt auf der Seite ausführen.

const quotes = document.querySelectorAll(".quote");: Hier wählen wir alle Elemente auf der Seite aus, die der .quote-Klasse entsprechen. Dies gibt uns eine NodeList von Zitatelementen.

const quotesArray = [];: Wir initialisieren ein leeres Array, um die von uns extrahierten Anführungszeichen zu speichern.

for (const quote of quotes) { ... }: Diese Schleife durchläuft jedes Anführungszeichenelement. Für jedes einzelne extrahieren wir den Text des Zitats und den Autor.

quotesArray.push({ quote: texts, author });: Für jedes Zitat erstellen wir ein Objekt, das den Zitattext und den Autor enthält, und schieben dieses Objekt dann in das quotesArray.

return quotesArray;: Schließlich geben wir das Array von Anführungszeichen zurück, das dann in quotesScraper in unserer Node.js-Umgebung gespeichert wird.

Diese Methode zum Extrahieren von Daten ist leistungsstark, da sie es Ihnen ermöglicht, mit der Seite genau wie ein Benutzer zu interagieren, jedoch auf automatisierte und programmatische Weise.

Schließen des Browsers

await browser.close();: Nach dem Scrapen der Daten ist es wichtig, den Browser zu schließen, um Ressourcen freizugeben. Diese Zeile stellt sicher, dass die von uns gestartete Browserinstanz ordnungsgemäß heruntergefahren wird.

Ausblick auf Teil 2

Mit diesem Skript haben Sie mit Puppeteer erfolgreich Daten von einer Website extrahiert. Aber wir kratzen nur an der Oberfläche dessen, was möglich ist. In Teil 2 werden wir fortgeschrittenere Techniken wie den Umgang mit dynamischen Inhalten untersuchen und Express.JS verwenden, um API-Funktionen aus verschrotteten Daten zu erstellen. Bleiben Sie dran, während wir tiefer in die Welt von Puppeteer eintauchen!