I am currently navigating my way through Selenium and attempting to create my inaugural script using the Python package.
My setup includes:
- Operating System: Windows 10
- Python Version: 3.10.5
- Selenium Version: 4.3.0
Up until now, I have managed to accomplish all tasks utilizing various selectors like ID, name, XPATH, and so on.
However, I have hit a roadblock where I must locate a specific element based on its innerHTML.
The challenge lies in identifying an element with the innerHTML-value of "Changed" within the provided HTML snippet below.
The primary hurdle is that this element lacks a unique identifier such as ID or name, and there are multiple occurrences of "dlx-treeview-node" objects/elements.
Another obstacle is that XPATH is unsuitable due to the element's varying position on the webpage, which results in different numbers of "dlx-treeview-node"-elements, leading to incorrect selections.
To validate that it's indeed innerHTML and not innerText, I successfully extracted the name using the given XPATH, "get_attribute," and console output. This information changes based on the webpage's location.
I would greatly appreciate any guidance offered to overcome this predicament while enhancing my knowledge of leveraging Selenium with Python.
Here is the section of code I'm working with:
select_filter_name = wait.until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/app-root/dlx-select-filter-attribute-dialog/dlx-dialog-window/div/div[2]/div/div/div[5]/div/div/dlx-view-column-selector-component/div[1]/dlx-treeview/div/dlx-treeview-nodes/div/dlx-treeview-nodes/div/dlx-treeview-node[16]/div/div/div/div[2]/div/dlx-text-truncater/div")))
filter_name = select_filter_name.get_attribute("innerHTML")
print(filter_name)
Provided HTML excerpt:
<dlx-treeview-node _nghost-nrk-c188="" class="ng-star-inserted">
<div _ngcontent-nrk-c188="" dlx-droppable="" dlx-draggable="" dlx-file-drop="" class="d-flex flex-column position-relative dlx-hover on-hover-show-expandable-menu bg-control-active bg-control-hover">
<div _ngcontent-nrk-c188="" class="d-flex flex-row ml-2">
<div _ngcontent-nrk-c188="" class="d-flex flex-row text-nowrap expand-horizontal" style="padding-left: 15px;">
<!---->
<div _ngcontent-nrk-c188="" class="d-flex align-self-center ng-star-inserted" style="min-width: 16px; margin-left: 3px;">
<!---->
</div>
<!---->
<div _ngcontent-nrk-c188="" class="d-flex flex-1 flex-no-overflow-x" style="padding: 3.5px 0px;">
<div class="d-flex flex-row justify-content-start flex-no-overflow-x align-items-center expand-horizontal ng-star-inserted">
<!---->
<dlx-text-truncater class="overflow-hidden d-flex flex-no-overflow-x ng-star-inserted">
<div class="text-truncate expand-horizontal ng-star-inserted">Changed</div>
<!---->
<!---->
</dlx-text-truncater>
<!---->
</div>
<!---->
<!---->
<!---->
</div>
</div>
<!---->
<!---->
</div>
</div>
<!---->
<dlx-attachment-content _ngcontent-nrk-c188="">
<div style="position: fixed; z-index: 10001; left: -10000px; top: -10000px; pointer-events: auto;">
<!---->
<!---->
</div>
</dlx-attachment-content>
</dlx-treeview-node>Edit-1:
NOTE: Unsure if my HTML terminologies are accurate, corrections are welcome.
A follow-up question has surfaced:
How can I search for the specified text solely within the "dlx-treeview-node" elements (approximately 100)? Essentially targeting the "children" within these nodes specifically.
This query arises from discovering other elements containing the same text elsewhere.
Edit-2/Solution:
Prior to receiving responses, I managed to devise an answer myself – documenting it here for potential assistance to others. The response marked as "answer" was nearest to what I required.
The final code came together as follows (initially searching nodes then examining children for the targeted innerHTML):
select_filter_name = wait.until(EC.element_to_be_clickable((By.XPATH, "//dlx-treeview-node[.//div[text()='Changed']]")))