Java Selenium访问模态框内复选框元素异常问题求助

页面包含弹出式模态窗口，窗口内展示包含复选框在内的元素列表，使用Selenium定位这些复选框时持续遇到异常。
页面HTML结构如下：

<td class="journalTabell-arkivstatus">
 <div class="hb-grid hb-grid--gapSM">
  <div data-e2e-selector="saksjournal-checkbox-style" style="visibility: visible;">
   <input type="checkbox" data-e2e-selector="saksjournal-checkbox" id="erArkivert-0">
    <div class="hb-label">
     <label data-e2e-selector="saksjournal-checkbox-lbl" for="erArkivert-0"></label>
    </div>
  </div>
   <div id="journalPostArkiverStatus-0">
    <div class="haster ng-star-inserted">
     <hb-ikon class="haster-ikon hb-ikon" id="hb-alert-circle-98ec342a-966f-4f5f-9d84-24a2ac4c271e" aria-hidden="true">
      <svg focusable="false">
       <use xlink:href="assets/sprite.symbol.svg#ikon-hb-alert-circle"></use>
      </svg>
     </hb-ikon>
     <div class="ng-star-inserted">Ikke arkivert</div>
      <div class="ng-star-inserted"><a href="#" id="lastNedArkivStatus2">Last ned journalpost</a>og kryss av når du har arkivert manuelt
     </div>
    </div>
   </div>
  </div>
 </td>

页面中存在多个同类复选框，ID依次为erArkivert-0、erArkivert-1、erArkivert-2并按序号顺延，对应页面截图如下：

现有用于定位元素的Java/Selenium代码如下：

public List<WebElement> getArkiveringsKnapper() {
    Wait().until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("[data-e2e-selector='saksjournal-poster']")));
      return driver.findElements(By.cssSelector("[data-e2e-selector='saksjournal-checkbox']"));        
}

使用上述通过cssSelector定位复选框元素的方法时，虽然可以成功找到全部3个复选框，但点击操作会抛出如下异常：

org.openqa.selenium.ElementClickInterceptedException: element click intercepted

此前遇到同类问题时，通常通过点击复选框关联的label元素而非复选框本身解决，但本次使用如下方式定位复选框关联label时：

return driver.findElements(By.cssSelector("[data-e2e-selector='saksjournal-checkbox-lbl']"));

Selenium抛出如下异常：

org.openqa.selenium.ElementNotInteractableException: element not interactable

后续尝试使用XPath通过ID前缀匹配定位复选框（因多个复选框ID后缀为-0、-1、-2等递增序号），代码如下：

return driver.findElements(By.xpath("//*[@id=\"^erArkivert-\"]"));  

该方式完全无法定位到目标元素。目前测试套件中频繁遇到此类问题：原本运行正常的代码，在Angular版本升级或其他页面结构变更后，就会出现功能失效的情况，需要可行的解决方案。

各报错场景的核心原因 #

• 复选框点击被拦截：原生input复选框被前端自定义样式层遮挡，Selenium执行点击时落点命中上层覆盖元素，没有命中实际接收点击事件的元素。
• Label元素不可交互：从HTML结构可见该label标签内部无任何文本、子元素，渲染后宽高为0，本身不具备可点击的交互区域，仅作为Angular框架渲染时预留的关联标记，实际点击事件绑定在外层自定义复选框容器上。
• XPath前缀匹配失效：写法不符合XPath语法规则，XPath中做属性前缀匹配需要调用starts-with()函数，直接写正则式的^前缀匹配语法无法被解析识别。

可直接落地的修复方案 #

1. 修正元素定位逻辑 #

• 复选框批量定位优先使用稳定的data-e2e-selector属性，不需要依赖动态ID，原有cssSelector定位逻辑可保留；如果要使用ID前缀匹配，正确的XPath写法为：

  By.xpath("//input[starts-with(@id, 'erArkivert-')]")
  

• 不要定位空的label元素，也不要直接点击被遮挡的原生input。

2. 解决点击拦截问题 #

三种适配Angular渲染场景的点击方案，按稳定性从高到低排序：

• 方案一：点击复选框的外层可交互容器，定位data-e2e-selector="saksjournal-checkbox-style"的div元素，该元素是前端实际绑定点击事件、可见可交互的层：

  public List<WebElement> getArkiveringsKnapper() {
      // 等待模态框完全渲染，除容器可见外，额外等待元素可点击状态
      Wait().until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("[data-e2e-selector='saksjournal-poster']")));
      List<WebElement> checkboxContainers = driver.findElements(By.cssSelector("[data-e2e-selector='saksjournal-checkbox-style']"));
      // 遍历等待每个元素可点击后再返回，避免Angular事件未绑定完成导致的异常
      for(WebElement cb : checkboxContainers){
          Wait().until(ExpectedConditions.elementToBeClickable(cb));
      }
      return checkboxContainers;
  }
  

• 方案二：使用JS执行点击，绕过前端遮挡层的拦截，适合不方便调整定位元素的场景：

  WebElement cb = driver.findElement(By.cssSelector("[data-e2e-selector='saksjournal-checkbox']"));
  ((JavascriptExecutor)driver).executeScript("arguments[0].click();", cb);
  

• 方案三：如果点击时被固定弹窗遮罩、全局提示条拦截，先执行滚动操作将目标元素滚动到视口安全区域，再执行点击：

  new Actions(driver).scrollToElement(cb).scrollByAmount(0,-100).click(cb).perform();
  

3. Angular项目长期适配建议 #

• 等待逻辑不要仅校验外层容器可见，Angular的DOM渲染和事件绑定是分步完成的，必须额外等待目标元素处于elementToBeClickable状态再执行操作。
• 优先使用项目自带的data-e2e-selector属性定位，这类属性是专门为自动化测试预留的，不会随样式调整、版本升级轻易变更，比class、动态ID、标签定位的稳定性高很多。
• 不要使用空标签、带随机UUID的动态生成元素做定位依据，这类元素在版本升级后结构变化概率极高。

内容的提问来源于stack exchange，提问作者user9347168