Page.evaluate() returns 未定义，但语句在 Chrome devTools 中有效

Question

我正在尝试获取 Bing 图片搜索中所有图片的 src 值以查找搜索词。我正在为此使用 puppeteer。我写了一个选择器来抓取每个图像标签，它在 Chrome DevTools 中工作。但是，当我在代码中编写它时它不起作用-

const puppeteer = require("puppeteer");

(async () => {
    try{
        let url = `https://www.bing.com/images/search?q=cannabis`
        const browser = await puppeteer.launch({headless: false})
        const page = await browser.newPage()
        await page.goto(url)
        await page.waitForSelector("ul.dgControl_list li img.mimg")

        console.log(await page.evaluate(() => {
            Array.from(document.querySelectorAll("ul.dgControl_list>li img.mimg"), img => img.src)
        }))
    } catch(err){
        console.log("error - " + err)
    }
})()

我在 devTools 中将输出作为一个包含 10 个项目的数组的对象获得，但是当我通过代码在控制台中运行它时，它是未定义的。我如何读取这个对象？

Answer 1

您没有 return 从 page.evaluate 通话中获取任何数据。要 return 您必须使用 return 语句或使用短语法（如下所述）的数据：

console.log(await page.evaluate(() => {
    return Array.from(document.querySelectorAll("ul.dgControl_list>li img.mimg"), img => img.src)
}))

解释：箭头函数

箭头函数有两种写法。一种是短语法，你可以这样使用：

const func = () => 1; // func() will simply return 1

你只能在其中放置一个语句（虽然它可能会调用其他语句）。或者，您可以使用长格式：

const func = () => { return 1; }; // Same function as above

你可以在这个函数中使用变量声明和任何类型的代码（就像在正常的 function() { ... } 中一样，但是这次你必须使用 return 到 return 一个值.

因此，作为替代方案，您也可以这样写（短语法）：

console.log(await page.evaluate(
    () => Array.from(document.querySelectorAll("ul.dgControl_list>li img.mimg"), img => img.src)
))

Page.evaluate() returns 未定义，但语句在 Chrome devTools 中有效

Page.evaluate() returns undefined, but statement works in Chrome devTools

node.js

puppeteer

解释：箭头函数