ruby on rails - Capybara is failing to find a checkbox by id / name -
i have rails project using rspec 3.4.0 capybara 2.6.2 , capybara-webkit 1.8.0
i have form html 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 don't have company logo, put image of 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> 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 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 box include links 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 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 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 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 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 available in few areas in scotland, uk. enter postcode of hosting 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 have simple capybara command check social checkbox:
check("social") however fails error:
failure/error: check("social") capybara::elementnotfound: unable find checkbox "social" i have tried debugging , used save_and_open_screenshot make sure checkbox visible....and is:
help please!
if inspect page in real browser, see actual checkbox hidden , replaced image or other element can styled same across multiple browsers. if case can click label instead
find('label[for="social"]').click or if willing use master branch of capybara can do
find(:label, for: 'social').click 
Comments
Post a Comment