18

我正在尝试使用量角器获取选择元素的选项值。但是，我找不到选项元素。

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'));
    });
});

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

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

4

6 回答 6

36

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

在 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 仅适用于模型查找器。

于 2013-12-01T03:01:02.953 回答
5

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

下面的示例代码显示了如何完成此操作。

ptor.findElement(protractor.By.css('select option:nth-child(value of the option you require IE: the number)')).click();
于 2013-08-30T13:50:31.400 回答
0

尝试使用 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();
于 2014-01-13T15:24:37.217 回答
0

这会有所帮助。

//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);
});
于 2018-11-08T12:59:46.097 回答
0

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

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');
于 2017-01-17T11:37:10.497 回答
-1

为了枚举选项标签，您可以尝试使用该.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的样式指南

于 2016-07-30T22:10:28.157 回答