如何在Puppeteer中通过getProperty()获取dataset成员值

问题背景 #

现有DOM元素：

<div class="myClass" data-val1="A" data-val2="B" data-val3="C" someid="1"></div>

通过Puppeteer可以正常获取className属性：

let myselector = await page.waitForSelector('div[class="myClass"]');
let myid = await (await myselector.getProperty('className')).jsonValue();

但尝试获取dataset时触发错误：

let myid = await myselector.getProperty('dataset');

错误信息：

Protocol error (DOM.describeNode): Object id doesn't reference a Node

补充细节：获取到的元素为CdpElementHandle类型，调用getProperties()也会出现相同错误，但可通过多层调用获取单个普通属性。

可行解决方法 #

1. 直接用getAttribute获取单个data属性 #

跳过dataset，直接获取目标data属性：

const element = await page.waitForSelector('div.myClass');
const val2 = await element.getAttribute('data-val2');
console.log(val2); // 输出 "B"

2. 通过evaluate在浏览器上下文处理dataset #

利用evaluate在浏览器环境内直接访问dataset，可一次性获取所有data属性或单个值：

// 获取全部dataset属性
const element = await page.waitForSelector('div.myClass');
const allData = await element.evaluate(el => ({...el.dataset}));
console.log(allData.val2); // 输出 "B"

// 直接获取单个值
const val2 = await element.evaluate(el => el.dataset.val2);

3. 适配getProperty的写法 #

如果需要保留getProperty的调用方式，可结合evaluate处理返回的对象：

const elementHandle = await page.waitForSelector('div.myClass');
const val2 = await (await elementHandle.getProperty('dataset')).evaluate(ds => ds.val2);

错误原因 #

直接调用getProperty('dataset')报错，是因为dataset是浏览器端的DOMStringMap复杂对象，Puppeteer无法直接跨上下文序列化这类对象，必须通过evaluate在浏览器内部处理后，返回字符串、普通对象等可序列化的简单类型。

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