使用 Md-select 时，如何在量角器中下拉列表？

Question

我正在尝试从下拉列表中选择一个选项，但找不到定位器，我尝试了很多不同的方法，但没有帮助。

<md-select ng-model="card.type" name="type" aria-label="Select card type" ng-change="$ctrl.onCardSelectionChange(card);$ctrl.onChange(true)" cmtr-no-multiple-bahn-cards="" required="" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-valid-cmtr-no-multiple-bahn-cards ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_2162" aria-invalid="true" aria-required="true" aria-owns="select_container_2163" style=""><md-select-value class="md-select-value md-select-placeholder" id="select_value_label_2161"><span>Type</span><span class="md-select-icon" aria-hidden="true"></span></md-select-value></md-select>
<div class="md-select-menu-container md-active md-clickable" aria-hidden="false" role="presentation" id="select_container_2163" style="display: block; left: 52px; top: 137px; min-width: 295.797px; font-size: 16px;"><md-select-menu role="presentation" class="_md" style="transform-origin: 147.898px 8px 0px;"><md-content class="_md">
          <!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2166" aria-checked="true" value="blue_biz"><div class="md-text">
            Blue Biz (AF/KL)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2167" aria-checked="true" value="partner_plus_benefit_lh"><div class="md-text">
            Partner Plus Benefit (LH)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2168" aria-checked="true" value="onbusiness_ba_aa_ib"><div class="md-text">
            OnBusiness (BA/AA/IB)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2169" aria-checked="true" value="SK"><div class="md-text">
            SAS Credit (SK)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2170" aria-checked="true" value="AY"><div class="md-text">
            Finnair Plus (AY)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2171" aria-checked="true" value="DY"><div class="md-text">
            Norwegian Reward (DY)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2172" aria-checked="true" value="D8"><div class="md-text">
            Norwegian Reward (D8)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2173" aria-checked="true" value="EK"><div class="md-text">
            Skywards (EK)
          </div></md-option><!----><md-option ng-repeat="loyaltyCard in ::$ctrl.loyaltyCards" ng-value="::loyaltyCard.value" tabindex="0" class="md-ink-ripple" role="option" aria-selected="false" id="select_option_2174" aria-checked="true" value="TP"><div class="md-text">
            Air Portugal (TAP)
          </div></md-option><!---->
        </md-content></md-select-menu></div>

element( by.css('.md-select-menu-container md-option[value="blue_biz"]')).click();

Answer 1

您可以尝试使用by.cssContainingText()，如下所示：

element(by.css('.md-select-menu-container md-select-menu md-content md-option')).element(by.cssContainingText('.md-text', 'Blue Biz (AF/KL)')).click();

此代码选择值为“Blue Biz (AF/KL)”的选项

如果上面的代码不起作用，请尝试以下代码：

function clickOption(searchText) {
    let wrapper = element(by.css('.md-select-menu-container'));
    let selectMenu = wrapper.element(by.css('md-select-menu'));
    let mdContent = selectMenu.element(by.css('md-content'));
    let options = mdContent.all(by.css('md-option'));
    return options.filter(el => {
      return el.element(by.css('.md-text')).getText().then(text => text.trim() === searchText);
    }).first().click();
  }

// ...
clickOption('Blue Biz (AF/KL)');

在这段代码中，所有的选择器都是分开和链接的。像这样，您可以确定实际上找不到哪个选择器。也许它已经是第一个了。除此之外，此函数实际上返回匹配的md-option 元素。也许是不可能click()底层的div。

Answer 2

这个下拉菜单是使用 divs and spans 制作的，所以 select 类在这种情况下不起作用。

您必须使用列表存储下拉菜单中存在的每个元素，然后您可以通过所需的文本选择它。类似的东西：

 List<WebElement> allValues =   driver.findElements(By.cssSelector("div.md-text"));
     for(WebElement values : allValues) {
         if(values.getText().trim().contains("SAS Credit (SK)")) {
             values.click();
         }   
     }

Answer 3

这将在下拉列表中选择文本“SAS Credit (SK)”，您可以根据您的 DOM 替换值：

element(by.id("select_container_2163")).element(by.css("[value='SK']")).click();

Answer 4

我终于可以点击下拉菜单了））

   var dropdown = element(by.model('card.type'));
      var dropdownItems = element.all(by.repeater("loyaltyCard in ::$ctrl.loyaltyCards"));

      dropdown.click().then(() => {
          dropdownItems.get(2).click();
      });