与 file_field inside span 交互 - Watir/Selenium-Webdriver

Question

如何与被 parent 隐藏的 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

对于我的情况，这行得通：

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

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

Answer 2

我有点惊讶，但我能够在示例 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

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

如果您等待是因为 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

与 file_field inside span 交互 - Watir/Selenium-Webdriver

Interact with a file_field inside span - Watir/Selenium-Webdriver

ruby

watir-webdriver

selenium-webdriver