Mengapakah `page.evaluate()` Mengembalikan Objek Kosong Apabila Menyoal Elemen dalam Puppeteer?

Puppeteer: page.evaluate querySelectorAll Dilemma

Apabila menggunakan fungsi page.evaluate() dalam Puppeteer, sesetengah pengguna telah menghadapi isu menerima pelbagai objek kosong sebagai hasilnya. Tingkah laku yang membingungkan ini berpunca daripada keperluan untuk mengembalikan nilai boleh bersiri dari dalam fungsi penilaian.

Pertimbangkan kod Puppeteer berikut, yang matlamatnya adalah untuk mengekstrak elemen tajuk daripada tapak web pengagregatan berita sosial popular 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();

Setelah dilaksanakan, kod ini mungkin mengembalikan tatasusunan objek kosong yang serupa dengan yang dinyatakan dalam penerangan masalah. Sebabnya terletak pada fakta bahawa walaupun elemen DOM tidak boleh bersiri secara langsung kepada JSON, Puppeteer cuba untuk menyelaraskannya.

Untuk menyelesaikan isu ini, kod tersebut perlu mengekstrak nilai yang dikehendaki daripada elemen dan mengembalikannya mereka dalam format boleh bersiri JSON. Dalam kes ini, atribut href bagi elemen tajuk memegang pautan tajuk sebenar. Untuk mendapatkannya, kod boleh diubah suai seperti berikut:

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

Atas ialah kandungan terperinci Mengapakah `page.evaluate()` Mengembalikan Objek Kosong Apabila Menyoal Elemen dalam Puppeteer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!