在使用 capybara-webkit 时遇到问题 attach_file 上传图片

Question

我想测试将图像添加到应用程序的功能。我怎样才能做到这一点。 attach_file 方法无效。不知道为什么。

html:

<form id="edit_user_5577b0c4a851ac600c000002" class="form-horizontal user-settings" method="post" enctype="multipart/form-data" action="/tardis54" accept-charset="UTF-8">
    <div id="upload-avatar" class="control-group">
        ::before
        <label class="control-label" for="user_avatar">
            Setting avatar
        </label>
        <div class="controls">
            <div class="form-fileupload">
                <div class="image-preview">
                    <img class="gravatar img-circle" width="60" height="60" src="http://gravatar.com/avatar/7046a07b25397e4a0c838a47c88d8742?default=identicon&secure=false&size=60" data-retina-url="http://gravatar.com/avatar/7046a07b25397e4a0c838a47c88d8742?default=identicon&secure=false&size=120" alt="tardis54"></img>
                </div>
                <span class="btn btn-fileinput btn-default">
                    <span>
                        Choose file ...
                    </span>
                    <input id="user_avatar" class="input-file" type="file" name="user[avatar]"></input>
                </span>
            </div>
        </div>
   </div>
    <div class="form-actions pull-right">
        <input class="btn btn-large btn-primary" type="submit" value="Update" name="commit"></input>
    </div>
</form>

测试代码：

scenario "upload a custom avatar" do
    attach_file("user[avatar]", Rails.root + "temp4.png")
end

错误日志：

Failure/Error: attach_file("user[avatar]", Rails.root + "temp4.png")
 Capybara::Webkit::ClickFailed:
   Failed to click element /html/body/div[@id='content']/div/div/div/div/div/div[2]/form[@id='edit_user_5580e19da851ac6a51000002']/div[@id='upload-avatar']/div/div/span/input[@id='user_avatar'] 
because of overlapping element /html/body/div[@id='content']/div/div/div/div/div at position 740, 627;

Answer 1

我可以假设输入 [type=file] 不可见，因此您首先需要使其可见 f.e。执行 javascript $("input[type=file]").show() 然后附加文件

Answer 2

您似乎在使用 CSS 在 HTML 输入之上叠加另一个元素。有些人这样做是因为很难直接设置 HTML 文件输入的样式。但是，这样做会破坏 capybara-webkit，因为它需要单击实际的 HTML 输入字段，并且样式元素位于它的顶部。

GitHub issue 正在讨论这个问题。

您可以在测试中使用 execute_script 隐藏覆盖元素，然后尝试上传文件来解决此问题。

Answer 3

我找到了解决这个问题的方法。

script = "$('#user_avatar').css({opacity: 100, display: 'block', position: 'relative', left: ''});" page.execute_script(script)

Answer 4

这是我对@tardis 答案的实现（它本身就是对@joe-ferris' 建议的实现）。我把它作为能够使用代码格式的答案。

# spec/support/file_uploads.rb
module FileUploads
  # Enables file uploads by capybara-webkit on pages that 
  # style file their input fields
  def attach_file_styled_input(element_id, file)
    page.execute_script("$('##{element_id}')" +
      ".css({opacity: 100, display: 'block', position: 'relative', left: ''});")
    attach_file element_id, file
  end
end

不要忘记在 spec/rails_helper.rb 中包含此支持模块：

config.include FileUploads

然后像这样在您的功能规范中使用它（并不壮观）：

attach_file_styled_input 'my_input_id', 'my_file'

在使用 capybara-webkit 时遇到问题 attach_file 上传图片

have trouble with using capybara-webkit attach_file upload an image

ruby-on-rails

capybara

capybara-webkit