Question

如何与其父级隐藏的file_field进行交互？

<span class="btn button-large fileinput-button">
    Select files...
    <input accept="image/png, image/gif, image/jpeg" id="gallery_files" multiple="multiple" name="gallery_files" type="file">
</span>

按钮覆盖输入，因此不可见。

修改

为了记录，这是我的代码：

data[:photos].each do |photo|
  $browser.file_field.set photo
end

和错误：Watir::Wait::TimeoutError: timed out after 20 seconds, waiting for {:tag_name=>"input", :type=>"file"} to become present

Gist

中的可行示例

Answer 1

我有点惊讶，但我能够在示例HTML中设置文件字段而不会出现任何问题：

browser.file_field.set('path/to/file.txt')

从代码中看，设置文件字段只需要输入存在。它不要求它可见（或存在）。

鉴于您收到了Watir::Wait::TimeoutError个异常，我猜您的代码实际上在file_field.set之前失败了。由于看起来页面在对话框中有输入，我猜你的代码看起来更像是：

$browser.file_field.wait_until_present
data[:photos].each do |photo|
  $browser.file_field.set photo
end

实际上抛出异常的是wait_until_present方法。

解决方案1 

假设正在为文件字段调用显式wait方法，您应该只能删除等待。

如果你有等待因为Ajax正在加载对话框，你可以尝试等待不同的元素 - 例如父跨度。

解决方案2

如果出于某种原因需要存在文件字段，则需要更改其CSS。在这种情况下，不透明度：

p $browser.file_field.present?
#=> false

$browser.execute_script('arguments[0].style.opacity = "1.0";', browser.file_field)

p $browser.file_field.present?
#=> true

Answer 2

对于我的情况，这有效：

       $browser.execute_script("jQuery(function($) { 
                              $('.fileinput-button').css('visibility', 'hidden')
                              $('#gallery_files').css('visibility', 'visible').css('opacity', '1').css('width', '100').css('height', '50')
                            })")

我必须隐藏父跨度，然后显示，调整大小并更改输入的不透明度

与span内的file_field交互 - Watir / Selenium-Webdriver

2 个答案: