Capybara is failing to find a checkbox by id / name

Question

I have a rails project using rspec 3.4.0 capybara 2.6.2 and capybara-webkit 1.8.0

I have form whose html is as follows:

<form class="jsForm padding " id="edit_seller_profile_20" enctype="multipart/form-data" action="/seller_profile" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch"><input type="hidden" name="authenticity_token" value="RBjidiRHSDaPNRVmmfVBArIQL/MvjdWcm3897r5+gLuekmWtwROLhslAcVMgxyYde9EJ6KgsWdsgYxZvLqdC7g==">
      <div class="row no-padding-bottom" id="first">

        <!-- Popover START -->
        <div class="helper">
          <a tabindex="0" id="pop-trigger" role="button" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="If you don't have a company logo, you could just put an image of yourself in here." data-original-title="" title="">
            <div class="help-mark"></div>
          </a>
        </div>
        <!-- Popover END -->

        <div class="col-xs-12 no-margin-bottom profile-photo">
          <p class="text-center">
              <img alt="qwewq qweeq" class="img-circle img-thumbnail jsLogo" height="170" width="170" src="/assets/shared/default_provider.jpg">
          </p>
          <label class="profile upload-img">
            <input class="hidden jsUpload" type="file" name="seller_profile[business_logo]" id="seller_profile_business_logo">
            <button type="button" class="btn btn-primary">Change logo</button>
          </label>
        </div>
      </div>
      <div class="row no-padding-bottom">
        <div class="alert alert-success alert-dismissible hidden upload" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
          <strong>Nice!</strong> Your new company logo image has been selected.
        </div>
        <label for="name">Company name</label>
        <br>
        <input class="input" size="30" type="text" value="dwdwqwqd" name="seller_profile[business_name]" id="seller_profile_business_name">
        <div class="errors">
        </div>
        <br>
      </div>
      <div class="row no-padding-bottom">
        <label for="email">Company email address</label>
        <br>
        <input class="input" size="30" type="text" value="dqwdwdwq@adwdw.com" name="seller_profile[business_email]" id="seller_profile_business_email">
        <div class="errors">
        </div>
        <br>
      </div>
      <div class="row no-padding-bottom">
        <label for="telephone">Company telephone</label>
        <br>
        <input class="input" size="30" type="text" value="412421313" name="seller_profile[business_phone_number]" id="seller_profile_business_phone_number">
        <div class="errors">
        </div>
        <br>
      </div>
      <div class="row">
        <label for="about">About your company</label>
        <br>
        <textarea class="input" maxlength="250" name="seller_profile[business_description]" id="seller_profile_business_description" cols="30">dwdwqwdqdqqwdw</textarea>
        <div class="errors">
        </div>
        <div id="small-text">250 characters remaining</div>
      </div>
      <div class="row">
        <input id="social" class="input" name="social" type="checkbox" value="" >
        <label id="for-checkbox" for="social"><span></span>Check this box to include links to social media</label>
        <br>
      </div>

      <!-- Social Links START -->
      <div class="row" id="social-links-add" style="display: none;">
        <div onclick="$('#reveal-facebook').show(); $('#facebook-placeholder').hide();" class="social-placeholder" id="facebook-placeholder">
          <img style="width:32px; height:32px;" src="/assets/shared/plus.png" alt="Plus"><p>Add link to Facebook</p>
        </div>
        <div id="reveal-facebook" class="row">
          <div class="col-xs-12">
            <div class="input-group">
              <span id="facebook" class="input-group-addon"><i class="fa fa-lg fa-facebook-square text-fb"></i></span>
              <input class="form-control input-lg" placeholder="Facebook Page URL" type="text" value="" name="seller_profile[business_facebook_url]" id="seller_profile_business_facebook_url">
            </div>
            <div class="errors">
            </div>
          </div>
        </div>
        <div onclick="$('#reveal-twitter').show(); $('#twitter-placeholder').hide();" class="social-placeholder" id="twitter-placeholder">
          <img style="width:32px; height:32px;" src="/assets/shared/plus.png" alt="Plus"><p>Add link to Twitter</p>
        </div>
        <div id="reveal-twitter" class="row">
          <div class="col-xs-12">
            <div class="input-group">
              <span id="twitter" class="input-group-addon"><i class="fa fa-lg fa-twitter-square text-twitter"></i></span>
              <input class="form-control input-lg" placeholder="Twitter Username" type="text" value="" name="seller_profile[business_twitter_url]" id="seller_profile_business_twitter_url">
            </div>
          </div>
        </div>
        <div onclick="$('#reveal-instagram').show(); $('#instagram-placeholder').hide();" class="social-placeholder" id="instagram-placeholder">
          <img style="width:32px; height:32px;" src="/assets/shared/plus.png" alt="Plus"><p>Add link to Instagram</p>
        </div>
        <div id="reveal-instagram" class="row">
          <div class="col-xs-12">
            <div class="input-group">
              <span id="instagram" class="input-group-addon"><i class="fa fa-lg fa-instagram"></i></span>
              <input class="form-control input-lg" placeholder="Instagram Username" type="text" value="" name="seller_profile[business_instagram_url]" id="seller_profile_business_instagram_url">
            </div>
          </div>
        </div>
        <div onclick="$('#reveal-pinterest').show(); $('#pinterest-placeholder').hide();" class="social-placeholder" id="pinterest-placeholder">
          <img style="width:32px; height:32px;" src="/assets/shared/plus.png" alt="Plus"><p>Add link to Pinterest</p>
        </div>
        <div id="reveal-pinterest" class="row">
          <div class="col-xs-12">
            <div class="input-group">
              <span id="pinterest" class="input-group-addon"><i class="fa fa-lg fa-pinterest-square text-danger"></i></span>
              <input class="form-control input-lg" placeholder="Pinterest Username" type="text" value="" name="seller_profile[business_pinterest_url]" id="seller_profile_business_pinterest_url">
            </div>
          </div>
        </div>
      </div>
      <!-- Social Links END -->

      <div class="row spacer text-right">
        <a class="btn btn-link" href="/users/41/listings">Cancel</a>
        <input type="submit" name="commit" value="Update" class="btn bg-btn btn-primary">
      </div>
      <!-- PostCode Checker -->
      <div class="modal fade" id="gate" tabindex="-1" role="dialog" aria-labelledby="gateLabel" style="display: none;">
        <div class="modal-dialog modal-sm" role="document">
          <div class="modal-content">
            <div class="modal-header bg-muted no-border">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h3 id="gateLabel" class="h3 modal-title text-center text-grey">Activity Location</h3>
            </div>
            <div class="modal-body no-padding-bottom">
              <p class="text-center no-margin-top intro">Currently we are only available in a few areas in Scotland, UK. Enter the postcode of where you are hosting your activity.</p>
              <div class="jsPostcode text-center spacer no-margin-bottom">
                <input placeholder="Venue postcode..." type="text" name="seller_profile[requested_postcode]" id="seller_profile_requested_postcode">
              </div>
            </div>
            <div class="modal-footer no-border text-center">
              <button name="button" type="button" class="btn btn-lg btn-primary spacer no-margin-top jsCheck">Submit</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
</form>

and I have a simple capybara command to check the social checkbox:

check("social")

However it always fails with error:

Failure/Error: check("social")

     Capybara::ElementNotFound:
       Unable to find checkbox "social"

I have tried debugging and even used the save_and_open_screenshot to make sure the checkbox is visible....and it is:

Help please!

Answer 1

If you inspect the page in a real browser, you will probably see that the actual checkbox is hidden and replaced with an image or other element that can be styled to be the same across multiple browsers. If that is the case you can click the label instead

find('label[for="social"]').click

or if you are willing to use the master branch of Capybara you can do

find(:label, for: 'social').click