量角器E2E测试中的参数化选项下拉列表

Question

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

在我测试的页面中，我们有一个国家下拉列表。下拉列表包含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

首先，您可以使用以下命令简化选择定位器

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

我不确定css属性是否工作得很好。要选择选项：

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

如果您只是尝试打开选择而不选择值，请不要这样做。选择是 HTML 组件，您不希望以这种方式测试它们。即使在 java 脚本中使用它们也很麻烦。如果要查看其中的值，请列出选项元素。

Answer 2

我会使用这里建议的选择选项抽象：

• 选择-

用法示例：

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

mySelect.selectByText('US');