Kratzen Sie mit dem Puppenspieler durch das Netz!-js-Tutorial-php.cn

Scrape the web with puppeteer!

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 in einem Vollbrowser für visuelles Feedback im Web navigieren: Puppeteer macht es einfacher denn je, Aufgaben wie Web Scraping, Tests und mehr zu 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 gesamten Website Echtzeit-Währungsumrechnungskurse für 1 USD angezeigt werden.

Obwohl es APIs gibt, die die Daten bereitstellen könnten – mit Nutzungsbeschränkungen und monatlichen Gebühren – sah ich 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 letztlich 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; Anschließend werden diese Pakete installiert

npm i puppeteer-core
Garn und Puppenspieler-Kern hinzufügen
pnpm füge puppeteer-core hinzu

Wäre am besten für Sie geeignet. Das Paket ist leichtgewichtig, 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
Importiere Puppenspieler aus „puppeteer-core“;

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

Nach dem Login kopieren

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 verfügt puppeteer.launch() standardmäßig über voreingestellte Werte, z. B. ist der Headless-Modus auf „true“ gesetzt.

Schritt 4

Der Browser wurde gestartet und wir haben jetzt eine Seite zum Surfen im Internet. 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' })

Nach dem Login kopieren

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 wichtigsten Teil 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();

})();

Nach dem Login kopieren

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'
  }
....
]

Nach dem Login kopieren

await page.evaluate(() => { ... }): This is where the magic happens. The evaluate method allows us to run JavaScript code within the context of the page we're scraping. It's as if you're opening the browser's developer console and running the code directly on the page.

const quotes = document.querySelectorAll(".quote");: Here, we're selecting all elements on the page that match the .quote class. This gives us a NodeList of quote elements.

const quotesArray = [];: We initialize an empty array to store the quotes we extract.

for (const quote of quotes) { ... }: This loop iterates over each quote element. For each one, we extract the text of the quote and the author.

quotesArray.push({ quote: texts, author });: For each quote, we create an object containing the quote text and the author, then push this object into the quotesArray.

return quotesArray;: Finally, we return the array of quotes, which is then stored in quotesScraper in our Node.js environment.

This method of extracting data is powerful because it allows you to interact with the page just like a user would, but in an automated and programmatic way.

Closing the Browser

await browser.close();: After scraping the data, it's important to close the browser to free up resources. This line ensures that the browser instance we launched is properly shut down.

Looking Ahead to Part 2

With this script, you've successfully scraped data from a website using Puppeteer. But we're just scratching the surface of what's possible. In Part 2, we’ll explore more advanced techniques like handling dynamic content and use Express.JS to create API functionality of scrapped data. Stay tuned as we delve deeper into the world of Puppeteer!

Das obige ist der detaillierte Inhalt vonKratzen Sie mit dem Puppenspieler durch das Netz!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!