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:
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