How to select option in drop down protractorjs e2e tests

For me worked like a charm

element(by.cssContainingText('option', 'BeaverBox Testing')).click();

I had a similar problem, and eventually wrote a helper function that selects dropdown values.

I eventually decided that I was fine selecting by option number, and therefore wrote a method that takes an element and the optionNumber, and selects that optionNumber. If the optionNumber is null it selects nothing (leaving the dropdown unselected).

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

I wrote a blog post if you want more detail, it also covers verifying the text of the selected option in a dropdown: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

An elegant approach would involve making an abstraction similar to what other selenium language bindings offer out-of-the-box (e.g. Select class in Python or Java).

Let's make a convenient wrapper and hide implementation details inside:

var SelectWrapper = function(selector) {    this.webElement = element(selector);};SelectWrapper.prototype.getOptions = function() {    return this.webElement.all(by.tagName('option'));};SelectWrapper.prototype.getSelectedOptions = function() {    return this.webElement.all(by.css('option[selected="selected"]'));};SelectWrapper.prototype.selectByValue = function(value) {    return this.webElement.all(by.css('option[value="' + value + '"]')).click();};SelectWrapper.prototype.selectByPartialText = function(text) {    return this.webElement.all(by.cssContainingText('option', text)).click();   };SelectWrapper.prototype.selectByText = function(text) {    return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();   };module.exports = SelectWrapper;

Usage example (note how readable and easy-to-use it is):

var SelectWrapper  = require('select-wrapper');var mySelect = new SelectWrapper(by.id('locregion'));# select an option by valuemySelect.selectByValue('4');# select by visible textmySelect.selectByText('BoxLox');

Solution taken from the following topic: Select -> option abstraction.

FYI, created a feature request: Select -> option abstraction.