无法在水豚中选择选项

Question

我在下拉列表中选择选项时遇到问题。

HTML就是这样：

<div unselectable="on" class="k-widget k-multiselect k-header" style="" title="">
  <div unselectable="on" class="k-multiselect-wrap k-floatwrap">
    <ul class="k-reset" unselectable="on" role="listbox"></ul>
    <input style="width: 25px" class="k-input k-readonly" accesskey="" autocomplete="off" role="listbox" aria-expanded="false" tabindex="0" aria-owns="" aria-disabled="false" aria-readonly="false" aria-busy="false" aria-activedescendant="28dfc7ec-69a2-4a95-ba29-1f94e899c7e3">
    <span class="k-icon k-loading k-loading-hidden"></span>
  </div>
  <div data-bind="source: getTreeValues, value: selectedCrmAttributes.DYN_" data-text-field="name_i18n" data-value-field="attributeId" data-value-primitive="false" data-auto-bind="true" data-role="interestselect" multiple="multiple" style="display: none;" aria-disabled="false" aria-readonly="false">
    <option value="DYN_#76ed2b3f-4d64-4d07-8ba7-ab6f133e0c70">one.csv</option>
    <option value="DYN_#6f914af1-ba58-4c40-99fe-e874bdf9c47b">two.csv</option>
    <option value="DYN_#4cd908d0-6c61-4a15-84e7-f113aa7a8ed4">three.csv</option>
    <option value="DYN_#c137cfad-81af-4164-90b1-a518a7595baa">four.csv</option>
   </div>
   <span style="font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; font-size: 13px; font-stretch: normal; font-style: normal; font-weight: 300; letter-spacing: normal; text-transform: none; line-height: 17.0333px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;"></span>
</div>

我试图通过这种方式选择选项

And(/^selecting (.*) from (.*)$/) do |item, selection|
  find('.dgr-dimensions-row', :text=>selection).find('.k-widget.k-multiselect.k-header').click
  #expect(page).to have_content(item) -> returns true
  select(item)
end

如果项目是我想要选择的选项，则选择是从我想要选择项目的位置过滤。

示例：如果我有一个过滤器文件，选项是一，二，三，四。 然后选择文件，项目一个，例如。

我正在使用

cucumber 2.1.0
ruby 2.1.6
nokogiri 1.6.6.2
capybara 2.4.4
selenium-webdriver 2.47.1 

提前致谢！

EDITED

我想通过文本选择选项，ruby步骤可以重复使用。我有很多像这样的类似字段，如果我可以重复使用相同的步骤，它会很有用。

图片：

已编辑2

<ul unselectable="on" class="k-list k-reset" tabindex="-1" aria-hidden="true" aria-live="polite" data-role="staticlist" role="listbox" style="overflow: auto; height: auto;">
  <li tabindex="-1" role="option" unselectable="on" class="k-item k-state-focused" data-offset-index="0" id="96c13cd6-8365-4e73-a134-6395988822f7">one.csv</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="1">two.csv</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="2">three.csv</li>
  <li tabindex="-1" role="option" unselectable="on" class="k-item" data-offset-index="3">four.csv</li>
</ul>

Answer 1

Capybaras #select仅适用于可见的html选项元素。这里的问题是你似乎使用了一个kendo multiselect小部件，它隐藏了真正的选项元素（因为你的html是无效的，因为选项元素只能合法地允许在select，optgroup或datalist元素中），然后生成一个可见的在ul.k列表中使用li元素的UI。从查看kendo multiselect的演示 - http://demos.telerik.com/kendo-ui/multiselect/index - 看来实际的ul.k-list元素被附加到widget div之外的页面，因此find不能作用于widget，并且ul.list的id为“＃{隐藏在多选小部件中的选择的id} _list”。由于您的html似乎没有在窗口小部件中的隐藏元素上具有id，因此无法使用该范围。因为所有这些，而不是select(item)你应该能够使用

find('.k-list li.k-item', text: item).click

单击下拉列表中单击标题后可见的元素。如果这个查找可以限定在页面上的特定.klist中会更好，但希望在您运行测试时只有一个实际可见。