如何在Protractor的E2E测试中选择包含相同文本的多个选项时选取特定选项？

Question

我正在尝试使用Protractor为Angular的端到端测试选择下拉列表中的选项“India”。

以下是选择选项的代码片段：

<select id="countryCode" class="form-control nux-select input-md ng-touched ng-dirty ng-valid-parse ng-valid ng-valid-required" required="" data-ng-model="selectedCountry" data-ng-options="c.country for c in country" name="countryCode">
<option class="" selected="" value="">-- select --</option>
<option value="0">Afghanistan</option>
<option value="1">Albania</option>
.
.
.
<option value="29">Brazil</option>
<option value="30">British Indian Ocean Territory</option>
.
.
.
<option value="98">India</option>
<option value="99">Indonesia</option>

我已经尝试过：

element(by.cssContainingText('option', 'India')).click();

但是由于"英属印度洋领地"选项出现在"印度"之前，所以选择该选项而不是"印度"。

因此，我尝试了以下方法，它可以解决问题：

element(by.xpath('//select[@id="countryCode"]/option[98]')).click();

但是由于我正在硬编码，并且可能会添加新值到下拉菜单中，有人可以建议我实现不同的方法。

- Priya g

---

可能有一种使用正则表达式来实现这个的方法！但是不知道怎么做！ - Sakshi Singla

Answer 1

其他Selenium语言绑定使用方便的Select类来抽象化带有select->option HTML结构的元素，该类提供了不同的实用方法，例如（Python）：

select = Select(driver.find_element_by_id('countryCode'))
select.select_by_visible_text('India')

在protractor中，并没有内置这样的功能，但是像@dmitankin在Select -> option abstraction主题中友好地提出的那样，你可以构建一个并重复使用，非常透明。

var mySelect = new SelectWrapper(by.id('countryCode'));
mySelect.selectByText('India');

请注意，这里的selectByText()是基于xpath表达式来检查选项文本的：

SelectWrapper.prototype.selectByText = function(text) {
    return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();   
};

- alecxe

Answer 2

element.all(by.cssContainingText('option', 'India')).then(function(items) {
  expect(items.length).toBe(2);
  expect(items[0].getText()).toBe('British Indian Ocean Territory');
  expect(items[1].getText()).toBe('India');
});

我不确定这是否是最佳解决方案，但它应该可以工作。只有在您添加包含“印度”的新值时，它才会变得不稳定，但这似乎不现实。

- Sergey Teplyakov