Capybara: won't select bootstrap button group

Question

I have the following button group that I cannot get Capybara w/ Selenium to select for:

<div class="btn-group hidden-sm" data-toggle-name="user[attributes][0][customization_id]" data-toggle="buttons">
  <label class="btn btn-default active">
    <input type="radio" value="17">
      Stocky body
  </label>
  <label class="btn btn-default">
    <input type="radio" value="16">
      Round body
  </label>
</div>

I have tried to following:

click_button 'Stocky body'

find(:xpath, "//input[@value='16']").click

and

find(:xpath, "//input[@type='radio'][@value='16']").click

At this point I've ready over an hour of :xpath and Capybara answers and they all see to be saying that the :xpath code should at least work.

Can anyone shed light on what I'm doing wrong here?

Answer 1

I found the solution, because input tags aren't closed I need to use Capybara and find the tags.

The following code was able to work:

page.find('label', text: 'Stocky body').click

Hope this helps anyone else trying to use Capybara with Bootstrap-styled selectors!

Answer 2

Isn't click_button a function? So use click_button('Stocky body') in stead. And then "Stocky body" is not a button. At least not one as specified by html.

Also, your html is mall-formatted potentially causing a problem with your xpath. Your input tags are not closed.

Answer 3

FWIW, most likely to future me, one reason Capybara's choose may not be working is because your labels aren't inline.

In my case with Capybara, Simple Form, and Bootstrap this post describes the problem and solution