python - 通过innerHTML使用Python和Selenium定位元素

Question

我是 Selenium 新手，我正在尝试使用 Python 包编写我的第一个真正的脚本。

我正在使用:

• Windows 10
• Python 3.10.5
• Selenium 4.3.0

到目前为止，我已经能够使用不同的选择器完成我需要的所有操作，例如 ID、名称、XPATH 等。

但是我偶然发现了一个问题，我需要使用它的innerHTML 来查找特定元素。

我面临的问题是我需要找到一个 innerHTML 值为“Changed”的元素，如下面的 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>

编辑1:

注意:我不确定我使用的 HTML 术语是否正确，因此如果我错了，请纠正我。

我了解到我有一个后续问题:

如何按照描述搜索文本，但仅在“dlx-treeview-node”(大约有 100 个)中搜索？所以基本上是在这些的“子项​​”中搜索。

问题是因为我了解到在其他地方有更多带有我正在搜索的特定文本的元素。

编辑2/解决方案:

在收到答案之前，我最终找到了自己的解决方案 - 我将其写在这里，以防它可以帮助其他人。 标记为“答案”的回复是因为这最接近我所需要的。

最终的代码如下所示(首先搜索节点 - 然后在子节点中搜索特定的innerHTML):

select_filter_name = wait.until(EC.element_to_be_clickable((By.XPATH, "//dlx-treeview-node[.//div[text()='Changed']]")))

Answer 1

假设 innerText <div>元素作为 HTML DOM 中的唯一文本要定位innerHTML为已更改的元素，您可以使用以下任一 xpath基于locator strategies :

• 使用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')]")))