title: WebDriver: Select a value from the drop down by using Javascript executor
body: <p>Application that I am working on has drop downs implemented using AngularJS. The values load on the click of the drop down field and when user selects the element, the value is stored in the drop down field.</p>
  
  <p>What I have tried to make it work?</p>
  
  <ol>
  <li>Wait for the object to be visible/clickable before clicking on the value to be selected</li>
  <li>Move to the element before clicking on it (using action class)</li>
  <li>Get the list of the elements, iterate and select the value</li>
  </ol>
  
  <p>I am able to currently make this work in Firefox and Chrome using the following code. This works fine when I am running the test scripts sequentailly but fails to work when I run tests in parallel..</p>
  
  <pre><code>    WebDriver driver = getDriver();
      JavascriptExecutor executor = (JavascriptExecutor) driver;
      executor.executeScript("arguments[0].click();", element);
  </code></pre>
  
  <p>Is there a better solution to do this??</p>
  
  <p>I am not good at java scripts, but I believe this is the js that is called when user selects the value. Is there a way to find out what is the return value this function is expecting so that  we can return the value directly to the browser using JavaScriptExecutor..</p>
  
  <p>Any direction on this will be greatly appreciated.. I have been stuck in this for quite few days now.. Thank you...!</p>
  
  <pre><code>return function(i, o, a, s, l) {
                      var u = a.groupBy,
                          c = a.groupFilter;
                      if (s.parseRepeatAttr(a.repeat, u, c), s.disableChoiceExpression = a.uiDisableChoice, s.onHighlightCallback = a.onHighlight, u) {
                          var d = o.querySelectorAll(".ui-select-choices-group");
                          if (1 !== d.length) throw n("rows", "Expected 1 .ui-select-choices-group but got '{0}'.", d.length);
                          d.attr("ng-repeat", t.getGroupNgRepeatExpression())
                      }
                      var f = o.querySelectorAll(".ui-select-choices-row");
                      if (1 !== f.length) throw n("rows", "Expected 1 .ui-select-choices-row but got '{0}'.", f.length);
                      f.attr("ng-repeat", t.getNgRepeatExpression(s.parserResult.itemName, "$select.items", s.parserResult.trackByExp, u)).attr("ng-if", "$select.open").attr("ng-mouseenter", "$select.setActiveItem(" + s.parserResult.itemName + ")").attr("ng-click", "$select.select(" + s.parserResult.itemName + ",false,$event)");
                      var p = o.querySelectorAll(".ui-select-choices-row-inner");
                      if (1 !== p.length) throw n("rows", "Expected 1 .ui-select-choices-row-inner but got '{0}'.", p.length);
                      p.attr("uis-transclude-append", ""), r(o, l)(i), i.$watch("$select.search", function(e) {
                          e &amp;&amp; !s.open &amp;&amp; s.multiple &amp;&amp; s.activate(!1, !0), s.activeIndex = s.tagging.isActivated ? -1 : 0, s.refresh(a.refresh)
                      }), a.$observe("refreshDelay", function() {
                          var t = i.$eval(a.refreshDelay);
                          s.refreshDelay = void 0 !== t ? t : e.refreshDelay
                      })
                  }
  </code></pre>
  
  <p>Below is the html of the drop down. DIV is loaded only when user clicks on the drop down arrow. I want to select 'Value1' or 'Value2' in this.</p>
  
  <pre><code>    &lt;div class="ui-select-container ui-select-bootstrap dropdown ui-select-container ui-select-bootstrap dropdown ng-pristine ng-touched error open" ng-class="{open: $select.open}" gw-field-empty="" style="position: absolute; left: 502px; top: 1467px; width: 228.75px;" ng-change="loanBoarding.vm.loanReceipt.isOverFlow = false;loanBoarding.validateContact()" ng-disabled="shouldDisable([loanBoarding.parent.loan.isApplicationEditable &amp;&amp; perms.editLoanBoarding &amp;&amp; (!loanBoarding.parent.loan.currentApplicationDisposition ? true : perms.updLoan1stDisp), loanBoarding.parent.loan.isApplicationEditable &amp;&amp; !loanBoarding.parent.loan.isLoanInUWPhase]) || (loanBoarding.isLocationDisabled || (!!loanBoarding.parent.loan.commitmentNumber &amp;&amp; !perms.editLocationType))" ng-model="loanBoarding.vm.loanPath.locationType" name="locationType"&gt;
  &lt;div class="ui-select-match ng-hide" ng-class="{'btn-default-focus':$select.focus}" ng-disabled="$select.disabled" ng-hide="$select.open" allow-clear="false" style=""&gt;
  &lt;input class="form-control ui-select-search ng-pristine ng-untouched ng-valid" type="text" ng-show="$select.searchEnabled &amp;&amp; $select.open" ng-model="$select.search" placeholder="" aria-activedescendant="ui-select-choices-row-11-0" aria-owns="ui-select-choices-11" aria-label="Select box" aria-expanded="true" tabindex="-1" autocomplete="off" style=""/&gt;
  &lt;ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu ng-scope" ng-show="$select.items.length &gt; 0" role="listbox" repeat="d.value as d in loanBoarding.locationTypes | filter: { text: $select.search }" style="opacity: 1;"&gt;
  &lt;li id="ui-select-choices-11" class="ui-select-choices-group"&gt;
  &lt;div class="divider ng-hide" ng-show="$select.isGrouped &amp;&amp; $index &gt; 0"/&gt;
  &lt;div class="ui-select-choices-group-label dropdown-header ng-binding ng-hide" ng-bind="$group.name" ng-show="$select.isGrouped"/&gt;
  &lt;!-- ngRepeat: d in $select.items --&gt;
  &lt;!-- ngIf: $select.open --&gt;
  &lt;div id="ui-select-choices-row-11-0" class="ui-select-choices-row ng-scope active" role="option" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat="d in $select.items" ng-if="$select.open" ng-mouseenter="$select.setActiveItem(d)" ng-click="$select.select(d,false,$event)" style=""&gt;
  &lt;a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append=""&gt;
  &lt;span class="ng-binding ng-scope" ng-bind-html="d.text | highlight: $select.search"/&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- end ngIf: $select.open --&gt;
  &lt;!-- end ngRepeat: d in $select.items --&gt;
  &lt;!-- ngIf: $select.open --&gt;
  &lt;div id="ui-select-choices-row-11-1" class="ui-select-choices-row ng-scope" role="option" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat="d in $select.items" ng-if="$select.open" ng-mouseenter="$select.setActiveItem(d)" ng-click="$select.select(d,false,$event)" style=""&gt;
  &lt;a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append=""&gt;
  &lt;span class="ng-binding ng-scope" ng-bind-html="d.text | highlight: $select.search"&gt;Value2&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- end ngIf: $select.open --&gt;
  &lt;!-- end ngRepeat: d in $select.items --&gt;
  &lt;!-- ngIf: $select.open --&gt;
  &lt;div id="ui-select-choices-row-11-2" class="ui-select-choices-row ng-scope" role="option" ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" ng-repeat="d in $select.items" ng-if="$select.open" ng-mouseenter="$select.setActiveItem(d)" ng-click="$select.select(d,false,$event)" style=""&gt;
  &lt;a class="ui-select-choices-row-inner" href="javascript:void(0)" uis-transclude-append=""&gt;
  &lt;span class="ng-binding ng-scope" ng-bind-html="d.text | highlight: $select.search"&gt;Value3&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- end ngIf: $select.open --&gt;
  &lt;!-- end ngRepeat: d in $select.items --&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ui-select-single/&gt;
  &lt;input id="focusser-11" class="ui-select-focusser ui-select-offscreen ng-scope" type="text" role="button" aria-haspopup="true" aria-label="Select box focus" ng-disabled="$select.disabled" tabindex="1" disabled=""/&gt;
  &lt;/div&gt;
  </code></pre>