Choosing a Twitter Bootstrap Radio Button in RSpec with Capybara

29 Apr 2014

RSpec + Capybara + Simple From + Twitter Bootstrap

Choosing a radio button

This might seem like a weird topic or something better put on Stack Overflow, but it took me a bit to figure out what was going wrong, so I figured it'd be a good change to update my blog with a new post.

I had a non-standard form that I was setting up some Capybara testing to flesh out. However no matter how hard I tried I couldn't the simple Capybara selector to work, nor could I find anything decent with Google-Fu. Everything I had been finding was incredibly complex for something that should just work.

The Problem

I was trying to render this on a form, via haml and simple_form.

# evaluation_selection is an Array of Structs with attributes :id and :label

# portion of form that generates the radio buttons
= f.input :eval_type, as: :radio_buttons, collection: evaluation_selector_enum, label_method: :label, value_method: :id

This yields a pretty basic radio button group with this html.

<label class="radio"><input class="radio_buttons required" id="new_eval_eval_type_myevaluation" name="new_eval[eval_type]" type="radio" value="MyEvaluation">Self evaluation only</label>

But closer inspection in Google Chrome Inspector reveals one crucial piece of information.

Do you see it?

The label is not inline. D'oh!

The fix

So in your Capybara specs, you'll never really select the thing you need to, the radio button. To fix this, you need to correct the simple_form helper to look like this.

# evaluation_selection is an Array of Structs with attributes :id and :label

# portion of form that generates the radio buttons
= f.input :eval_type, as: :radio_buttons, collection: evaluation_selector_enum, label_method: :label, value_method: :id, inline_label: true

Now refreshing the page and yields this html.

<label class="radio"><input class="radio_buttons required" id="new_eval_eval_type_myevaluation" name="new_eval[eval_type]" type="radio" value="MyEvaluation">Self evaluation only</label>

No big difference, until we look at it in Google Chrome Inspector.

Our label is now inline and Capybara can happily select it!

David Southard

a ruby guy

Contact Info: