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

Question

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

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

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

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

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

规格文件：

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

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