title: Capybara: Unable to find css
body: <p>I am using capybara to click a checkbox, however it can't seem to find it no matter what I do. I am able to correctly find both the span and the label inside the span, but not the input I actually need.</p>
  
  <p>Here is the checkbox</p>
  
  <pre><code>&lt;span class="checkbox tos"&gt;
    &lt;input id="agreement" name="agreement" onclick="agreeValidate();" type="checkbox" value="false"&gt;
    &lt;label for="agreement"&gt;I accept the &lt;a href="http://www.dev.com:3000/terms" target="_blank"&gt;Terms of Use&lt;/a&gt;, &lt;a href="http://www.dev.com:3000/privacy" target="_blank"&gt;Privacy Policy&lt;/a&gt;, and am at least 13 years old&lt;/label&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>And here are some of the things I have tried</p>
  
  <pre><code>page.check('agreement')
  find(:css, '#agreement').set(true)
  find('#agreement').set(true)
  find('#agreement').click
  </code></pre>
  
  <p>However, they all give me the same error</p>
  
  <pre><code>Unable to find css "#agreement" (Capybara::ElementNotFound)
  </code></pre>
  
  <p>I am also wondering will any of these methods fire off the <code>onclick</code> method, when the checkbox is clicked? I feel like <code>find(:css, '#agreement').set(true)</code> will not trigger the <code>onclick</code> event. However, I am not sure about the rest.</p>
  
  <p><strong>Update</strong></p>
  
  <p>I have also tried selecting the element through xpath. Here are the various things I have found out</p>
  
  <pre><code>find(:xpath, '//*[@id="registration"]/span[2]')
  </code></pre>
  
  <p>This is able to find the <code>span</code> element no problem</p>
  
  <pre><code>find(:xpath, '//*[@id="registration"]/span[2]/input')
  </code></pre>
  
  <p>This can't find the element I need, but this xpath correctly selects the element in chrome's console</p>
  
  <pre><code>find(:xpath, '//*[@id="agreement"]')
  </code></pre>
  
  <p>This can't find the element I need, but the xpath selects the element in chrome's console</p>
  
  <pre><code>find(:xpath, '//*[@id="registration"]/span[2]/label')
  </code></pre>
  
  <p>This is able to find the <code>label</code> element in the <code>span</code> with no problem.</p>