0

I'm using Python on windows and I want to get a list of elements shown in a web site made with React.

(I explained it better here: this url: https://app.teritori.com/collection/tori-tori1999u8suptza3rtxwk7lspve02m406xe7l622erg3np3aq05gawxsrh9g0p/)

So I want to get the 'Props' of the html DOM component with class: css-1dbjc4n r-1awozwy r-13qz1uu

On the DOM Properties, I can see this: enter image description here

I want to get that element: __reactProps$42ovhe6scao on Python, so I can access and read __reactProps$42ovhe6scao.children.props.data

I get __reactProps$42ovhe6scao on reactElementKey, but from there, the rest of my code is not working.

And I have made my own functions to find the 'props' component inside of html element. I get the name of that component, but I don't know how to access him. Once I have his name, I got 'None' using element[name] on Javascript and also using element.get_property(name) with Selenium

This is my code:

from selenium import webdriver
from selenium.webdriver.common.by import By

import time
from pprint import pprint

# Javascript code to find a React Element
jsGetKeys="""
let getKeys = function (obj) {
  let keysArr = [];
  for (var key in obj) {
    keysArr.push(key);
  }
  return keysArr;
}
"""

jsGetReactPropComponent="""
window.getReactPropComponent = function(el, key) {
      return el[key];
    }
;"""

jsFindReactPropKey="""
window.findReactPropKey = function(el) {
  keys=getKeys(el);
  for (const key in el) {
    if (key.startsWith('__reactProps$')) {
      console.log('Found '+key);
      return key;
    }
  }
  return null;
};"""


chrome_options = webdriver.ChromeOptions()
chrome_options.headless = True
driver = webdriver.Chrome(options=chrome_options)

driver.get('https://app.teritori.com/collection/tori-tori1999u8suptza3rtxwk7lspve02m406xe7l622erg3np3aq05gawxsrh9g0p/')
time.sleep(3)

element=driver.find_elements(By.XPATH,"//div[contains(@class, 'r-1sncvnh') and contains(@class, 'r-13qz1uu') and not(contains(@style, 'touch-action'))]")[0]

# reactPropKey
reactElementKey=driver.execute_script(jsGetKeys + jsFindReactPropKey + 'return findReactPropKey(arguments[0]);', element)
print(f'I got {reactElementKey} Prop Element Key')

# reactElement
reactElement=driver.execute_script(jsGetKeys + jsFindReactPropKey + jsGetReactPropComponent + 'return getReactPropComponent(arguments[0]);', element)
print('This is the reactElement returned by Javascript:')
pprint(reactElement) # I got 'None' here

print('This is the reactElement returned by get_property:')
pprint(element.get_property(reactElementKey)) # I got 'None' here

Thank you to Venryx whose code I adapted to Python: React - getting a component from a DOM element for debugging

I also checked this question that is asking the same that I'm looking for: How to access React Event Handlers with Puppeteer but I don't know how to translate the given solutions to Python

Juan Antonio Tubío
  • 1,172
  • 14
  • 28
  • I don't think you can. I believe selenium only see's the web elements not components. I could be wrong but that was my understanding. – Aaron Cloud Nov 28 '22 at 14:55
  • I hope you're wrong. But even if you're right, they should be a way to access to __reactProps$42ovhe6scao.children.props.data from Javascript and return that array to Python – Juan Antonio Tubío Nov 28 '22 at 15:41

0 Answers0