Wie findet man Elemente mit CSS-Selektor in Puppeteer?

CSS-Selektoren sind eine der effizientesten Methoden, um HTML-Seiten beim Web-Scraping zu analysieren. In Node.js und Puppeteer können Sie CSS-Selektoren mit den Methoden page.$ und page.$$ verwenden. Mit diesen Methoden können Sie mit Elementen auf der Seite unter Verwendung der bekannten CSS-Syntax interagieren.

Nachfolgend finden Sie einen Beispielcode, der zeigt, wie Sie mit diesen Methoden Elemente auf einer Seite finden können, zusammen mit detaillierten Kommentaren, die Ihnen helfen, jeden Schritt zu verstehen.

      const puppeteer = require('puppeteer');

async function run() {
    // Starten Sie eine neue Browser-Instanz
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    
    // Zur Zielwebseite navigieren
await page.goto("https://httpbin.dev/html", { waitUntil: 'domcontentloaded' });

    // Das erste übereinstimmende Element abrufen
    const firstParagraph = await page.$("p");
    console.log("Erstes Absatzelement gefunden:", firstParagraph);

    // Alle passenden Elemente abrufen
    const allParagraphs = await page.$$("p");
    console.log("Gesamtzahl der gefundenen Absätze:", allParagraphs.length);

    // Textinhalt des ersten Absatzes extrahieren und protokollieren
    const firstParagraphText = await page.$eval("p", element => element.innerText);
    console.log("Text des ersten Absatzes:", firstParagraphText);

    // Href-Attribut des ersten Anker-Tags extrahieren und protokollieren
    const firstAnchorHref = await page.$eval("a", element => element.href);
    console.log("Href des ersten Anker-Tags:", firstAnchorHref);

    // Gesamtzahl der Absatzelemente zählen
const paragraphCount = await page.$$eval("p", elements => elements.length);
console.log("Gesamtzahl der Absatzelemente:", paragraphCount);

// Inneren Text des ersten Absatzes ändern
    await page.$eval("p", element => element.innerText = "Neuer Text für den ersten Absatz");
console.log("Text des ersten Absatzes geändert.");

// Browser schließen
await browser.close();
}

// Funktion ausführen
run();

In diesem Beispiel führen wir die folgenden Aktionen durch:

Starten Sie eine neue Browser-Instanz: Dadurch wird ein neuer, von Puppeteer gesteuerter Browser gestartet.
Zur Zielwebseite navigieren: Die goto-Methode navigiert zur angegebenen URL und wartet, bis der DOM-Inhalt der Seite vollständig geladen ist.
Das erste übereinstimmende Element abrufen: Die Methode page.$ ruft das erste Element ab, das mit dem CSS-Selektor p übereinstimmt.
Alle übereinstimmenden Elemente abrufen: Die Methode „page.$$“ ruft alle Elemente ab, die mit dem CSS-Selektor „p“ übereinstimmen.
Extrahieren und Protokollieren des Textinhalts des ersten Absatzes: Die Methode „page.$eval“ wertet eine Funktion im Kontext des ersten übereinstimmenden Elements aus und gibt dessen innerText zurück.
Extrahieren und Protokollieren des href-Attributs des ersten Anker-Tags: Die Methode page.$eval ruft das href -Attribut des ersten a-Tags ab.
Zählen der Gesamtzahl der Absatzelemente: Die Methode page.$$eval wertet eine Funktion im Kontext aller übereinstimmenden Elemente aus und gibt die Gesamtzahl zurück.
Ändern Sie den inneren Text des ersten Absatzes: Die Methode page.$eval ändert den innerText des ersten übereinstimmenden p-Elements.
Schließen Sie den Browser: Dadurch wird sichergestellt, dass die Browserinstanz nach Beendigung des Skripts ordnungsgemäß geschlossen wird.

Hinweis:

Es ist wichtig, zu warten, bis die Seite vollständig geladen ist, bevor Sie versuchen, Elemente zu finden, insbesondere bei Seiten mit dynamischen Inhalten. Weitere Informationen finden Sie unter Wie wartet man in Puppeteer auf das Laden einer Seite?

Weitere Möglichkeiten zum Auffinden von Elementen finden Sie unter Wie findet man Elemente mit XPath in Puppeteer?

Fazit

Die Verwendung von CSS-Selektoren mit Puppeteer macht Web-Scraping und Automatisierungsaufgaben einfach und effizient. Wenn Sie diese Methoden verstehen und nutzen, können Sie effektiv mit Webseitenelementen interagieren und wertvolle Daten extrahieren.

Gratis testen Beginnen Sie mit Google