Question

我正在尝试让我的量角器E2E测试与下拉菜单进行交互。

在我正在测试的页面中，我们有一个国家/地区的下拉列表。下拉列表包含4个可选选项“？”这是空白，然后是美国，英国和加拿大。

我显然没有在我的PO文件中正确调用元素，因为参数化不起作用。测试“通过”，但当你看到被驱动的东西时，被选中的国家是“？”一个（默认）。所以测试是导航到页面，选择元素而不是实际点击我想要的选项。

据我所知，我需要以某种方式获取从spec文件输入到元素的参数化选项，但是我不确定这是否可行。

我错过了什么/做错了什么？

规格文件：

campaignPO.clickCountryLocation('US');

PageObject文件：

this.countryType = by.css('select[ng-model="country"]');

this.clickCountryLocation = function(button) {
       element(this.countryType).click(button);
};

这是元素正在使用：

<select class="form-control input-sm ng-pristine ng-invalid ng-invalid-required" 
        ng-size="11" 
        ng-model="country" 
        name="country" 
        ng-options="opt.value as opt.label for opt in countries" 
        ng-change="updateCountry()" 
        required="">
<option value="?" selected="selected" label=""></option>
<option value="0" label="US">US</option>
<option value="1" label="UK">UK</option>
<option value="2" label="Canada">Canada</option>
</select>

Answer 1

我在这里建议使用 select-option抽象：

Select -> option abstraction

使用示例：

var SelectWrapper  = require('select-wrapper');
var mySelect = new SelectWrapper(by.name('country'));

mySelect.selectByText('US');

Answer 2

首先，您可以使用

简化select定位器

var selectEl = element(by.model('country'));

我不确定属性css是否运行良好。要选择选项：

var optionEl = selectEl.element(by.cssContainingText('option', 'US'));
optionEl.click();

如果您只是想在不选择值的情况下打开选择，请不要这样做。选择HTML组件，您不想以这种方式测试它们。即使在javascript中使用它们也很麻烦。如果您想查看其中的值，请列出option元素。

Protractor E2E测试中的参数化选项下拉列表

2 个答案: