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

Question

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

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

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

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

我missing/doing哪里错了？

规格文件：

campaignPO.clickCountryLocation('US');

页面对象文件：

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 抽象：

用法示例：

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 是否工作得很好。要 select 个选项：

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

如果您只是想在没有 select 输入值的情况下打开 select，请不要这样做。选择是 HTML 个组件，您不想以这种方式测试它们。即使在 javascript 中与他们一起工作也很麻烦。如果您想查看其中的值，请列出 option 元素。

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

Parameterizing options dropdown lists in Protractor E2E tests

angularjs

protractor