Protractor中如何获取下拉选框的选中选项文本？

这是Angular项目里用Protractor做端测时很常见的问题，我来帮你解决：

问题根源 #

你直接对<select>元素调用getText()，Protractor会返回该元素下所有<option>的文本拼接结果，这就是为什么你得到了所有卖家选项的原因。另外，你尝试的getAttribute('text')本身就不对（HTML元素没有text属性），而getAttribute('value')返回的是[ngValue]绑定的对象序列化后的结果，不是显示的文本。

解决方案 #

有两种简单可靠的方法：

方法1：使用Protractor内置的Select类（推荐）

Protractor专门提供了处理下拉选框的工具类，能简化操作：

// 先导入Select类
import { Select } from 'protractor';

// 把你的select元素包装成Select对象
const selectSeller = new Select(element(by.id('field_seller')));

// 获取选中选项的文本并断言
expect(selectSeller.getFirstSelectedOption().getText()).toEqual('SELLER 1');

如果你的返回文本有多余空格（比如你示例里的前后空格），可以加上trim()处理：

expect(selectSeller.getFirstSelectedOption().getText().trim()).toEqual('SELLER 1');

方法2：直接定位选中的<option>元素

不用工具类的话，也可以通过CSS选择器直接找到被选中的选项：

// 定位选中的option
const selectedOption = element(by.css('#field_seller option:checked'));

// 断言文本
expect(selectedOption.getText().trim()).toEqual('SELLER 1');

补充说明 #

• 你的Angular模板里用了[(ngModel)]和[ngValue]绑定对象，所以<select>的value属性不会是选项文本，而是Angular对绑定对象的序列化值，这就是getAttribute('value')返回'1: Object'的原因。
• 如果是多选下拉框，getFirstSelectedOption()就不适用了，此时可以用getAllSelectedOptions()获取所有选中的选项，再遍历处理。

内容的提问来源于stack exchange，提问作者Rohr Facu