Warum gibt „page.evaluate()' beim Abfragen von Elementen in Puppeteer leere Objekte zurück?

Puppeteer: page.evaluate querySelectorAll Dilemma

Bei der Verwendung der page.evaluate()-Funktion in Puppeteer sind einige Benutzer auf das Problem gestoßen Als Ergebnis wird ein Array leerer Objekte empfangen. Dieses rätselhafte Verhalten ergibt sich aus der Notwendigkeit, serialisierbare Werte innerhalb der Auswertungsfunktion zurückzugeben.

Betrachten Sie den folgenden Puppeteer-Code, dessen Ziel darin besteht, die Titelelemente aus der beliebten Social-News-Aggregations-Website Reddit zu extrahieren:

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://reddit.com/');

let list = await page.evaluate(() => {
  return Promise.resolve(Array.from(document.querySelectorAll('.title')));
});

console.log(JSON.stringify(list))

await browser.close();

Bei der Ausführung gibt dieser Code möglicherweise ein Array leerer Objekte zurück, ähnlich dem in der Problembeschreibung erwähnten. Der Grund dafür liegt in der Tatsache, dass DOM-Elemente zwar nicht direkt in JSON serialisierbar sind, Puppeteer jedoch trotzdem versucht, sie in Strings umzuwandeln.

Um dieses Problem zu beheben, muss der Code die gewünschten Werte aus den Elementen extrahieren und zurückgeben sie in einem JSON-serialisierbaren Format. In diesem Fall enthält das href-Attribut der Titelelemente die eigentlichen Titellinks. Um diese zu erhalten, kann der Code wie folgt geändert werden:

let links = await this.page.evaluate((sel) => {
        let elements = Array.from(document.querySelectorAll(sel));
        let links = elements.map(element => {
            return element.href
        })
        return links;
    }, sel);

Das obige ist der detaillierte Inhalt vonWarum gibt „page.evaluate()' beim Abfragen von Elementen in Puppeteer leere Objekte zurück?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!