1
У меня есть рельсы проект с использованием rspec 3.4.0capybara 2.6.2 и capybara-webkit 1.8.0Капибара не удается найти опцию по идентификатору/имени
У меня есть форма, 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="[email protected]" 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="https://stackoverflow.com/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>
и у меня есть простой водосвинку команда для проверки социальной флажок:
check("social")
Однако он всегда терпит неудачу с ошибкой:
Failure/Error: check("social")
Capybara::ElementNotFound:
Unable to find checkbox "social"
Я пытался отладки и даже использовали save_and_open_screenshot, чтобы убедиться, что флажок виден .... и это:
Помогите пожалуйста!
Я видел другие люди имеют проблемы с 'проверки 'метод. Попробуйте еще несколько способов: «find (: css,« #social »). Set (true)', 'find (« # social »). Check', или сохранить дух теста Feature,' check ("Check этот флажок включает ссылки на социальные сети »)', 'find (" label ",: text =>" Установите этот флажок, чтобы включить ссылки на социальные сети "). click' –
сначала попробуйте' binding.pry' непосредственно перед ' проверьте 'social'' и в этом 'pry' session type' check' social'' и увидите, что он вызывает ошибку. – illusionist