Rails : Capybara : When Checkboxes and Radio buttons are not found

There may come situation when you try to check(tick) the checkboxes via RSpec. using codes like

find('#agree_legal_guardian').click
find('#agree_terms').click

 

Problem was:

We have hidden the original checkbox and the fancy checkbox was being shown. Since the item was hidden Capybara was not able to find the element.

Solution

Instead of searching for hidden item, I triggered the click event on the Label for that Checkbox

within('.term-condition') do
  find('[for=agree_legal_guardian]').click
  find('[for=agree_terms]').click
end

Useful links

http://www.rubydoc.info/gems/capybara/1.0.0/Capybara/Node/Finders#find-instance_method

jQuery Selectors: Commonly Used // Rarely used // Powerful

Selectors Example Selects
* $(“*”) All elements
#id $(“#lastname”) The element with id=”lastname”
.class $(“.intro”) All elements with class=”intro”
.class,.class $(“.intro,.demo”) All elements with the class “intro” or “demo”
element $(“p”) All <p> elements
el1,el2,el3 $(“h1,div,p”) All <h1>, <div> and <p> elements
:first $(“p:first”) The first <p> element
:last $(“p:last”) The last <p> element
:even $(“tr:even”) All even <tr> elements
:odd $(“tr:odd”) All odd <tr> elements
:first-child $(“p:first-child”) All <p> elements that are the first child of their parent
:first-of-type $(“p:first-of-type”) All <p> elements that are the first <p> element of their parent
:last-child $(“p:last-child”) All <p> elements that are the last child of their parent
:last-of-type $(“p:last-of-type”) All <p> elements that are the last <p> element of their parent
:nth-child(n) $(“p:nth-child(2)”) All <p> elements that are the 2nd child of their parent
:nth-last-child(n) $(“p:nth-last-child(2)”) All <p> elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n) $(“p:nth-of-type(2)”) All <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n) $(“p:nth-last-of-type(2)”) All <p> elements that are the 2nd <p> element of their parent, counting from the last child
:only-child $(“p:only-child”) All <p> elements that are the only child of their parent
:only-of-type $(“p:only-of-type”) All <p> elements that are the only child, of its type, of their parent
parent > child $(“div > p”) All <p> elements that are a direct child of a <div> element
parent descendant $(“div p”) All <p> elements that are descendants of a <div> element
element + next $(“div + p”) The <p> element that are next to each <div> elements
element ~ siblings $(“div ~ p”) All <p> elements that are siblings of a <div> element
:eq(index) $(“ul li:eq(3)”) The fourth element in a list (index starts at 0)
:gt(no) $(“ul li:gt(3)”) List elements with an index greater than 3
:lt(no) $(“ul li:lt(3)”) List elements with an index less than 3
:not(selector) $(“input:not(:empty)”) All input elements that are not empty
:header $(“:header”) All header elements <h1>, <h2> …
:animated $(“:animated”) All animated elements
:focus $(“:focus”) The element that currently has focus
:contains(text) $(“:contains(‘Hello’)”) All elements which contains the text “Hello”
:has(selector) $(“div:has(p)”) All <div> elements that have a <p> element
:empty $(“:empty”) All elements that are empty
:parent $(“:parent”) All elements that are a parent of another element
:hidden $(“p:hidden”) All hidden <p> elements
:visible $(“table:visible”) All visible tables
:root $(“:root”) The document’s root element
:lang(language) $(“p:lang(de)”) All <p> elements with a lang attribute value starting with “de”
[attribute] $(“[href]”) All elements with a href attribute
[attribute=value] $(“[href=’default.htm’]”) All elements with a href attribute value equal to “default.htm”
[attribute!=value] $(“[href!=’default.htm’]”) All elements with a href attribute value not equal to “default.htm”
[attribute$=value] $(“[href$=’.jpg’]”) All elements with a href attribute value ending with “.jpg”
[attribute|=value] $(“[title|=’Tomorrow’]”) All elements with a title attribute value equal to ‘Tomorrow’, or starting with ‘Tomorrow’ followed by a hyphen
[attribute^=value] $(“[title^=’Tom’]”) All elements with a title attribute value starting with “Tom”
[attribute~=value] $(“[title~=’hello’]”) All elements with a title attribute value containing the specific word “hello”
[attribute*=value] $(“[title*=’hello’]”) All elements with a title attribute value containing the word “hello”
:input $(“:input”) All input elements
:text $(“:text”) All input elements with type=”text”
:password $(“:password”) All input elements with type=”password”
:radio $(“:radio”) All input elements with type=”radio”
:checkbox $(“:checkbox”) All input elements with type=”checkbox”
:submit $(“:submit”) All input elements with type=”submit”
:reset $(“:reset”) All input elements with type=”reset”
:button $(“:button”) All input elements with type=”button”
:image $(“:image”) All input elements with type=”image”
:file $(“:file”) All input elements with type=”file”
:enabled $(“:enabled”) All enabled input elements
:disabled $(“:disabled”) All disabled input elements
:selected $(“:selected”) All selected input elements
:checked $(“:checked”) All checked input elements

Source: http://www.w3schools.com/jquery/jquery_ref_selectors.asp