如何通过Selenium和Java在下拉菜单中单击文本为“Phone to call with”的元素

Question

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

我无法按ID查找xpath,因为它在重新加载时不断变化。

<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')]")

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']")

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);