Protractor css locator for md-select - protractor

Question

I'm new to protractor and need to know how can i get the text i.e. Connections in the below code block. I need to click this "Connections". Anyhelp would be really appreciated. Thanks in advance
<md-option ng-repeat="worksite in vmSplashController.worksites track by $index" id="option_worksite_TRANSFER" ng-value="worksite" tabindex="0" class="ng-scope" role="option" aria-selected="false" value="[object Object]">
<div class="md-text ng-binding">
Connections
</div>
</md-option>
Full code
<md-dialog ng-cloak aria-span="" id="splashDialog" class="asui-popup-container splashContainer">
<form name="splash">
<md-dialog-content class="agentDetails" flex>
</md-dialog-content>
<md-dialog-content class="agentOptions" flex layout="row">
<md-input-container class="md-input-has-placeholder" id="nav_worksite" ng-if="vmSplashController.worksites.length >= 1" flex="50" layout="column">
<label class="select-lable">Worksite</label>
<md-select md-no-ink name="nav_worksite" required ng-model="vmSplashController.worksites.selected" ng-model-options="{trackBy: '$value.locationCode'}" aria-label="Select Worksite" md-container-class="md-select-custom nav-worksite-selectbox" ng-change="vmSplashController.onWorksiteChange(vmSplashController.worksites.selected)">
<md-option ng-repeat="worksite in vmSplashController.worksites track by $index" id="option_worksite_{{worksite.locationCode}}" ng-value="worksite">
{{**Here that Div is being created i.e. Connections along with other two options**}}
</md-option>
</md-select>
</md-input-container>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button md-no-ink class="md-primary nobg-btn" ng-click="vmSplashController.onConfirm()" ng-disabled="splash.$invalid">
CONFIRM
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
I treid this
element(by.cssContainingText('.option_worksite_TRANSFER > div.md-text', 'Connections')).click();
but getting the below error.
Message:
Failed: No element found using locator: by.cssContainingText(".option_worksite_TRANSFER > div.md-text", "Connections")

Answer 1

First - I'm a bit confused. In example you are trying to select class option_worksite_TRANSFER, but in error message it has an id.
If you are trying to select value from dropdown, try this solution:
https://stackoverflow.com/a/39047319/6331748

Answer 2

Try this using xpath:
element(by.xpath("//div[text()='Connections']")).click();

Answer 3

Try using the below code:
element(by.cssContainingText('[id^="option_worksite"] > div.md-text', 'Connections')).click();
Adding waits:
var EC = protractor.ExpectedConditions;
var ele = element(by.cssContainingText('[id^="option_worksite"] > div.md-text', 'Connections'));
browser.wait(EC.visibilityOf(ele), 5000).then(function(){
ele.click();
});