элемент не найден при использовании xpath на угловом сайте

Question

У меня есть угловой сайт, и я пытаюсь автоматизировать его с помощью Selenium / Java.Я знаю, что транспортир проще для угловых сайтов, но я хотел бы использовать селен.

Я использовал ключевое слово «содержит» в xpath, чтобы найти элементы, поскольку нет уникальных доступных идентификаторов.

Элемент, с которым я столкнулся, находится на прикрепленном изображении, обведенном красным.Когда я ищу консоль с 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 App, и кнопка динамически присоединяется к дереву DOM, только когда определенное условие удовлетворяется Angular ng-if, поэтому необходимо подождать, пока Angular скомпилирует HTML-код кнопки, прежде чем она будет присоединена к дереву DOM.

WebDriverWait wait = new WebDriverWait(driver, 20);

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

ele.click();

Answer 2

Я бы предложил вам использовать явное ожидание в этом случае:

new WebDriver(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//span[@class='ng-binding' and text()='Open']"))).click();  

или :

Вы также можете использовать этот Xpath:

//div[@class='selected-item-icon']/following-sibling::span[text()='Open' and @class='ng-binding']