I'm having problems selecting an option with Capybara in a form made with Bootstrap and I don't know why.
This is how the form is actually written:
<div class="control-group radio_buttons optional application_read">
<label class="radio_buttons optional control-label">Read</label>
<div class="controls">
<span class="radio">
<label for="application_read_true">
<input class="radio_buttons optional" type="radio" value="true" name="application[read]" id="application_read_true">Yes
</label>
</span>
<span class="radio">
<label for="application_read_false">
<input class="radio_buttons optional" type="radio" value="false" checked="checked" name="application[read]" id="application_read_false">No
</label>
</span>
</div>
</div>
What I'm attempting to do is select the first Radio button with "Yes" label (so Read: Yes) this way:
find("#application_read_true").click
but it doesn't affect the form in any way.
How can I select the True option under the 'Read' label? Thanks in advance.
Try this:
choose("application_read_true")
But I believe that this should work too if you have only one radio button with "Yes" caption
choose("Yes")
Related
I’m using simple forms. The following line is what I have
=f.input :live_mode, as: :radio_buttons, label: false
which produces the following markup
<div class="form-group radio_buttons optional facility_live_mode"> .
<input type="hidden" name="facility[live_mode]" value="">
<label class="radio">
<label for="facility_live_mode_true">
<input class="radio_buttons optional" type="radio" value="true" name="facility[live_mode]" id="facility_live_mode_true">
Yes
</label>
</label>
<label class="radio">
<label for="facility_live_mode_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" checked="checked" name="facility[live_mode]" id="facility_live_mode_false">
No
</label>
</label>
</div>
The wrapper label is the result of setting config.item_wrapper_tag in simple_form.rb to :label which matches the markup of the custom theme I’m using.
What I want to achieve is this
<input type="hidden" name="facility[live_mode]" value="">
<label class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" type="radio" value="true" name="facility[live_mode]" id="facility_live_mode_true">
<span class="custom-control-label">Yes</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
<input class="custom-control-input" readonly="readonly" type="radio" value="false" checked="checked" name="facility[live_mode]" id="facility_live_mode_false">
<span class="custom-control-label">No</span>
</label>
but I have no idea how to go about doing this. Simple form config file provides a few options for customization but nothing that can produce the output that I need.
Is there something I can do to make this happen?
Bootstrap 4 introduces custom forms to customize checkboxes and radio buttons. Here is a way to generate the following templates with Simple Form?
Checkbox:
<label class="c-input c-checkbox">
<input type="checkbox">
<span class="c-indicator"></span>
Check this custom checkbox
</label>
Radio:
<label class="c-input c-radio">
<input id="radio1" name="radio" type="radio">
<span class="c-indicator"></span>
Toggle this custom radio
</label>
<label class="c-input c-radio">
<input id="radio2" name="radio" type="radio">
<span class="c-indicator"></span>
Or toggle this other custom radio
</label>
Thank you!
Just replace the input with form element:
<%= simple_form_for :foo do |f| %>
<label class="c-input c-checkbox">
<%= f.check_box :bar %>
<span class="c-indicator"></span>
Check this custom checkbox
</label>
<% end %>
Which will generate:
<label class="c-input c-checkbox">
<input name="foo[bar]" type="hidden" value="0">
<input type="checkbox" value="1" name="foo[bar]" id="foo_bar">
<span class="c-indicator"></span>
Check this custom checkbox
</label>
Check the bootply.
Same goes for your second example, just replace the elements with RoR's form elements.
I tried to use this form to put checkboxes on a form:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
My problem is that when I try to get the checkboxes checked with my parameters, I always can get only one (the last one checked, example: if I check 1 and 2, I will get 2 only).
How can I do to get them in my controller?
Thanks in advance
Try giving your inputs a name attribute with unique value attributes and unique id attributes.
Example:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" id="first" value="1" name="box-selections[]" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="second" value="2" name="box-selections[]"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off" id="third" value="3" name="box-selections[]"> Checkbox 3
</label>
</div>
I am making an acceptance test on Ruby on Rails 3.0.11 with Capybara 1.1.2, and trying to select two checkboxes in a form.
Here is the view code for the checkboxes (using haml 3.1.3 and simple_form 2.0.4):
= f.input :countries,
:collection => MusicTeaser.teaser_countries,
:as => :check_boxes
The collection looks like this:
[["AT", "at"], ["CH", "ch"], ["DE", "de"], ["ZA", "za"]]
And the HTML generated:
<div class="input check_boxes optional">
<label class="check_boxes optional control-label">Countries</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_at" name="music_teaser[countries][]" type="checkbox" value="at">AT
</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_ch" name="music_teaser[countries][]" type="checkbox" value="ch">CH
</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_de" name="music_teaser[countries][]" type="checkbox" value="de" checked="">DE
</label>
<label class="checkbox">
<input class="check_boxes optional" id="music_teaser_countries_za" name="music_teaser[countries][]" type="checkbox" value="za">ZA
</label>
<input name="music_teaser[countries][]" type="hidden" value="">
</div>
The code to select them looks like this (pretty straightforward):
check 'music_teaser_countries_de'
check 'music_teaser_countries_za'
I expected that, on submit, the countries param would look like this:
params[:music_teaser][:countries] = ["de", "za"]
But it appears as this:
params[:music_teaser][:countries] = ["deza"]
So it seems like Capybara is doing something wrong when selecting more than one checkbox. Ideas?
Using Capybara I cannot for the life of me select a checkbox on my form.
In my request spec I've tried:
check("First Name")
page.check("First Name")
page.check("pickem_option_ids_10")
find(:css, "#pickem_option_ids_11[value='11']").set(true)
find(:css, "#pickem_option_ids_11").set(true)
Snippet from my form:
<div class="control-group check_boxes optional">
<label class="check_boxes optional control-label">Options:</label>
<div class="controls">
<label class="checkbox">
<input class="check_boxes optional" id="pickem_option_ids_10" name="pickem[option_ids][]" type="checkbox" value="10" />First Name
</label>
<label class="checkbox">
<input class="check_boxes optional" id="pickem_option_ids_11" name="pickem[option_ids][]" type="checkbox" value="11" />Middle Name
</label>
</div>
</div>
I got some of the find() ideas from this SO thread.
I've had some success in other specs where I have a single checkbox with a label of Active and I just say check("Active").
Had the same problem today, I looked around and this seemed to work:
find(:xpath, "//input[#value='10']").set(true)
of course you can replace '10' with anything you want - just check your HTML and use your value.
Hope that helps.
Capybara can't find checkbox "First Name" because your html is wrong. Your html should look like
<label class="checkbox" for="pickem_option_ids_10">First Name</label>
<input class="check_boxes optional" id="pickem_option_ids_10" name="pickem[option_ids][]" type="checkbox" value="10" />
In your view code
= label_tag "pickem_option_ids_10", "First Name"
= check_box_tag "pickem_option_ids_10", 10
Then check("First Name") should work.
Otherwise you can find("#pickem_option_ids_10").check