javascript - 使用Md-select时，如何在 Protractor 中下拉列表？

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。