7

我有一个使用 Cucumber 和 Capybara 进行测试的 Rails 项目。我有一个使用 Dropzone.js 的文件上传页面。

我的上传使用对话框或拖放效果很好。测试是另一回事。

我的表单中有以下字段：

<input id="photo_image" multiple="multiple" name="image" type="hidden">

但是，在步骤定义中，我尝试了几种查找和附加文件数据的方法，但都没有奏效。

我试过fill_in：

fill_in "photo_image",  with: photo

我试过用 css 选择器找到：

find('#photo_image').set photo

我试过用 xpath 查找：

find(:xpath, "//input[@id='photo_image']").set photo

但他们都没有看到隐藏的领域。

Unable to find css "#photo_image" (Capybara::ElementNotFound)

Unable to find xpath "//input[@id='photo_image']" (Capybara::ElementNotFound)

Unable to find field "photo_image" (Capybara::ElementNotFound)

是否有任何测试方法可以使用 Dropzone.js 处理上传，还是没有希望？

4

8 回答 8

10

Capybara 2.1默认不查找隐藏元素。

您可以设置ignore_hidden_elements为 false：

Capybara.ignore_hidden_elements = false

或为您的方法添加:visible选项：

attach_file('photo_image', path_to_file, visible: false)

我更喜欢第二种变体，因为在大多数情况下，在测试中找到的元素都是可见的，如果其中一个被隐藏，最好让 Capybara 抛出异常。

注意：:visible大多数内部使用的 Capybara 方法也支持选项Capybara::Query（如find, all,has_css?等have_selector）

于 2013-05-28T20:51:01.410 回答
4

由于我只需要帮助某人解决这个问题，因此这是当前版本的 Capybara 和 dropzone.js 的更新答案。

默认情况下，Dropzone 在初始化时使用“dz-hidden-input”类在页面正文中添加一个隐藏文件字段。要将文件添加到该文件以进行测试，您可以执行

attach_file(file_path, class: 'dz-hidden-input', make_visible: true)

说明：没有已知的 id/name/label 文本，所以我们不传递定位器，而是传递class选项以将找到的文件输入限制为具有指定类的文件。然后我们指定make_visible: true让 Capybara 临时更改 CSS，以便文件输入变得可见，添加文件，然后恢复原始 CSS。

于 2017-05-28T18:10:39.697 回答
1

这里的要点是：dropzone 仅使用输入字段作为标记或作为后备。它从 dom 中删除它。如果您在成功初始化 dropzone 后检查页面的来源，您将无法再找到该元素。

因此，这不是关于隐藏的输入字段，而是关于已删除的“已消失”并且无法找到的字段，因为它不再是 dom 的一部分。

我最终做的是在规范中手动添加输入字段：

page.execute_script(%|$('#your-form').append('<input id="photo_image" name="image" type="file">');|)

这将使您的表单在 dropzone 后备模式下运行。

于 2013-08-07T19:20:17.197 回答
1

Dropzone.js 使用下一个输入来附加文件（从我的网站获取）：

<input type="file" multiple="multiple" class="dz-hidden-input" accept="image/*,application/pdf" style="visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px;">

因此，您需要做的只是运行以下代码以通过 dropzone.js 附加文件：

page.find('.dz-hidden-input', visible: false).set('file_path_here'))
于 2017-11-06T16:45:07.317 回答
1

您不需要添加新的页面执行，您需要做的就是找到 .dz-hidden-input 和 attach_file 到它...

   attach_file("path/to/file", class: "dz-hidden-input", make_visible: true)
于 2017-05-28T18:07:22.533 回答
0

我认为 Capybara 没有找到是因为您没有创建文件字段。

<input id="photo_image" multiple="multiple" name="image" type="file">

type="file" 是你想要的。type="hidden" 的输入应该只接受一个字符串。

我也在尝试测试 rspec/capybara 中的 dropzone.js 区域并撞墙。你有想过这个吗？

我在这里尝试解决方案，但没有运气：使用 Selenium 模拟将文件拖到上传元素上

于 2014-07-20T03:36:58.930 回答
0

你可以使用

it "should upload a file" do
  visit upload_file_path
  attach_file "uploadfile(id of field)", /path/to/file/to/upload
  click_button "Upload File"
end

do ... end 之间的步骤应该适用于 rspec + capybara 或 cucumber + capybara

以及为什么不使用 :js => true ，它也有助于找到隐藏的元素..

于 2013-05-28T14:06:54.050 回答
-2

您的输入类型是隐藏的，请删除它，因为水豚无法在浏览器上看到它。试试这个，它对我有用：-

web_steps.rb

When /^I attach the file "([^"]*)" to "([^"]*)"$/ do |path, field|
  attach_file(field, File.expand_path(path))
end

upload_picture.feature

 ###.....some other steps too
 When I attach the file "app/assets/images/default/accept.jpg" to "image[image]"
于 2013-05-29T12:46:59.723 回答