XPath：元素在 DOM 中有点缺失，但仍然存在，或者类似的东西答案

【问题标题】：XPath: element is kind of missing from the DOM but still exist, or something like thatXPath：元素在 DOM 中有点缺失，但仍然存在，或者类似的东西
【发布时间】：2023-04-01 20:19:02
【问题描述】：

我尝试使用 XPath 检查（单击）此复选框，但到目前为止我的所有尝试都失败了，因为他们单击了图例中的链接 (Lorem ipsum)

HTML 源代码：

<div class="input-outer checkbox">
   <div class="section-head sec-head2">
      <!---->
      <div class="pull-left">Tick this box</div>
      <!----><!---->
      <p aria-label="required" class="requiredAsteric">*</p>
   </div>
   <div class="input-validation">
      <div class="input-icon-outer">
         <!---->
         <!---->
         <!---->
         <!---->
         <input class="filled-in ng-untouched ng-pristine ng-invalid" type="checkbox" aria-label="Acceptera villkor" aria-required="true" aria-describedby="err_icon_prefix2_1" id="icon_prefix2_1"><!---->
         <label class="leadform-checkbox" tabindex="0" for="icon_prefix2_1">
            <div>
               <p>Lorem ipsum dolor sit amet, consectetur  <a href="https://www.google.com" target="_blank">adipiscing elit</a> adipiscing elit , sed do <a href="https://www.stackexchange.com" target="_blank">eiusmod tempor </a> incididunt ut labore et dolore magna aliqua.</p>
            </div>
         </label>
         <!---->
      </div>
   </div>
</div>

到目前为止，我已经尝试了这三个 XPath，但都没有成功。

//label[@class='leadform-checkbox']/div";
//input[@aria-label='Tick this box']";
(//div[@class='input-icon-outer'])[3]";

如果我正确理解了 HTML（我可能没有正确理解），他们不会使用 HTML 中内置的复选框功能，而是创建了一个 CSS 类，其中包含一个看起来像复选框的图形元素。现在，当我向使用此样式的 div 发送点击时，点击最终会出现在 div 的文本内容上，而不是复选框上，然后点击那里找到的链接。

我理解正确吗？如何解决这个问题/将点击指向广场？

编辑：此“对话框”中还有另外两个文本字段。使用这两个 XPath 访问它们没有问题：

String xpText = "//input[@aria-label='text']";
String xpNumber = "//input[@aria-label='number']";

所有三个元素都在同一个iframe 中。在这些步骤之前，我在main content 和不同的iframes 之间执行了几次切换。

heading 2.2 在上面 HTML 源代码的屏幕截图顶部可见的 <div class="input-outer"> 中，所以我很确定我在正确的框架/内容中。此外，我可以访问属于该复选框的文本中的链接。

包括下面的整个对话框，以便更容易获得概览。

【问题讨论】：

你能把HTML放在问题里吗——一张图很难调试
当你说“他们不使用内置在 HTML 中的复选框功能，而是创建了一个 CSS 类，其中包含一个看起来像复选框的图形元素。” - 他们这样做，请注意上面您拥有的屏幕截图的中心<input ... type="checkbox" ... - 这就是您要点击的内容
@RichEdwards 我试过点击它，但它只返回org.openqa.selenium.ElementNotInteractableException: element not interactable。
@Bravo 已更新源代码。
是否存在frame 或iframe？ - 看起来//input[@aria-label="Acceptera villkor"] 可以工作

标签： javascript selenium selenium-webdriver xpath webdriverwait

【解决方案1】：

//input[@aria-label='Tick this box'] 应该可以解决问题。

【讨论】：

不，已经尝试过了（我忘了在问题中包含它）。返回org.openqa.selenium.ElementNotInteractableException: element not interactable。
@hensti ，尝试定义是否有几个这样的输入节点。或者试试 XPATH (//input[@aria-label='Tick this box'])[2]
只有一个，但是当我点击它时，它会点击文本中的链接，而不是复选框：-(
奇怪的是，如果我使用您上面评论中的 XPath，而不是发送 click() 而是发送 isSelected()，我会得到正确的响应。不知何故，click 似乎将文本链接优先于复选框..？
@hensti 这很奇怪 :) 也许你应该尝试通过 JavaScriptExecutor 点击它？

【解决方案2】：

当您检查元素时，请确保您使用的是 HTML 中突出显示所需元素的行。如果它不起作用，请确保页面上不存在

【讨论】：

【解决方案3】：

对于复选框上的click()，您可以使用以下基于Locator Strategies 的xpath 之一：

使用<label>标签属性：

driver.find_element_by_xpath("//label[@for='icon_prefix2_1']").click()

使用<p>标签属性：

driver.find_element_by_xpath("//label[@class='leadform-checkbox'][.//p[contains(., 'Lorem ipsum dolor sit amet')]]//preceding::input[1]").click()

使用<input>标签属性：

driver.find_element_by_xpath("//input[@class='filled-in ng-untouched ng-pristine ng-invalid' and @aria-label='Acceptera villkor']").click()

理想情况下，要单击需要为element_to_be_clickable() 诱导WebDriverWait 的元素，您可以使用以下基于Locator Strategies 的xpath 之一：

使用<label>标签属性：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//label[@for='icon_prefix2_1']"))).click()

使用<p>标签属性：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//label[@class='leadform-checkbox'][.//p[contains(., 'Lorem ipsum dolor sit amet')]]//preceding::input[1]"))).click()

使用<input>标签属性：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='filled-in ng-untouched ng-pristine ng-invalid' and @aria-label='Acceptera villkor']"))).click()

注意：您必须添加以下导入：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

【讨论】：