How to select option in drop down protractorjs e2e tests

Question

I am trying to select an option from a drop-down for the angular e2e tests using protractor.

Here is the code snippet of the select option:

<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>

I have tried this:

ptor.findElement(protractor.By.css('select option:1')).click(); 

This gives me the following error:

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

I have also tried: 

ptor.findElement(protractor.By.xpath('/html/body/div[2]/div/div[4]/div/div/div/div[3]/ng-include/div/div[2]/div/div/organization-form/form/div[2]/select/option[3]')).click();

This gives me the following error:

ElementNotVisibleError: Element is not currently visible and so may not be interacted with Command duration or timeout: 9 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: bdeb8088-d8ad-0f49-aad9-82201c45c63f 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, webStorageEnabled=true, applicationCacheEnabled=false, takesScreenshot=true}] 

Can anyone please help me with this problem or throw some light on what I might be doing wrong here. 

Answer 1

First of all, you can use .get() method of the ElementArrayFinder - no need to resolve a promise explicitly:

var desiredOption = element.all(by.tagName('option')).get(2);

 Then, assuming you are clicking the right "button" to open up the options, you can wait for the option to become visible:

var EC = protractor.ExpectedConditions;

browser.wait(EC.visibilityOf(desiredOption), 5000);

desiredOption.click();

 There is also this nice wrapper around Select element, which, aside from other things, will allow you to select an option by text or value (would be better than hardcoding an index of an option).