ruby - 无法在 capybara 中选择选项

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 

提前致谢!

已编辑

我想通过文本选择选项，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 多选小部件(顺便说一句，您的 html 无效，因为选项元素在法律上只允许位于 select、optgroup 或 datalist 元素内)，然后生成一个可见的在 ul.k 列表中使用 li 元素的 UI。通过查看 kendo 多选演示 - http://demos.telerik.com/kendo-ui/multiselect/index - 看起来实际的 ul.k-list 元素附加到小部件 div 之外的页面，因此查找不能限定在小部件中，并且 ul.list 的 id 为“#{id of select隐藏在多选小部件}_list”中。由于您的 html 在小部件的隐藏元素上似乎没有 id，因此也无法对其进行范围限制。由于所有这些，您应该能够使用

而不是执行 select(item)

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

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