node.js - Protractor:同一页面有两个下拉菜单，只能从一个下拉菜单中成功选择元素

Question

我正在使用 Protractor 运行自动化脚本，其中一个页面上有两个下拉菜单，位于彼此的下方/上方。它们两个看起来相同，只是它们有不同的 ng-model 名称等。我可以从一个下拉菜单中成功选择一个元素，但不能从另一个下拉菜单中选择一个元素。为什么一个有效而另一个无效，这让我很困惑。这是下拉菜单的代码，我可以在其中选择一个元素

<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.sourceOfFunds" required="" ng-class="{submitted:invalid}">
                <option value="">Select</option>
                <option value="Savings">Deposit</option>
                <option value="Inherited">Current</option>
                <option value="Other">Savings</option>
                        </select>

element(by.model('user.sourceOfFunds')).sendKeys('Savings');

我的其他下拉菜单如下:

<select class="form-control ng-pristine ng-invalid ng-invalid-required" ng-model="user.investFigure" required="" ng-class="{submitted:invalid}">
                         <option value="">Select</option>
                         <option value="<20">Less than 20K</option>
                         <option value="20-50">20K-50K</option>
                         <option value="50-100">50K-100K</option>
                         </select>

element(by.model('user.investFigure')).sendKeys('Less than 20K');
or
element(by.model('user.investFigure')).sendKeys('20');

当我尝试从第二个下拉菜单中选择一个项目时，出现“找不到元素”。我有点不明白为什么会发生这种情况

Answer 1

使用 sendKeys 选择下拉选项对我来说似乎很奇怪，即使它有效。鉴于 @alecxe 的良好建议，也许问题在于可见性，但请尝试另一种方法，看看 sendKeys 是否是您的问题。

我每天都在多次选择的测试中使用此代码，没有出现问题。也许它对你有用......

var selectOptionByText = function(text) {
    return element(by.cssContainingText('option', text)).click();
};

如此称呼...

selectOptionByText('Less than 20');
selectOptionByText('20');