通過 innerHTML 使用 Python 和 Selenium 定位元素

Question

我是 Selenium 的新手，我正在嘗試使用 Python 包編寫我的第一個真正的腳本。

我在用着：

• 視窗 10
• Python 3.10.5
• 硒 4.3.0

到目前為止，我已經能夠使用不同的選擇器完成我需要的一切，比如 ID、名稱、XPATH 等。

但是，我偶然發現了一個問題，我需要使用它的 innerHTML 來查找特定元素。

我面臨的問題是我需要找到一個具有“已更改”的 innerHTML 值的元素，如下面的 HTML 所示。

我面臨的第一個挑戰是該元素沒有唯一的 ID、名稱或其他方式來識別它，並且有很多“dlx-treeview-node”的對象/元素。 第二個挑戰是 XPATH 不起作用，因為元素會根據您在網站上的位置改變位置（“dlx-treeview-node”元素的數量會發生變化），所以如果我使用 XPATH，我會弄錯元素取決於我在哪里。

我可以通過使用下面的 XPATH、“get_attribute”並打印到控制台成功地獲取名稱，這就是為什么我知道它是 innerHTML 而不是 innerText，但如上所述，這將根據我在網站上的位置而改變。

我非常感謝我能得到任何幫助來解決這個挑戰並了解更多關於在 Python 中使用 Selenium 的信息。

代碼試驗：

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)

HTML：

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

Answer 1

只需在您的頁面上運行此代碼，您將獲得一個包含所有元素的數組，這些元素是一個值為Changed的div

# Define XPath Function (used in the next step)
driver.execute_script("function getXPathOfElement(elt) {var path = "";for (; elt && elt.nodeType == 1; elt = elt.parentNode) { idx = getElementIdx(elt); xname = elt.tagName; if (idx > 1) xname += "[" + idx + "]"; path = "/" + xname + path;} return path;}")

# Get all XPaths for all nodes which are a div with the text of "changed"
xpaths = driver.execute_script("return Array.from(document.querySelectorAll(\"div\")).find(el => el.textContent.includes('Changed')).map((node)=>{ return getXPathOfElement(node)});');

提示

• 檢查xpaths長度是否大於或等於 1
• 索引xpaths ，例如xpaths[0]或執行循環以進行更改
• 您現在將擁有一個可以像普通選擇器一樣使用的 xpath。

祝你好運

Answer 2

假設<div>元素的innerText是HTML DOM中的唯一文本，以定位帶有已更改的 innerHTML 的元素，您可以使用以下任一基於xpath的定位器策略：

• 使用xpath和text() ：

   element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[text()='Changed']")))

• 使用xpath和contains() ：

   element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[contains(., 'Changed')]")))