Capybara is not choosing radio button without JavaScript Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Capybara is not choosing radio button without JavaScript without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a Rails app with two radio buttons in a form.

I noticed that my Capybara test (using RSpec) doesn’t select the “No” radio button unless it runs with a JavaScript driver (I use selenium_chrome_headless). The test suite has many other Capybara tests that submit forms without JS, and I avoid enabling the JS driver unless needed.

In this case, I don’t understand what is preventing Capybara to select the radio button without JS.

The ERB form (using simple_form):

<%= b.input :baz,
  as: :radio_buttons,
  label: ''
%>

Which generates this HTML:

<fieldset class="form-group radio_buttons optional foo_bar_baz form-group-valid">
  <legend class="col-form-label pt-0"></legend>
  <input type="hidden" name="foo[bar_attributes][baz]" value="">

  <div class="form-check">
    <input class="form-check-input is-valid radio_buttons optional" type="radio" value="true" checked="checked" name="foo[bar_attributes][baz]" id="foo_bar_attributes_baz_true">
    <label class="collection_radio_buttons" for="foo_bar_attributes_baz_true">Yes</label>
  </div>

  <div class="form-check">
    <input class="form-check-input is-valid radio_buttons optional" readonly="readonly" type="radio" value="false" name="foo[bar_attributes][baz]" id="foo_bar_attributes_baz_false">
    <label class="collection_radio_buttons" for="foo_bar_attributes_baz_false">No</label>
  </div>
</fieldset>

And the Capybara test:

describe 'Selecting "No"', js: true do
  it 'saves the information' do
    fill_in 'Name', with: 'Alice'
    choose 'No'
    click_button 'Continue'
  end
end

Which works.

But when I run the same test without js: true, submitting the form sends the default value from foo_bar_attributes_baz_true. I don’t get an error from Capybara saying it couldn’t find or choose the radio button (though I did try giving it an id or a CSS selector, but always resulting in the same query parameters).

What could be different between the two setups (with and without a JavaScript driver) that makes the Capybara choose method not actually set the input value unless JavaScript is enabled?

Answer

This is occurring because your “No” radio button is readonly – so it can’t be selected. I assume when running with a real browser you have some JS which is removing the readonly-ness of the radio button.

Update: After thinking about this a bit more. The readonly attribute isn’t actually valid on a radio button <input> element, so there is a bug in Capybara that it is taking the attribute into account, but your HTML is also technically invalid so…

FYI: Capybara master branch should now ignore the readonly attribute on radio buttons

We are here to answer your question about Capybara is not choosing radio button without JavaScript - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji