0

I am trying to use puppeteer to access properties of an element. Specifically I need the key or listingId from the react event handler object

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

screenshot from devtools on page properties tab on element .RoyalTicketList__container

So far await page.$(".RoyalTicketListPanel"); or await page.$(".RoyalTicketListPanel__0"); the first being a ul element and the second being the first list item, returns a lot of data for the element, but not the event handler object.
I've tried

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

as well and it just returns undefined.
Someone posted a similar question here How to access React Event Handlers with Puppeteer
But the answer also returns undefined in my case.
I'm stumped at this point, if anyone can help me out with this it would be greatly appreciated.
Also, if anyone wants to try to recreate what I'm doing, I'm using puppeteer to go to an event on stubhub then trying to get the ticket's listing ids from the ticket list.

tniles320
  • 33
  • 6
  • 1
    You can't return DOM elements from `evaluate`, only serializable data. I don't think you want to/need to mess with React event handler objects, but it's hard to tell without seeing the page you're trying to scrape and which data you want exactly (the screenshot of the devtools doesn't really provide enough context for me to offer a working answer). – ggorlen May 05 '22 at 17:22
  • There's ways I can get the data from an element by simulating clicks, it just slows the whole process down a lot. Other than that, I don't see the id's I need anywhere in the html. Here's a link to an event that I'm scraping: https://www.stubhub.com/milwaukee-bucks-milwaukee-tickets-5-7-2022/event/105203058/?sort=price%20asc%2Cvalue%20desc&sortKey=lowestPrice. The ticket list on the left has a lot of data, but the listing id is hidden until you click on a listing. Then it is updated in the url. From what I can see there is no tag with the url, just the handler from the screenshot above. – tniles320 May 05 '22 at 19:18
  • 1
    That data is coming in through an API query as JSON. I'd try to grab that rather than poking through React props. – ggorlen May 05 '22 at 19:42
  • I have some code that can get data from their API, but it's quite a process. They've set up a good amount of security that's makes it pretty tedious and time consuming. I also just realized that the listing id's are in fact in there. I missed that until just now... Regardless, thanks for looking into this and responding. – tniles320 May 05 '22 at 23:00

1 Answers1

0
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);
Mahesh Kumar Surapaneni
  • 11
  • 2