如何獲得選擇元素的選項值

Question

我想要使用量角器得到選擇元素的選項值。但是，我無法找到選項元素。

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

好的，我現在已經能夠弄清楚如何用量角器抓住選項元素。

下面的示例代碼顯示瞭如何完成此操作。

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

Answer 2

我有一些問題得到下拉列表運作良好，並已花了一些時間工作今天它（因此我在這裏分享它，以防其他人發現它是有用的）。

在較早版本的量角器中，有一個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 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

爲了枚舉選項標籤，您可以嘗試使用.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

Answer 5

這裏是你如何能得到選項中的選項的值：

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");       

    }); 

}); 

要獲得的價值選擇的選項（可通過調用點擊用量角器編程選擇一個選項的（）在一個選項上）：

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