I need to interact with an online application written by a third-party developer, part of which is written in React. To interact with the site I'm driving Firefox via Selenium and Python. I can use traditional CSS selectors to interact with most of the site, but the parts written in React have random autogenerated class names that change every time the devs rebuild their app. There are no IDs found on any DOM elements except for the root node.
How can I get a unique CSS Selector for a DOM element, given a specific React Component in the virtual DOM?
For instance, by using React Develper Tools I see this tree:
Context.Provider
├─ Context.Provider
│ └─ gs
├─ Context.Provider
│ └─ styled.div
│ └─ styled.button
└─Iv
How can I get a unique CSS Selector for the DOM element that represents the Context.Provider > Context.Provider > styled.div > styled.button React Component?
I have seen the React Element Selector Query NodeJS library, but I need something that can run in Python, or can be interpreted from within Python and Selenium.
Here is example code from the app I'm targeting:
<div id="root">
<div class="sc-hTtwUo kyYkJm">
<div class="sc-jqUVSM bZjAcv">
<button class="sc-jSMfEi kXusAw">Foo</button>
<button class="sc-eCYdqJ ddMHci">Bar</button>
</div>
<div class="sc-kgUAyh bqLSQt">
<div class="sc-kgflAQ kGhjap">
<div class="sc-kDDrLX civFbY">
... Lots more ...
</div>
</div>
</div>
</div>
</div>
Other than the button element text, that is actual production HTML. Note that this is not deliberate obfuscation, rather this is not uncommon for React apps.
You can check for id, if ids are given to each tag then can be accessed very easily.
for instance
<div class="randon-class" id="renderingID">
This is some div rendering some content
<div>
You can access the div by #renderingID this will give you the required properties.
Usually, there is a pattern when a class name is transformed, like underscore. So you can split using that and check for given classname. For example, we are looking for .content under .body. So element will have className as body_content_<hash>. So, we can split using and check if it has content
Note: This approach is based on string manipulation. So if the classname has same delimiter, it will fail.
document
.getElementById('btnSearch')
.addEventListener('click', () => {
const searchClass = document.getElementById('txtSearchId').value
const elements = searchElements(searchClass)
highlightElement(searchClass, elements)
})
function searchElements(className) {
return document.querySelectorAll(`[class*="${className}"]`)
}
function highlightElement(className, elements) {
document
.querySelectorAll('.border')
.forEach((element) => {
element.classList.remove('border')
})
Array.from(elements).filter((element) => {
const classes = element.className.split(/[ _]/);
const matched = classes.includes(className);
if (matched) {
element.classList.add('border')
}
return matched
})
}.border {
border: 1px dashed gray;
}
div {
margin: 5px;
}<div>
<input type="text" id="txtSearchId" />
<button id="btnSearch">Search and Highlight </button>
</div>
<div class='body_1nu21'>
<div class='body_content_2nasiy'>
<div class='body_card_21dfl'>test</div>
<div class='body_card-test_2345a'>test</div>
<div class='body_card-blue_9hysh8'>test</div>
<div class='body_card_7hdsg'>test</div>
</div>
</div>You probably have to go by structure / innerText in this case. For example:
#root > div > div > button => Foo
#root > div > div > button + button => Bar