Capybara未能通过id / name找到复选框

Question

我有一个使用rspec 3.4.0 capybara 2.6.2和capybara-webkit 1.8.0

的rails项目

我的表单的html如下：

<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>

我有一个简单的capybara命令来检查社交复选框：

check("social")

然而它始终失败并出现错误：

Failure/Error: check("social")

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

我尝试过调试，甚至使用save_and_open_screenshot确保复选框可见....它是：

请帮忙！

Answer 1

如果您在真实的浏览器中检查页面，您可能会看到实际的复选框被隐藏并替换为图像或其他元素，这些元素可以在多个浏览器中设置为相同。如果是这种情况，您可以单击标签

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

或者如果您愿意使用Capybara的主分支，您可以

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