在 RSPEC 中使用 Capybara 定位元素

Question

How can get or locate the element for uploading image when using bootstrap upload file.

这是我要上传的html。

<input id="input-id" name="user[image]" type="file" class="file" data-preview-file-type="text" data-show-preview="false" data-show-upload="false" data-show-caption="true" />

这是在浏览器中呈现的html：

<span class="file-input file-input-new">
<div class="kv-upload-progress hide"></div>
<div class="input-group ">
   <div tabindex="-1" class="form-control file-caption  kv-fileinput-caption">
   <span class="file-caption-ellipsis">…</span>
   <div class="file-caption-name"></div>
</div>
   <div class="input-group-btn">
       <button type="button" title="Clear selected files" class="btn btn-default fileinput-remove fileinput-remove-button"><i class="glyphicon glyphicon-trash"></i> Remove</button>
       <button type="button" title="Abort ongoing upload" class="hide btn btn-default fileinput-cancel fileinput-cancel-button"><i class="glyphicon glyphicon-ban-circle"></i> Cancel</button>

       <div class="btn btn-primary btn-file"> <i class="glyphicon glyphicon-folder-open"></i> &nbsp;Browse … <input id="input-id" name="user[image]" type="file" class="file" data-preview-file-type="text" data-show-preview="false" data-show-upload="false" data-show-caption="true"></div>
   </div>
</div>
</span>

这是我的 Capybara 代码定位和传递图像：

attach_file('what_here', Rails.root + 'public/sample.jpg')

我在上面为 what_here 尝试了不同的值，但不幸的是我得到了错误：

Failure/Error: attach_file('file-caption', Rails.root + 'public/sample.jpg')

     Capybara::ElementNotFound:
       Unable to find file field "file-caption(tried diff. selector here)"

请帮忙！

Answer 1

这是失败的，因为文件输入在页面上不可见。这对于文件输入很常见，因为它们通常被隐藏以允许使用其他 srylable 元素。要测试它们，您需要使用 execute_script 来调整元素的 CSS，使其在页面上可见，然后可以对其调用 attach_file。您需要添加到元素的 CSS 取决于它的隐藏方式、不透明度、zindex、位置等。一旦您使其可见，您就可以执行

attach_file('input-id', ...)

在 RSPEC 中使用 Capybara 定位元素

Locate element using Capybara in RSPEC

rspec

capybara

capybara-webkit