How to check a checkbox in capybara?

Question

I'm using Rspec and Capybara.

How can I write a step to check a checkbox? I've tried check by value but it can't find my checkbox. I'm not sure what to do, as I have in fact same ID with different values

Here is the code:

 <input id="cityID" type="checkbox" style="text-align: center; opacity: 0;" value="61" name="cityID">
 <input id="cityID" type="checkbox" style="text-align: center; opacity: 0;" value="62" name="cityID">
 <input id="cityID" type="checkbox" style="text-align: center; opacity: 0;" value="63" name="cityID">

Solution 1

I found the following worked for me:

# Check
find(:css, "#cityID[value='62']").set(true)

# Uncheck
find(:css, "#cityID[value='62']").set(false)

Solution 2

It's better not to create multiple elements with the same id, so that (and not only for that) you can easily check/uncheck a checkbox with elegant

check 'cityID'
uncheck 'cityID'

If one can not avoid multiple elements with the same id and still needs to check a checkbox with certain value, he can do so with

find(:css, "#cityID[value='62']").set(true)
find(:css, "#cityID[value='62']").set(false)

More information on capybara input manipulations can be found here

Solution 3

When running capybara test, you got the page object. This you can use to check/uncheck any checkboxes. As @buruzaemon already mentioned:

to find and check a checkbox by name, id, or label text.

So lets assume you got a checkbox in your html like:

<label>  
  <input type="checkbox" value="myvalue" name="myname" id="myid">
  MyLabel
</label>

You could check this with:

page.check('myid')
page.check('MyLabel')
page.check('myname')

Uncheck is the same just use page.uncheck method.

Solution 4

I think you may have to give unique ids to your form elements, first of all.

But with regards to Capybara and checkboxes, the Capybara::Node::Actions#check instance method will allow you to find and check a checkbox by name, id, or label text.

Solution 5

If the box is associated with text, e.g. 'Option 3', then as of capybara 3.0.3 you can just do

check 'Option 3'

View more solutions

Comments

[TangibleDream]

@Jon M I have some odd id with empty brackets so for the check example... find(:css, "#cityID[value='62']").set(true) will work but find(:css, "#cityID[][value='62']").set(true) will not be found and fail. How do I run the same function with an empty bracket id?

[Jon M]

@TangibleDream just to clarify - are you saying the checkbox has an ID of '[]'?

[TangibleDream]

@Jin M Yes, it looks like so <input type="checkbox" name="Extrapainful[]" id="Extrapainful[]" ''="" value="12345" onclick="selectThisPain(this);">

[Jon M]

I guess you'll just need to escape the square brackets, similar to this question. Maybe something like find(:css, "#Extrapainful\\[\\][value='12345']").set(true).

[TangibleDream]

@Jon M arrgh \\[\\] throws back findElements execution failed; Unable to locate an element with the xpath expression .//Extrapain\[\][ @value = '12345'] because of the following error: Error: INVALID_EXPRESSION_ERR: DOM XPath Exception 51 (Selenium::WebDriver ::Error::InvalidSelectorError)

[TangibleDream]

on the other hand if I do \[\] I get... unexpected ']' after '[' (Nokogiri::CSS::SyntaxError) (eval):3:in _racc_do_parse_c' (eval):3:in do_parse'

[Jon M]

I couldn't find a way to make this work with the CSS selector at all! There must be some way to escape the square bracket but I couldn't find it. I had to resort to an XPath finder: find(:xpath, ".//input[@id='Extrapainful[]'][@value='12345']").set(true)

[Mark Weston]

This is one of those answers that works technically, but doesn't really make full use of the Capybara DSL. See the answer below

[agmin]

solid answer, seems cleaner than the accepted answer using css selectors (even if that's what the check method does underneath the covers)

[rept]

@MarkWeston indeed, I have the similar experience. Using Installero answer works perfectly and seems much simpler.

[Pure Function]

Can I mark this answer down... I know it works, but its counter intuitive to mark up an answer that isn't part of the simple api available: check('name, id or text here') (see answer below)

[Jacob]

agree with the above -- "check" and "uncheck" are provided for this purpose. rubydoc.info/github/jnicklas/capybara/Capybara/Node/…

[B Seven]

Yep, this is the best answer. It is cleaner and it closely mimics the user action. It does not pollute the form with extra id's and it makes the tests easy to read.

[bigtunacan]

I agree this is cleaner. Interestingly though, the accepted answer isn't much different from how the check method is implemented in Capybara. def check(locator, options={}) find(:checkbox, locator, options).set(true) end

[Sam Joseph]

if one looks at the capybara tests github.com/jnicklas/capybara/blob/master/lib/capybara/spec/… and associated views github.com/jnicklas/capybara/blob/master/lib/capybara/spec/… it seems clear that the way check is intended to be used is with a proper HTML label ...

[ihaztehcodez]

It's also better to not create multiple elements with the same id because it's not valid HTML. That should not be an issue if using rails form helpers properly.

[NotAnAmbiTurner]

(1) I do not think click on its own is a valid capybara command (or at least if it is, it doesn't seem to be on the docs), and (2) if it was, it would probably toggle the checkbox, not make sure it was on or off

[Mike Vallano]

Thanks, and this is the same answer according to the docs: rubydoc.info/github/jnicklas/capybara/master/Capybara/Node/… "Find a check box and mark it as checked. The check box can be found via name, id or label text."

[Nesha Zoric]

I would like to add that the checkbox/uncheck only accepts the following values: id, name or related label element. Here you can read more about it.

[sloneorzeszki]

This response should be at the top, not the 8 years old syntax.

[Geoff Gustafson]

actually for the scenario described by the author, the answer from @samuel is the right own

[pastullo]

Thank you! This worked perfectly with a Boostrap 4 custom checkbox field. Also, in case you need to uncheck it, you can: uncheck 'checkbox[name]', allow_label_click: true

[holyonline]

Great answer! This works really well!