It worked perfectly for me

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

A sophisticated method could be to create an abstraction layer similar to what is provided by other selenium language bindings by default (for example, the Select class in Python or Java).

Let's develop a convenient wrapper to encapsulate implementation details:

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

module.exports = CustomSelect;

Here's an example of how to use it (notice how user-friendly and easy to understand it is):

var CustomSelect  = require('custom-select');
var myCustomSelect = new CustomSelect(by.id('location'));

# select an option by value
myCustomSelect.selectByValue('4');

# select by visible text
myCustomSelect.selectByText('BoxLox');

This solution was inspired by the discussion in this thread: Select -> option abstraction.

Just so you know, I have submitted a feature request here: Select -> option abstraction.

Enter 'BKN01' in the 'parent_id' model using Protractor:

element(by.model('parent_id')).sendKeys('BKN01');

If you want to target a particular option, you can use the nth-child() selector:

driver.findElement(By.cssSelector('select option:nth-child(1)')).click();

The process I used to make my choice was as follows:

function changeType(typeName) {
     $('.dropdown').element(By.cssContainingText('option', typeName)).click();
};

This is the method I used:

$('select').click();
$('select option=["' + optionInputFromFunction + '"]').click();
// Although it may seem unnecessary, the delay created by these lines 
// ensures that the Angular change event is properly registered.
browser.actions().mouseDown().mouseUp().perform();

This code snippet has proven to be effective for my use case:

element(by.model('formModel.client'))
    .all(by.tagName('option'))
    .get(120)
    .click();

Give this a shot, it could do the trick

element.all(by.id('locregion')).then(function(selectItem) {
  expect(selectItem[0].getText()).toEqual('Ranjans Mobile Testing')
  selectItem[0].click(); //clicks on the first item
  selectItem[3].click(); //clicks on the fourth item
});

Here is an alternative method for specifying an option element:

let selection = element(by.model('organization.parent_id'));
selection.$('[value="1"]').click();

When choosing specific items (options) with distinct identifiers like those in this example:

<select
    ng-model="foo" 
    ng-options="bar as bar.title for bar in bars track by bar.id">
</select>

I achieve this by:

element(by.css('[value="' + neededBarId+ '"]')).click();

We have developed a library that offers 3 different methods for selecting an option:

selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise<void>

selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise<void>

selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise<void>

One of the key features of these functions is that they ensure the element is displayed before performing any action on the select.

You can access this library on npm at @hetznercloud/protractor-test-helper. Typings for TypeScript are also available.

While it may not be the most elegant solution, this method is quite efficient:

function pickChoice(selector, position) {
    for (var i=0; i<position; i++){
        element(by.model(selector)).sendKeys("\uE015");
    }
}

By using the pickChoice function, you can easily navigate through options in a select element using the provided selector. Feel free to substitute 'selector' with any other appropriate identifier.

When implementing this in a page object model:

selectMyOption: function (optionNum) {
       pickChoice('myOption', optionNum)
}

Finally, when testing the functionality:

myPage.selectMyOption(1);

Encountering issues with regular Angular select boxes when using Angular Material md-select and md-option with Protractor? Fear not, as I have found a solution that worked for me. Unfortunately, due to low rep points, I am unable to comment on the original post where this solution was shared. To improve upon the original code, I replaced browser.sleep with browser.waitForAngular() for a more efficient execution.

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.waitForAngular();              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.waitForAngular();              // wait for the renderings to take effect
});

One of the challenges faced when selecting options in Firefox is addressed by a helpful solution known as Droogans's hack. I feel it's important to highlight this fix here to potentially assist others encountering the same issue: https://github.com/angular/protractor/issues/480.

It's worth noting that even if your tests are running smoothly on your local Firefox browser, they may start failing on CI/CD platforms like CircleCI or TravisCI. Recognizing this issue early on could have saved me a significant amount of time and effort!

Assisting in setting the value of an option element:

selectOptionByValue:function(optionValue) {
            element(by.cssContainingText('option', optionValue)).click(); //optionValue: valueOfOption
        }

If you see the dropdown options provided below-

            <select ng-model="operator">
            <option value="name">Addition</option>
            <option value="age">Division</option>
            </select>

You can use the following Protractor code-

        var operators=element(by.model('operator'));
    operators.$('[value=Addition]').click();

Source-https://github.com/angular/protractor/issues/600

Choose an option based on its index:

var dropdown = element(by.id('dropdown-list'));
dropdown.all(by.tagName('option'))
      .then(function (options) {
          options[2].click();
      });

I have made some enhancements to the solution provided by PaulL. Firstly, I have updated the code to be compatible with the latest Protractor API. Additionally, I have defined the function within the 'onPrepare' section of a Protractor configuration file as part of the browser instance, allowing it to be accessed from any end-to-end test specification.

onPrepare: function() {
    browser._selectDropdownbyNum = function (element, optionNum) {
      /* This helper function selects an option in a dropdown control based on the specified number. */
      return element.all(by.tagName('option')).then(
        function(options) {
          options[optionNum].click();
        });
    };
},

This example demonstrates the simplest approach. It has been tested and successfully executed in Protractor Version 5.4.2

//Selecting an option from a drop-down based on visibility text

 element(by.model('currency')).element(by.css("[value='Dollar']")).click();
 Alternatively, you can use the following syntax, where '$' is shorthand for '.By.css'
  element(by.model('currency')).$('[value="Dollar"]').click();

//Selecting an option by index

var select = element(by.id('userSelect'));
select.$('[value="1"]').click(); // Using the index for selection. Here, '$' is a shortcut for '.By.css'

Complete code snippet

describe('Protractor Demo App', function() {

  it('should have a title', function() {

     browser.driver.get('http://www.way2automation.com/angularjs-protractor/banking/#/');
    expect(browser.getTitle()).toEqual('Protractor practice website - Banking App');
    element(by.buttonText('Bank Manager Login')).click();
    element(by.buttonText('Open Account')).click();

    //Selecting an option from a drop-down based on visibility text
  element(by.model('currency')).element(by.css("[value='Dollar']")).click();

    //Using shorthand notation. Here, '$' is shorthand for '.By.css'
    // element(by.model('currency')).$('[value="Dollar"]').click();

    //Selecting an option by index
    var select = element(by.id('userSelect'));
    select.$('[value="1"]').click(); // Using the index for selection. Here, '$' is a shortcut for '.By.css'
    element(by.buttonText("Process")).click();
    browser.sleep(7500);// wait in miliseconds
    browser.switchTo().alert().accept();

  });
});

After extensive searching online, I finally found a solution for selecting an option in a model dropdown using Angular material. The combination of code below proved to be the key:

element(by.model("ModelName")).click().element(By.xpath('xpathlocation')).click();

Surprisingly, placing all the code on one line made it easier to locate the element in the dropdown.

It took a significant amount of time to discover this solution, so I hope it can assist others facing the same issue.

If none of the above solutions worked for you, give this a try

Async/await is supported as well

If you need to select options based on text

let textOption = "option2"
await element(by.whichever('YOUR_DROPDOWN_SELECTOR'))
  .getWebElement()
  .findElement(by.xpath(`.//option[text()="${textOption}"]`))
  .click();

Alternatively, you can select options by number

let optionNumber = 2
await element(by.whichever('YOUR_DROPDOWN_SELECTOR'))
  .getWebElement()
  .findElement(by.xpath(`.//option[${optionNumber}]`))
  .click();

You may need to adjust the xpath of child options as needed

For some reason, this is the only method that worked for automating my dropdowns when all hope seemed lost

Update

There was one situation where even this method didn't work. The workaround was a bit messy but effective - I had to select the value twice

We initially tried to implement a sleek solution using angularjs material, but encountered a roadblock. The issue stemmed from the fact that the DOM did not contain any option or md-option tags until the md-select was clicked. This made the "elegant" approach ineffective for us (note angular material!). In response, we devised an alternative method that, while not necessarily the optimal choice, successfully resolved the issue.

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.driver.sleep(500);              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.driver.sleep(500);              // wait for the renderings to take effect
});

Our objective was to have 4 selects chosen simultaneously. However, a challenge arose when an overlay obstructed the selection of subsequent selects while one was open. Consequently, we implemented a delay of 500ms to ensure that we did not encounter issues with material effects still in progress.

Here is an alternate method for selecting an option element:

function chooseOption(optionName) {
    var selection = element(by.id('locregion'));
    selection.click();
    selection.all(by.tagName('option')).filter(function(element, index) {
        return element.getText().then(function(text) {
            return text === optionName;
        });
    }).then(function(filteredOptions){
        filteredOptions[0].click();
    });
}

// Example of how to use the function
chooseOption('BeaverBox Testing');

----------
element.all(by.id('locregion')).then(function(items)
{
 // items[x] = > // x is [0,1,2,3]element you want to click
  items[0].click(); //clicking the first item

  items[3].click();     // clicking the fourth item
  expect(items[0].getText()).toEqual('Ranjans Mobile Testing')
});

To choose dropdown options based on value, use the following code:

$('#locregion').$('[value="1"]').click();

To achieve this, you can select an option based on its value or index. While this example may seem basic, it effectively demonstrates how to accomplish your goal:

html:

<mat-form-field id="your-id">
    <mat-select>
        <mat-option [value]="1">1</mat-option>
        <mat-option [value]="2">2</mat-option>
    </mat-select>
</mat-form-field>

ts:

function selectOptionByOptionValue(selectFormFieldElementId, valueToFind) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');    

        for (let optionId of optionIds) {
          const option = element(by.id(optionId));
          option.getText().then((text) => {
            if (text === valueToFind) {
              option.click();
            }
          });
        }
      });
  });
}

function selectOptionByOptionIndex(selectFormFieldElementId, index) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');

        const optionId = optionIds[index];
        const option = element(by.id(optionId));
        option.click();
      });
  });
}

selectOptionByOptionValue('your-id', '1'); //selects first option
selectOptionByOptionIndex('your-id', 1); //selects second option

function chooseDropdownItem(dropdownElement, dropdownListElement, itemToSelect) {
    let selectedItem = '';
    WebLibraryUtils.getElement('xpath', dropdownElement).click();
    WebLibraryUtils.getElements('xpath', dropdownListElement).then(function(items) {
        if(items.length > 0) {
            items.forEach(function(item) {
                if(item === itemToSelect) {
                    console.log(item);
                    item.click();
                    selectedItem = item;
                }
            });
        }
    });
}

To cater to our specific requirements, a personalized DropDown class can be crafted with the following method:

async chooseSingleItem(item: string) {
        await this.element.element(by.xpath('.//option[normalize-space(.)=\'' + item + '\']')).click();
    }

For confirmation on the currently selected value, we can implement:

async getChosenItem() {
        return await this.element.$('option:checked').getText();
    }

Here is a straightforward answer explaining how Angular provides a special locator to select and index elements from a list.

element.all(by.options('o.id as o.name for o in organizations')).get(Index).click()