java - 在角度站点中使用 xpath 时找不到元素

Question

我有一个有角度的网站，我正在尝试使用 Selenium/Java 使其自动化。我知道 protractor 对于有角度的网站来说更容易，但我希望使用 Selenium 。

我一直在 xpath 中使用“contains”关键字来查找元素，因为没有可用的唯一 ID。

我遇到问题的元素在所附图像中用红色圈出。当我使用 xpath 搜索控制台时(如图所示)，该元素会突出显示。但是当我在代码中使用它时，我收到元素未找到错误。

有没有更好的方法来处理这个问题以及为什么我收到错误。我已经有了等待条件。

HTML 代码:

<div class="status-selector ng-isolate-scope" fm-select="" 
     fm-select-options="::IssueDetailsCtrl.issue.allowedIssueStatuses" 
     fm-disabled="!IssueDetailsCtrl.issue.permissions.editStatus" 
     fm-model="IssueDetailsCtrl.issue.status" 
     fm-change="IssueDetailsCtrl.updateStatus()">
  <div class="fm-select undefined selected" ng-class="getStyle()" tabindex="" 
       ng-keyup="handleKeys($event)" ng-keydown="handleKeyDown($event)" style="">
    <div class="fm-select-title" ng-click="toggleVisibility()" 
         ng-class="{&quot;fm-select-title-highlighted&quot;: 
                   isOpen, &quot;fm-select-disabled&quot;: fmDisabled }">
      <div class="selected-item-icon" ng-class="selectedOption.imageClass"></div>
      <span class="ng-binding">Open</span>
    </div>
    <!-- ngIf: isOpen -->
  </div>
</div>
<div class="fm-select undefined selected" ng-class="getStyle()" tabindex="" 
     ng-keyup="handleKeys($event)" ng-keydown="handleKeyDown($event)" style="">
  <div class="fm-select-title" ng-click="toggleVisibility()" 
       ng-class="{&quot;fm-select-title-highlighted&quot;: 
                 isOpen, &quot;fm-select-disabled&quot;: fmDisabled }">
    <div class="selected-item-icon" ng-class="selectedOption.imageClass"></div>
    <span class="ng-binding">Open</span>
  </div>
  <!-- ngIf: isOpen -->
</div>
<div class="fm-select-title" ng-click="toggleVisibility()" 
     ng-class="{&quot;fm-select-title-highlighted&quot;: 
               isOpen, &quot;fm-select-disabled&quot;: fmDisabled }">
  <div class="selected-item-icon" ng-class="selectedOption.imageClass"></div>
  <span class="ng-binding">Open</span>
</div>
<div class="selected-item-icon" ng-class="selectedOption.imageClass"></div>
<span class="ng-binding">Open</span>

等待条件:

 public void waitAndClickElement(WebElement element) throws InterruptedException {
        boolean clicked = false;
        int attempts = 0;
        while (!clicked && attempts < 20) {
            try {
                this.wait.until(ExpectedConditions.elementToBeClickable(element)).click();
                System.out.println("Successfully clicked on the WebElement: " + "<" + element.toString() + ">");
                clicked = true;
            } catch (Exception e) {
                System.out.println("Unable to wait and click on WebElement, Exception: " + e.getMessage());
                Assert.fail("Unable to wait and click on the WebElement, using locator: " + "<" + element.toString() + ">");
            }
            attempts++;
        }
    }

Answer 1

您的应用程序是 Angular 应用程序，只有当 Angular ng-if 满足某些条件时，按钮才会动态附加到 DOM 树，因此需要等待 Angular 在附加之前编译按钮的 HTML到 DOM 树。

WebDriverWait wait = new WebDriverWait(driver, 20);

WebElement ele = wait.until(ExpectedConditions.presenceOfElementLocated(
    By.xpath("//div/span[text()='Open']"))
);

ele.click();