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 issue中讨论这个问题。

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

Answer 2

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

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

Answer 3

我可以假设输入[type = file]不可见，因此您最初需要使其显示为f.e.执行javascript $（＆＃34;输入[type = file]＆＃34;）。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'

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

4 个答案: