Question

我使用以下html堆栈创建了自定义上传表单：

<form>
  <label></label>
  <input type="file">
</form>

文件字段通过带有display: none属性的css隐藏。因此，用户在单击标签（自定义样式）时会调用文件附加对话框。

在我的功能测试中，我无法附加文件，因为隐藏了输入字段。我尝试过几种可能的解决方案，但它们都不起作用：

find(:xpath, '//input', visible: false).set(some_file_path)

或

within('form') do                                                                                                                                                                       
  attach_file(:input, some_file_path, visible: false)                                                                                                                                          
end

还有很多其他人。所有的时间我最终都无法点击未知位置错误的元素。删除与输入字段重叠的标签后，将其显示为可见并运行我的规范。所以这里的问题是：

输入文件字段具有display: none属性（因此无法找到）
有一个标签与隐藏文件字段重叠（可能）

有没有办法让Capybara与Capybara-webkit驱动程序以一种理智的方式处理这种微妙的情况？

Answer 1

使用capybara-webkit，您可以告诉驱动程序在页面上下文中运行您想要的任何JavaScript，这样您就可以编写一些自定义内容来解决可见性问题：

script = "$('thelabel').toggle(); " # hide the label
script << "$('myfield').toggle();"  # show your field

page.driver.browser.execute_script(script)

这是伪代码，但您应该可以执行类似的操作，以便在您调用attach_file之前显示该字段。

那就是说，每次（我至少）在我的测试中做一些有点粗略的事情，最好快点一下，询问是测试还是需要修复的界面。如果您对界面感到满意，您应该能够使用如上所述的小js片段来获得测试中可见的元素。

更新

对这种行为的支持已经变得更加普遍，现在在水豚中已经标准化了，所以你可以这样做：

page.execute_script(script)

此较短版本应与capybara 2.x及capybara-webkit或poltergeist的最新版本配合使用，这是我现在正在使用的较低依赖性替代方案。

还有一个合作伙伴方法，evaluate_script：

result = page.evaluate_script('4 + 4');

希望这有帮助！

Answer 2

Matt Sanders建议使用JS来切换元素的可见性。这会起作用，但这是另一个更清洁的解决方案，IMO。

我建议仅在必要时包含隐藏字段。要做到这一点，我当你真正想要Capybara包含时，使用这个助手来处理那些罕见的情况隐藏的领域。例如：

# features/support/capybara_helpers.rb
module CapybaraHelpers
  # By default, capybara will ignore all hidden fields. This is a smart default
  # except in rare cases. For example, our AS3 file uploader requires you to
  # click a hidden file field - and that makes perfect sense. In those rare
  # cases, you can use this helper to override the default and force capybara
  # to include hidden fields.
  #
  # Examples
  #
  #   include_hidden_fields do
  #     attach_file("hidden-input", "path/to/fixture/file")
  #   end
  #
  def include_hidden_fields
    Capybara.ignore_hidden_elements = false
    yield
    Capybara.ignore_hidden_elements = true
  end
end
World(CapybaraHelpers)

Answer 3

对于其他人，可能会觉得这很有用：

有时'切换'是不够的，然后检查'不透明度'（不应该为零）：

script = "$('#file-field').css({opacity: 100, display: 'block'});"
page.driver.browser.execute_script(script)

Answer 4

现在有一个选项“ make_visible” https://camel.apache.org/manual/latest/camel-3-migration-guide.html

Answer 5

试试这个

file_field = page.find('input[type="file"]', visible: false) file_field.set('path/to/my/image.jpg')

Capybara，capybara-webkit和自定义文件上传表单

5 个答案:

更新