Capybara & Bootstrap dropdown not able to select an option

Question

Here's the dropdown menu:

<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>

I'm trying to select that "Create Account" option from the dropdown. I can get capybara to click on the dropdown and expand the list, but I can't get it to select the correct option--resulting in a null value failure when it clicks on Add Tag.

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

Thomas Walpole Thomas Walpole · Accepted Answer · 2016-02-24T18:17:57

Because no elements is a valid return, #all doesn't wait for elements to appear on the page by default. Since your dropdown probably has an animation when it's opening, #all is looking for the element before it's had time to appear on the page. There are a couple of solutions you could use

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

Force it to wait for 2 li elements to be visible on the page - could also use minimum, maximum, between.

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

Look for the li by its content which will automatically wait for it to appear.

Note: this will only work if the li accepts the click -- you may need to adjust the selectors to select the element if that's where the click is listened for.

Capybara & Bootstrap dropdown not able to select an option

1 Answers