使用Puppeteer获取div内span元素时返回undefined的问题排查

你的问题核心是Puppeteer的evaluate无法直接将浏览器上下文的DOM元素序列化传递到Node.js上下文，所以返回的DOM元素数组会被转为undefined。

原因说明 #

evaluate函数运行在浏览器的页面上下文中，你尝试返回的Array.from(document.querySelectorAll('span'))是DOM元素集合。这些元素属于浏览器环境，无法被序列化成Node.js能接收的数据，Puppeteer会自动将无法序列化的值转为undefined。

修正方案 #

根据你的需求，有两种常用解决方式：

方式1：返回DOM元素的具体数据（而非元素本身）

如果你需要的是span里的文本、属性等信息，直接在evaluate里提取后返回：

const getFruitElements = async () => {
    const fruits = await page.$$(`[aria-label="Banana Apple"]`);
    for (let fruit of fruits) {
        const spanData = await fruit.evaluate((el) => {
            // 提取需要的信息，比如文本内容或属性
            return Array.from(el.querySelectorAll('span')).map(span => ({
                text: span.textContent,
                className: span.className
            }));
        });
        console.log(spanData); // 现在会输出span的具体数据
    }
}

注意这里给evaluate传了el参数，对应外部的fruit元素句柄，这样在浏览器上下文里可以直接基于该元素查询子元素，避免全局范围的查询。

方式2：使用元素句柄的$$方法获取子元素

如果你需要操作span元素的句柄（比如点击、修改），可以直接用Puppeteer元素句柄的$$方法，它会返回对应子元素的句柄数组：

const getFruitElements = async () => {
    const fruits = await page.$$(`[aria-label="Banana Apple"]`);
    for (let fruit of fruits) {
        const spanElements = await fruit.$$('span');
        console.log(spanElements.length); // 输出span的数量
        // 可以对每个span句柄进行操作，比如获取文本
        for (let span of spanElements) {
            const text = await span.evaluate(el => el.textContent);
            console.log(text);
        }
    }
}

内容的提问来源于stack exchange，提问作者ololo