如何选择使用ng-repeat实现的下拉元素

Posted 2021-05-05

my dropdown menu我在量角器自动化中选择下拉项目时遇到困难。这些下拉项似乎是从数据库中挑选出来的。我是使用量角器的angularjs应用程序自动化的新手。虽然我有自动类似的下拉项目选择，这个如果给我一个艰难的时间。拼命寻求社区的帮助。

以下是html / Angular材料代码：

<md-select style="margin: 0px;" ng-model="vm.companyProfile.rgst_address.state" ng-change="vm.getCities(vm.companyProfile.rgst_address.state)" required="" class="ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" tabindex="0" aria-disabled="false" role="listbox" aria-expanded="false" aria-multiselectable="false" id="select_39" aria-required="true" aria-invalid="true" aria-label="State">
  <md-select-value class="md-select-value md-select-placeholder" id="select_value_label_19">
    <span>State</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_40">
    <md-select-menu role="presentation" class="_md">
      <md-content class="_md"><!-- ngRepeat: state in vm.states | orderBy : 'state' -->
        <md-option ng-value="state._id" ng-repeat="state in vm.states | orderBy : 'state'" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_171" aria-checked="true" value="58c7ffd5449b7f21ec914700" style="">
          <div class="md-text ng-binding">Andaman and Nicobar Islands</div>
        </md-option><!-- end ngRepeat: state in vm.states | orderBy : 'state' --> 
        <md-option ng-value="state._id" ng-repeat="state in vm.states | orderBy : 'state'" tabindex="0" class="ng-scope md-ink-ripple" role="option" aria-selected="false" id="select_option_172" aria-checked="true" value="58c7ffd5449b7f21ec914701" style="">
          <div class="md-text ng-binding">Andhra Pradesh</div>
        </md-option><!-- end ngRepeat: state in vm.states | orderBy : 'state' -->

        //etc...

      </md-content>
    </md-select-menu>
  </div>
</md-select>

以下是我尝试在量角器中编码的方法：

browser.findElement(by.model('vm.companyProfile.rgst_address.state')).click();
    browser.driver.sleep(5000);
    browser.findElements(by.repeater('state in vm.states')).then(function (item1) {
        item1[2].click();
        });

答案

import { element, by } from 'protractor';

var dropdown = element(by.model('vm.companyProfile.rgst_address.state'));
var dropdownItems = element.all(by.repeater("state in vm.states | orderBy : 'state'"));

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

另一答案

在你的情况下，我认为你不需要by.repeater，因为你不想对所有列出的元素做一些事情，并且你没有返回一个复杂的对象（只有一个列表值）。因此，您可能只想从生成的列表中选择一个特定元素（并且您不需要所有重复值的完整集合）。

因此，选择你的选项听起来你可以使用选择器cssContainingText()。 （注意：如果你总是想要选择第三个值，或者如果你想计算数值，那么by.repeater就是合适的）。

至于你的错误：element not visible意味着你的下拉选项很可能尚未打开（因此你想要选择的选项不可见）。

因此，您可能需要首先单击下拉字段才能打开下拉选项（就像您作为真实用户一样）

总而言之：

//open dropdown selection
element(by.model('vm.companyProfile.rgst_address.state')).click();
//select dropdown value
element(by.cssContainingText('md-option[ng-value="state._id"] div', 'optionYouWantToSelect').click();

//as bonus the use with by.repeater - always select 2nd value
element(by.repeater('state in vm.states').row(1)).click();

另一答案

您也可以使用单行命令

element（by.xpath（'* // [@ id =“select_39”] // md-option [contains（text（），“Andaman and Nicobar Islands”）]'））;

注意：每次更改div时，xpath都会有所不同。但由于id保持不变，我认为这将是稳定的。