如何使用 Puppeteer 访问 React 事件处理程序答案

【问题标题】：How to access React Event Handlers with Puppeteer如何使用 Puppeteer 访问 React 事件处理程序
【发布时间】：2020-09-12 11:47:57
【问题描述】：

我不完全确定我理解我的要求，我希望有人能解释一下。我正在尝试在 NodeJS 上使用 Puppeteer 抓取网站。我已经选择了我需要的元素并访问了它的属性，但是，我无法访问我需要提取我想要的信息的属性。我想要的信息在下面的绿色框中，但是我无法通过__reactEventHandlers$kq2rgk91p6，因为它只是返回未定义。

我使用了以下选择器，它可以工作并访问所有其他属性，但不是我想要的。

    const checked = await page.evaluate(() => document.querySelector(stockSelector));

【问题讨论】：

标签： javascript node.js dom web-scraping puppeteer

【解决方案1】：

如果我理解正确（没有 URL 和难以猜测的最少可重现代码），这就是问题所在：根据文档，各种 eval 函数只能传输可序列化的数据（粗略地说，数据 JSON 可以处理，与一些补充）。您的代码返回一个不可序列化的 DOM 元素（它具有方法和循环引用）。尝试在浏览器上下文中检索数据并仅返回可序列化的数据。例如：

const data = await page.evaluate(
  selector => document.querySelector(selector)
    .__reactEventHandlers$kq2rgk91p6.children[1].props.record.Stock,
  selector,
);

如果.Stockproperty 中的数组是可序列化的，就会得到数据。

【讨论】：

发布此问题后，我发现事件处理程序后面的数字是在每个会话中随机生成的，这让我很难指定属性本身。仍在研究如何仅使用 reactEventHandler 作为参考。
如果这个属性是可枚举的，你可以尝试遍历所有自己的属性来找到一个以'reactEventHandler'开头的。