Question

这是下拉菜单：

<div class="btn-group bootstrap-select dropup open">
  <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="taggings_tag_id" title="Nothing selected" aria-expanded="true">
    <span class="filter-option pull-left">Nothing selected</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
  </button>
  <div class="dropdown-menu open" style="max-height: 484px; overflow: hidden; min-height: 92px;">
    <ul class="dropdown-menu inner" role="menu" style="max-height: 472px; overflow-y: auto; min-height: 80px;">
      <li data-original-index="0" class="selected">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text"></span>
          <span class="glyphicon glyphicon-ok check-mark">
          </span>
        </a>
      </li>
      <li data-original-index="1">
        <a tabindex="0" class="" style="" data-tokens="null">
          <span class="text">Create Account</span>
          <span class="glyphicon glyphicon-ok check-mark"></span>
        </a>
      </li>
    </ul>
  </div>
  <select class="selectpicker" id="taggings_tag_id" name="taggings[tag_id]" tabindex="-98">
    <option value=""></option>
    <option value="1">Create Account</option>
  </select>
</div>

我试图选择＆＃34;创建帐户＆＃34;下拉列表中的选项。我可以让capybara单击下拉列表并展开列表，但是我无法选择正确的选项 - 当它点击Add Tag时会导致null值失败。

it 'adds a tag' do
  page.find(:xpath, "//button[@title='Nothing selected']").click
  option=all("ul.dropdown-menu.inner > li").last
  option.click
  find('input[value="Add Tag"]').trigger("click")
  expect(page).to have_content 'Create Account'
end

Answer 1

由于没有元素是有效的回报，#all默认情况下不会等待元素出现在页面上。由于您的下拉列表在打开时可能会有动画，因此#all正在查找该元素，然后才能在页面上显示该元素。您可以使用几种解决方案

option=all("ul.dropdown-menu.inner > li", count: 2).last

强制它等待2 li元素在页面上可见 - 也可以使用最小值，最大值。

option=find("ul.dropdown-menu.inner > li", text: "Create Account")

通过其内容查找li，它会自动等待它出现。

注意：这仅在li接受点击时才有效 - 您可能需要调整选择器以选择元素，如果这样，则会听到点击。

水豚＆amp; Bootstrap下拉列表无法选择选项

1 个答案: