Xpath在Devtools中可正常运行，document.evaluate返回空对象是什么原因？

page.evaluate() 执行的回调函数运行在浏览器上下文，返回值需要序列化后传递回Node.js运行环境，而DOM节点属于不可序列化的浏览器宿主对象，包含循环引用、内置方法等无法被JSON序列化的内容，因此传递回Node.js侧时会被转换为空对象{}。该问题和XPath查询逻辑无关，是Puppeteer跨上下文传值的固有规则。

Edge浏览器Devtools控制台中$x运行正常的原因是：Devtools本身运行在浏览器上下文，不存在跨环境序列化传值的需求，因此可以直接返回DOM节点对象。

• 如果你仅需要获取节点的属性、文本等内容，直接在page.evaluate回调内完成取值操作，返回可序列化的普通值即可：

const page = await browser.newPage();
await page.goto("https://news.ycombinator.com/");
let urls = await page.evaluate(() => {
    var item = document.evaluate(
        '//a[@class="storylink"]',
        document,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    ).singleNodeValue;
    // 直接返回可序列化的属性值，不要返回DOM节点本身
    return item ? item.href : null;
})
browser.close(); 

• 如果你需要在Node.js侧操作DOM节点，使用Puppeteer原生提供的XPath选择API page.$x()，该方法会返回可在Node.js环境操作的ElementHandle节点代理对象：

const page = await browser.newPage();
await page.goto("https://news.ycombinator.com/");
// 直接调用$x获取XPath匹配的元素句柄数组
let storyLinks = await page.$x('//a[@class="storylink"]');
// 示例：获取第一个链接的href属性
let firstLinkHref = await (await storyLinks[0].getProperty('href')).jsonValue();
browser.close();

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