ElementNotVisibleError - when selecting a drop down option

[ranjanbhambroo]

@juliemr I am trying to select a drop down option and i get the following error.
I have already tried your suggestion which was
ptor.findElement(protractor.By.css('select option:0')).click();

and it gave me the error mention below.

UnknownError: An invalid or illegal string was specified
Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01'
System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65'
Driver info: driver.version: unknown

Also i tried this below which didn't workout either
var selectElem = ptor.findElement(protractor.By.id("locregion"));
selectElem.click();
selectElem.findElement(protractor.By.css("option[value='0']")).click();

Here the error i get:

ElementNotVisibleError: Element is not currently visible and so may not be interacted with
Command duration or timeout: 21 milliseconds
Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01'
System info: os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9', java.version: '1.6.0_65'
Session ID: c707916a-c7ef-b640-bc86-a33f9673d543
Driver info: org.openqa.selenium.firefox.FirefoxDriver
Capabilities [{platform=MAC, acceptSslCerts=true, javascriptEnabled=true, browserName=firefox, rotatable=false, locationContextEnabled=true, version=24.0, cssSelectorsEnabled=true, databaseEnabled=true, handlesAlerts=true, browserConnectionEnabled=true, nativeEvents=false, webStorageEna

This is the code for the select drop down:

<select id="locregion" class="create_select ng-pristine ng-invalid ng-invalid-required" required="" ng-disabled="organization.id !== undefined" ng-options="o.id as o.name for o in organizations" ng-model="organization.parent_id">
<option value="?" selected="selected"></option>
<option value="0">Ranjans Mobile Testing</option>
<option value="1">BeaverBox Testing</option>
<option value="2">BadgerBox</option>
<option value="3">CritterCase</option>
<option value="4">BoxLox</option>
<option value="5">BooBoBum</option>
</select>

[juliemr]

Interacting with selects is a pain, and I think the real solution here is that somebody should write a library for dealing with selects in WebDriverJS (Java WebDriver has a library for this already). In the meantime, you need to click on the select before clicking on the option to open it up, so that it's visible to the user.

element(by.id('locregion')).click();
element(by.css('option[value=0]')).click();

[PaulL1]

I haven't written a library as such, but I have written two code snippets that do most of what I need for interacting with dropdowns.

Firstly, to select an element in a dropdown (by number), you can use:

var selectDropdownbyNum = function ( element, optionNum ) {
    if (optionNum){
      var options = element.findElements(by.tagName('option'))   
        .then(function(options){
          options[optionNum].click();
        });
    }
  };

Secondly, to check if the text of the selected item in a dropdown is what you expect, then you can use:

expect(element(by.selectedOption('model_name')).getText()).toEqual('xxxxxx');

I haven't managed to get something working where I select by the text of the element, mostly due to the callback sequence and chaining of thens getting the better of me, but I also eventually decided I didn't really need that anyway - selecting dropdowns by a text value would be fragile, particularly in my app which is internationalised (so the text value is different in different languages).

I also wrote a brief blog post on this with a bit more context, and an astrolabe version of the function, which is what I actually use myself. http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

I can draft a commit that updates the documentation to include this as an example. Alternatively, I could spend a little time to submit a pull request that adds this as a protractor feature, perhaps as WebElement.selectByNum function(integer)?

[dotjose-zz]

In protractor you can use angular CSS selector to select drop down options or commonly called combo box in .net UI/UX programming. Here we go the source code.

option = element(by.model('settings.language')).$('[value= "am"]').click().then(function() {
// put here what you need to do with the selected option
});

Cheers!