使用 puppeteer 访问反应事件处理程序答案

【问题标题】：Using puppeteer to access react event handlers使用 puppeteer 访问反应事件处理程序
【发布时间】：2022-08-12 01:26:49
【问题描述】：

我正在尝试使用 puppeteer 来访问元素的属性。具体来说，我需要来自反应事件处理程序对象的键或 ListingId

__reactEventHandlers$(the rest is dynamically generated) > children[0] > key

页面上 devtools 的屏幕截图

到目前为止await page.$(\".RoyalTicketListPanel\"); 或await page.$(\".RoyalTicketListPanel__0\"); 第一个是 ul 元素，第二个是第一个列表项，返回元素的大量数据，但不返回事件处理程序对象。
我试过了

await page.evaluate((selector) => {
    return document.querySelector(selector);
}, selector);

同样，它只是返回未定义。
有人在这里发布了类似的问题How to access React Event Handlers with Puppeteer
但在我的情况下，答案也返回未定义。
我在这一点上很困惑，如果有人能帮助我解决这个问题，我将不胜感激。
此外，如果有人想尝试重新创建我正在做的事情，我正在使用 puppeteer 去参加 stubhub 上的活动，然后尝试从门票列表中获取门票的列表 ID。

您不能从 evaluate 返回 DOM 元素，只能返回可序列化的数据。我不认为你想要/不需要弄乱 React 事件处理程序对象，但是如果没有看到你试图抓取的页面以及你想要哪些数据，就很难说清楚（devtools 的屏幕截图并没有真正为我提供足够的上下文来提供有效的答案）。
有一些方法可以通过模拟点击从元素中获取数据，它只会大大减慢整个过程。除此之外，我在 html 中的任何地方都看不到我需要的 id。这是我正在抓取的事件的链接：stubhub.com/milwaukee-bucks-milwaukee-tickets-5-7-2022/event/…。左边的ticket list有很多数据，但是listing id是隐藏的，直到你点击一个listing。然后在 url 中更新。从我可以看到没有带有 url 的 <a> 标记，只是上面屏幕截图中的处理程序。
该数据通过 API 查询以 JSON 形式输入。我会尝试抓住它而不是通过 React 道具戳。
我有一些代码可以从他们的 API 中获取数据，但这是一个相当大的过程。他们已经设置了大量的安全性，这使得它非常乏味和耗时。我也刚刚意识到列表ID实际上在那里。直到现在我都错过了...无论如何，感谢您对此进行调查并做出回应。

标签： javascript reactjs puppeteer

【解决方案1】：

var abc=document.querySelector('.RoyalTicketListPanel');
var reactHandlerKey=Object.keys(abc).filter(function(item){
   return item.indexOf('__reactEventHandlers')>=0
});
var reactHandler=abc[reactHandlerKey[0]];
console.log(reactHandler);

【讨论】：