Ruby on Rails - 在使用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

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

这正在 GitHub 问题中讨论。

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

Answer 2

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

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

Answer 3

我可以假设input[type=file]不可见，因此您首先需要使其可见，例如执行javascript $（"input[type=file]"）.show（）并附加文件

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'