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

Question

I am trying to select an option from drop down, but unable to find the locator , i have tried many different things, but it didn't help.

 <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

You can try with by.cssContainingText() as follows:

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

This code selects the option with value 'Blue Biz (AF/KL)'

If above code does not work, please try following code:

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

In this code all selectors are separated and chained. Like this you can determine which selector actually cannot be found. Maybe it's already the first one. Other than that, this function actually returns the matching md-option element. Maybe it's not possible to click() the underlying div .

Answer 2

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

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

Answer 3

This drop down have been made using, divs and spans , so select class will not work in this case.

You will have to store every element present in drop down using list, then you can select it by the required text. Something like :

 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 4

finally i am able to click on drop down ))

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

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