Unable to change drop-down selection in Ruby Watir - ruby

Question

I am trying to select values one by one in a dropdown and having difficulty.
selenium-webdriver (4.0.3)
watir (7.0.0)
ChromeDriver 94.0.4606.81
The dropdown is md-select which on click displays a hidden div with 2 choices.
<md-select ng-if="vm.datas.length" ng-model="vm.activeData" ng-change="vm.refreshDash()" id="active-data-select" aria-label="data selector" class="ng-pristine ng-valid md-default-theme ng-empty ng-touched" tabindex="0" aria-disabled="false" role="button" aria-haspopup="listbox" aria-invalid="false" aria-labelledby="active-data-select select_value_label_8" style="" aria-owns="select_listbox_10">
<md-select-value class="md-select-value" id="select_value_label_8"><span><div class="md-text">My test data 1</div></span><span class="md-select-icon" aria-hidden="true"></span></md-select-value>
</md-select>
<div class="md-select-menu-container md-default-theme md-active md-clickable" aria-hidden="false" role="presentation" id="select_container_9" style="display: block; left: 507px; top: 8px; min-width: 336.891px; font-size: 20px;">
<md-select-menu role="presentation" class="_md md-default-theme" style="transform-origin: 152.445px 32px 0px;">
<md-content role="listbox" tabindex="-1" aria-multiselectable="false" class="_md md-default-theme" id="select_listbox_10" aria-activedescendant="select_option_14">
<!---->
<md-option ng-repeat="data in ::vm.datas | orderBy:'name' track by $index" ng-value="data" value="[object Object]" ng-class="{'selected': data.name == vm.activeData.name }" tabindex="0" class="md-default-theme selected md-focused" role="option" id="select_option_14" selected="selected" aria-selected="true"><div class="md-text">My test data 1</div></md-option>
<!---->
<md-option ng-repeat="data in ::vm.datas | orderBy:'name' track by $index" ng-value="data" value="[object Object]" ng-class="{'selected': data.name == vm.activeData.name }" tabindex="0" class="md-default-theme" role="option" id="select_option_15"><div class="md-text">My test data 2</div></md-option>
<!---->
</md-content>
</md-select-menu>
</div>
When I am trying to do the below to display the hidden div to select next value:
browser.element(id: 'active-data-select').click
I get the following error:
element located, but timed out after 30 seconds, waiting for #<Watir::HTMLElement: located: true; {:id=>"active-data-select"}> to be present
I have tried many different things, but not able to find a solution yet. Any ideas?
Thank you,
-Andrey

Answer 1

If you are certain that clicking select element will solve your problem
browser.element(id: 'active-data-select').fire_event :click
will perform click even if element is obscured or not even on screen
You can also try
browser.element(id: 'active-data-select').send_keys :enter
or
browser.element(id: 'active-data-select').send_keys [:down, :down, :enter]
In your html it seems like div select_container_9 is holding the select with options elements, so try
browser.div(id: "select_container_9").select_list.options.first.select
It seems like it's id is autogenerated so different locator should be used in case it works
But you should probably debug how many selects there are on page with
browser.selects.count then you can flash each select to pinpoint the one you are after with browser.selects[x].flash then count how many options are available in that select with browser.selects[1].options.count and then you can proceed with selecting the option you want with browser.selects[1].options[1].select and then improve locators