Question

我试图使用Protractor获取选择元素的选项值。但是，我无法找到选项元素。

HTML

<select ng-options="opions.c as options.n for option in options" ng-model="model">
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
</select>

规格文件

describe('testing select option', function() {
    it('', function() {
        ptor = protractor.getInstance();

        //This will not get the option required
        ptor.findElement(protractor.By.binding('model'));
    });
});

我似乎无法找到获取选项值的方法，因为我没有找到一个我可以使用的函数，它不会给出异常或错误消息。

有谁知道如何解决这个问题？

Answer 1

我有一些问题让下拉菜单运行良好，并且今天花了一些时间来解决它（因此我在这里分享它，以防其他人发现它有用）。

在Protractor的早期版本中，有一个by.selectedOption，它有效地执行与by.select相同的操作，但只返回选定的项目。因此，要获得上面所选选项的文本，您可以：

expect(element(by.selectedOption('model')).getText()).toEqual('Option 1');

如果您想了解更多细节，我写了一篇博客文章，它还包含了一个辅助函数，用于在下拉列表中选择选项：http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

最新版本的量角器已删除此功能，将其替换为：

expect(element(by.id('my_id')).element(by.css('option:checked')).getText();

哪个更灵活，因为它可以应用于任何查找器，而selectedOption仅适用于模型查找器。

Answer 2

好吧我现在已经能够弄清楚如何用量角器抓住选项元素。

下面的示例代码显示了如何完成此任务。

ptor.findElement(protractor.By.css('select option:nth-child(value of the option you require IE: the number)')).click();

Answer 3

尝试使用xPath：

ptor.findElement(protractor.By.xpath('//select/option[1]'));

您可以使用相同的技术按值选择选项：

protractor.By.xpath('//select/option[text()="Option 2"]'));

我需要这样做来设置基于所选下拉菜单输入可见的表单，例如：

makeFord = protractor.By.xpath('//select[@id="make"]/option[text()="Ford"]'));
modelMustang = protractor.By.xpath('//select[@id="model"]/option[text()="Mustang"]'));
makeFord.click();
modelMustang.click();

Answer 4

以下是如何在选择中获取选项的值：

<强> HTML

<select ng-options="opions.c as options.n for option in options" ng-model="model">
    <option value="Africa">Option 1</option>
    <option value="Switzerland">Option 2</option>
</select>

.spec文件

describe("Country <select>", function() {

  it("should have 'Africa' as the value of the first option", function() {

    browser.get('index.html');

    let all_options = element.all(
      by.options("opions.c as options.n for option in options") //use whatever string is assigned to the ng-options attribute in the html
    );

    let first_option = all_options.get(0);  //or all_options.first()
    let second_option = all_options.get(1); //or all_options.last()

    expect(
      first_option.getAttribute('value')
    ).toEqual("Africa");                           

  });

});

获取所选选项的值 （可以通过调用选项上的click（）以编程方式选择使用量角器的选项）：

    expect(
      element(    
        by.model('model') //'model' is the string assigned to the select's ng-model attribute                                
      ).element(                  
          by.css('option:checked') 
        ).getAttribute('value')
    ).toEqual('Swizerland');

Answer 5

这会有所帮助。

//check whether the selected value is equal to the expected value.
expect(element(by.model("model")).getAttribute('value')).toEqual("0");

//catch the selected value
element(by.model("model")).getAttribute('value').then(function (value) {
   console.log('selected value', value);
});

Answer 6

为了枚举选项标签，您可以尝试使用.all方法，您应该先由父母访问它。

element(by.model('model')).all(by.tagName('option')).then(function(arr) {
        expect(arr.length).toEqual(2);
});

查看API参考以获取灵感

http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.all

编辑：也遵循不鼓励使用XPath的样式指南 http://www.protractortest.org/#/style-guide

如何获取select元素的选项值

6 个答案: