如何通过Selenium和Java在<md-select>下拉列表中单击文本为“ Phone to call with”的元素

Question

我正在尝试使类型下拉的应用程序自动化。 我已经尝试了如下所示的所有可能组合，但无法从下拉列表中选择一个元素。

driver.findElement(By.xpath("//span[@aria-label=\"Phone to call with\"]"));

我无法通过ID查找xpath，因为它随着重新加载而不断变化。

下面是html代码。我将如何实现同样的目标？

<md-select ng-model="ctrl.selectedLinkedPhone" class="ng-pristine ng-valid ng-empty ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_26" aria-invalid="false" aria-label="
        Phone to call with
      " style=""><md-select-value class="md-select-value md-select-placeholder" id="select_value_label_25"><span>
        Phone to call with
      </span><span class="md-select-icon" aria-hidden="true"></span></md-select-value><div class="md-select-menu-container" aria-hidden="true" role="presentation" id="select_container_27"><md-select-menu role="presentation" class="_md"><md-content class="_md">
        <!----><md-option ng-disabled="!ctrl.isLinkedPhoneCurrentlyVerified(linkedPhone)" ng-repeat="linkedPhone in ctrl.getLinkedPhones()" ng-value="linkedPhone" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_29" aria-checked="true" aria-disabled="false" value="[object Object]" style=""><div class="md-text">
          Phone 1
        </div></md-option><!----><md-option ng-disabled="!ctrl.isLinkedPhoneCurrentlyVerified(linkedPhone)" ng-repeat="linkedPhone in ctrl.getLinkedPhones()" ng-value="linkedPhone" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_30" aria-checked="true" aria-disabled="false" value="[object Object]" style=""><div class="md-text">
          Phone 2
        </div></md-option><!----><md-option ng-disabled="!ctrl.isLinkedPhoneCurrentlyVerified(linkedPhone)" ng-repeat="linkedPhone in ctrl.getLinkedPhones()" ng-value="linkedPhone" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_31" aria-checked="true" aria-disabled="false" value="[object Object]" style=""><div class="md-text">
          Hangouts
        </div></md-option><!---->
      </md-content></md-select-menu></div></md-select>

Answer 1

此xpath适用于您的html：

By.xpath("//md-select[normalize-space(@aria-label='Phone to call with')]")

或者您可以使用ccs选择器：

By.cssSelector("md-select[aria-label*='Phone to call with']")

要查找选项，例如带有“ Hangouts”文字，您可以使用：

By.xpath("//md-select[normalize-space(@aria-label='Phone to call with')]//md-option[normalize-space(.)='Hangouts']")

要选择下拉菜单，可以使用下面的Action类或2个方法，实现所需的等待： 1.假设您没有打开下拉菜单的特殊按钮，然后单击下拉列表将其打开。 2.使用javascript：

WebElement selectMenu = driver.findElement(By.xpath("//md-select[normalize-space(@aria-label='Phone to call with')]"));
WebElement option = driver.findElement(By.xpath("//md-select[normalize-space(@aria-label='Phone to call with')]//md-option[normalize-space(.)='Hangouts']"));

//1. first click to open dropdown, second click on option
selectMenu.click();
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(option)).click();

//2. select using javascript
((JavascriptExecutor) driver).executeScript("arguments[0].click();", option);

Answer 2

尝试在xpath下使用它：

driver.findElement(By.xpath("//span[contains(@aria-label,Phone to call with']"));

Answer 3

如果该下拉列表是通过div标签开发的，那么我们必须使用Action Class方法使它自动化。如果可能的话，您可以发送该页面的网址，我将发送解决方案。

Answer 4

要单击文本为电话进行呼叫的元素，您需要诱使 WebDriverWait 使所需的元素可点击可以使用以下解决方案：

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//md-select[@class='ng-pristine ng-valid ng-empty ng-touched']/md-select-value[@class='md-select-value md-select-placeholder' and starts-with(@id,'select_value_label_')]//span[contains(.,'Phone to call with')]"))).click();