Capybara is not choosing radio button without JavaScript Code Answer

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