在Puppeteer中如何从DOM元素获取完整的dataset对象

问题原因 #

Puppeteer 的 page.$eval 方法要求回调函数的返回值必须是可被JSON序列化的普通值，而DOM元素的 dataset 是DOMStringMap类型的内置对象，不属于可直接序列化的标准JSON类型，因此直接返回el.dataset时序列化结果为空对象。

解决方案 #

你只需要在页面侧的回调函数中将DOMStringMap转为普通JavaScript对象即可正确获取所有data属性：

const person = await page.$eval(".employee", (el) => {
  // 展开DOMStringMap为普通对象
  return { ...el.dataset };
});

执行后person的结构为：

{
  id: "123",
  name: "john doe"
}

兼容写法 #

如果需要适配不支持对象展开运算符的运行环境，可以使用Object.assign实现同样效果：

const person = await page.$eval(".employee", (el) => {
  return Object.assign({}, el.dataset);
});

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