How to use WebDriver 2 to find select2 on a form?

Question

selenium

There is a select2 element.

<div class="col col-per-3">
                        <div ng-class="{'select2-container-active select2-dropdown-open open': $select.open, 'select2-container-disabled': $select.disabled, 'select2-container-active': $select.focus, 'select2-allowclear': $select.allowClear &amp;&amp; !$select.isEmpty()}" class="menu-select _block ui-select-container select2 select2-container ng-valid ng-touched ng-dirty ng-valid-parse" on-select="onStationChange($item) | filter: {stationShortName: $select.search}" theme="select2" ng-model="station" data-select="" style=""><a aria-label="Select box select" ng-click="$select.toggle($event)" ng-class="{'select2-default': $select.isEmpty()}" class="select2-choice ui-select-match" placeholder="Выберите станцию" style=""><span class="select2-chosen ng-binding ng-hide" ng-show="$select.isEmpty()" style="">Выберите станцию</span> <span ng-transclude="" class="select2-chosen" ng-hide="$select.isEmpty()" style="">
                                <div class="icon icon-lightning" style="">
                                </div><span class="ng-binding ng-scope">
                                ЕЭЦ тестовая
                            </span></span> <!-- ngIf: $select.allowClear && !$select.isEmpty() --> <span class="select2-arrow ui-select-toggle"><b></b></span></a><div ng-class="{'select2-display-none': !$select.open}" class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active select2-display-none" style="opacity: 1;"><div ng-show="$select.searchEnabled" class="select2-search"><input type="text" ng-model="$select.search" class="ui-select-search select2-input ng-pristine ng-untouched ng-valid" aria-activedescendant="ui-select-choices-row-0-2" aria-label="Select box" aria-owns="ui-select-choices-0" aria-expanded="true" role="combobox" spellcheck="false" autocapitalize="off" autocorrect="false" autocomplete="false"></div><ul class="ui-select-choices ui-select-choices-content select2-results ng-scope" repeat="item in stations"><li ng-class="{'select2-result-with-children': $select.choiceGrouped($group) }" class="ui-select-choices-group"><div ng-bind="$group.name" class="ui-select-choices-group-label select2-result-label ng-binding ng-hide" ng-show="$select.choiceGrouped($group)"></div><ul ng-class="{'select2-result-sub': $select.choiceGrouped($group), 'select2-result-single': !$select.choiceGrouped($group) }" id="ui-select-choices-0" role="listbox" class="select2-result-single"><!-- ngRepeat: item in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: item in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: item in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: item in $select.items --><!-- ngIf: $select.open --><!-- end ngRepeat: item in $select.items --></ul></li></ul></div><ui-select-single></ui-select-single><input type="text" role="button" aria-haspopup="true" aria-label="Select box focus" id="focusser-0" class="ui-select-focusser ui-select-offscreen ng-scope" ng-disabled="$select.disabled"></div>
                    </div>

I can't figure out how to find this element on the form using WebDriver 2.0 and Java for further use.
Who faced or has experience, share plz.

Answer 1

here is a piece of jsp file where the page is dynamically built

<div class="container" id="app-journal">
    <div class="content">
        <div class="content-body journal" ng-controller="MainController">
            <div>
                <div data-calcHeight class="row _tight form-group">
                    <div class="col col-per-3">
                        <ui-select data-select class="menu-select _block" ng-model="station" theme="select2"
                                   on-select="onStationChange($item) | filter: {stationShortName: $select.search}">
                            <ui-select-match placeholder="Выберите станцию">
                                <div class="icon icon-{{$select.selected.stationGroupId == 15 ? 'lightning' : 'radiation'}}">
                                </div>
                                {{$select.selected.stationShortName}}
                            </ui-select-match>
                            <ui-select-choices repeat="item in stations">
                                <div class="icon icon-{{item.stationGroupId == 15 ? 'lightning' : 'radiation'}}">
                                </div>
                                {{item.stationShortName}}
                            </ui-select-choices>
                        </ui-select>
                    </div>