如何在Puppeteer中不使用evaluate方法获取dataset属性？

原因 #

你直接对XPath查询得到的属性节点调用jsonValue()得到空对象，是因为Puppeteer的序列化逻辑和Chrome控制台的友好输出逻辑不同：你查询得到的是DOM的Attr类型节点，它的实际属性值存储在自身的value属性下，直接序列化整个Attr节点就会得到空对象。

解决方法 #

以下两种方案都不需要手动调用evaluate方法：

方案1：直接读取属性节点的value #

const attrHandle = await page.waitForXPath('//*[@data-color]/@data-color');
// 先读取Attr节点的value属性，再序列化
const color = await (await attrHandle.getProperty('value')).jsonValue();
console.log(color); // 输出 red

方案2：先获取元素再读取dataset属性 #

const eleHandle = await page.waitForXPath('//*[@data-color]');
// 先拿到元素的dataset对象，再读取对应的color属性
const color = await (await (await eleHandle.getProperty('dataset')).getProperty('color')).jsonValue();
console.log(color); // 输出 red

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