Puppeteer で要素をクエリすると `page.evaluate()` が空のオブジェクトを返すのはなぜですか?

Puppeteer: page.evaluate querySelectorAll ジレンマ

Puppeteer で page.evaluate() 関数を使用すると、一部のユーザーが次の問題に遭遇しました。結果として空のオブジェクトの配列を受け取ります。この不可解な動作は、評価関数内からシリアル化可能な値を返す必要があることから生じています。

次の Puppeteer コードについて考えてみましょう。ここでの目的は、人気のソーシャル ニュース集約 Web サイト 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 シリアル化可能な形式で保存されます。この場合、title 要素の 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 中国語 Web サイトの他の関連記事を参照してください。