How to get option value of select element

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

&l         


        

Answer 1

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 2

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 3

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 4

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

Answer 5

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 6

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