How to get option value of select element - angularjs

Question

I am trying to get the option value of a select element using Protractor. However, I'm not able to find the option element.
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>
Spec-file
describe('testing select option', function() {
it('', function() {
ptor = protractor.getInstance();
//This will not get the option required
ptor.findElement(protractor.By.binding('model'));
});
});
I cannot seem to find a way to grab the option value as I haven't found a function that I can use that doesn't give and exception or error message.
Does anyone know how to resolve this issue?

Answer 1

I have had some problems getting dropdowns working well, and have spent some time today working it out (and therefore I'm sharing it here in case someone else finds it useful).
On earlier versions of Protractor there was a by.selectedOption, which effectively does the same thing as by.select, but returns only the selected item. So, to get the text of the selected option above, you could have:
expect(element(by.selectedOption('model')).getText()).toEqual('Option 1');
I wrote a blog post if you want more detail, it also covers a helper function for selecting the option in the dropdown: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/
Recent versions of protractor have removed this function, replacing it with:
expect(element(by.id('my_id')).element(by.css('option:checked')).getText();
Which is more flexible, as it can be applied to any of the finders, whereas selectedOption only worked with a model finder.

Answer 2

ok again I have now been able to figure out how to grab the option element with protractor.
the example code below shows how to accomplish this.
ptor.findElement(protractor.By.css('select option:nth-child(value of the option you require IE: the number)')).click();

Answer 3

Try using xPath:
ptor.findElement(protractor.By.xpath('//select/option[1]'));
You can use the same technique to choose an option by value:
protractor.By.xpath('//select/option[text()="Option 2"]'));
I've needed to do this for setting up forms where inputs are visible based on selected dropdowns, e.g.:
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

Here is how you can get the value of an option in a select:
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 file
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");
});
});
To get the value of a selected option (which can be an option programmatically selected with protractor by calling click() on an option):
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

This will help.
//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

In order to enumerate the option tags you can try to use the .all method and you should access it by the parent first.
element(by.model('model')).all(by.tagName('option')).then(function(arr) {
expect(arr.length).toEqual(2);
});
Have a look at the API reference for inspiration
http://www.protractortest.org/#/api?view=ElementArrayFinder.prototype.all
Edit: also follow the style guide which discourages usage of XPath
http://www.protractortest.org/#/style-guide