15

我使用以下 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

还有许多其他人。一直以来，我都会遇到 Failed to click element at unknown position 错误。一旦我删除了与输入字段重叠的标签，使其可见并运行我的规范，一切都通过了。所以这里的问题是：

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

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

4

5 回答 5

16

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

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

page.driver.browser.execute_script(script)

这是伪代码，但您应该能够执行类似的操作以在调用该字段之前使其可见attach_file。

也就是说，每次（至少我）在我的测试中做一些像这样粗暴的事情时，最好花点时间询问一下是测试还是需要修复的界面。如果您对界面感到满意，您应该能够使用像上面这样的小 js 片段来让元素对您的测试可见。

更新：

对这种行为的支持已经变得更加广泛，并且现在在 capybara 中已标准化，因此您可以：

page.execute_script(script)

这个较短的版本应该与capybara 2.x 和最新版本的capybara-webkit或poltergeist一起使用，这是我现在正在使用的低依赖性替代方案。

还有一个伙伴方法，evaluate_script：

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

希望这可以帮助！

于 2013-07-06T01:09:51.367 回答
4

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)
于 2014-06-04T16:22:33.753 回答
1

现在有一个选项“make_visible” https://www.rubydoc.info/github/jnicklas/capybara/Capybara/Node/Actions%3Aattach_file

于 2020-06-15T15:49:13.830 回答
0

对于其他人，可能会发现这很有用：

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

script = "$('#file-field').css({opacity: 100, display: 'block'});"
page.driver.browser.execute_script(script)
于 2014-01-27T08:57:11.070 回答
-1

尝试这个

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

于 2016-07-17T17:48:50.343 回答