為什麼在 Puppeteer 中查詢元素時 `page.evaluate()` 回傳空物件？

Puppeteer: page.evaluate querySelectorAll 困境

在Puppeteer 中使用page.evaluate() 函數時，部分使用者遇到了以下問題接收到一個空物件數組。這種令人費解的行為源自於需要從評估函數中傳回可序列化的值。

考慮以下Puppeteer 程式碼，其中的目標是從流行的社交新聞聚合網站Reddit 中提取標題元素：

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

執行後，此程式碼可能會傳回一組與問題描述中提到的類似的空物件。原因在於，雖然 DOM 元素不能直接序列化為 JSON，但 Puppeteer 仍會嘗試將它們字串化。

要解決此問題，程式碼需要從元素中提取所需的值並傳回它們採用 JSON 可序列化格式。在這種情況下，標題元素的 href 屬性會保存實際的標題連結。要取得這些，可以修改程式碼如下：

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

以上是為什麼在 Puppeteer 中查詢元素時 `page.evaluate()` 回傳空物件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！