使用 selenium 将文件附加到 knockout.js 创建的文件字段

Question

通常情况下，附加文件相对简单

如果我有一个看起来像这样的元素；

<input 
id="DataFile_123" 
type="file">

我会写这个

find(:xpath, 'input[@id="Data_123"]').send_keys('c:\file_dir\file.txt')

使用 knockout.js 我看到的文件类型是这样的...

<input 
type="file" 
data-bind="value: fileName, 
event: { change: handleFileChange }" 
accept=".csv">

找到了确切文件类型的摘要

尝试查找此输入会产生与以下相同的错误

当我使用类似的 selenium 代码执行类似的操作时，我被阻止了

 find(:xpath, 'input[@type="file"]').send_keys('c:\file_dir\file.txt')  #ElementNotFound

要执行的脚本周围的语法糖让我很困惑。

execute_script('handleFileChange.js') # returns handleFileChange is not defined

有人在淘汰赛中附上了好运的文件吗？让我知道。

Answer 1

文件输入字段经常被隐藏以允许更好的样式。有很多方法可以隐藏该字段并且没有看到应用 CSS 不可能给出 100% 肯定的方法来解决这个问题，但是如果您使用的是最新版本的 Capybara 并且只有一个文件输入在页面上你可以试试

attach_file('c:\file_dir\file.txt', make_visible: true)

这将尝试找到 non-visible 文件元素，修改元素 CSS 使其可见，附加文件，然后将 CSS 恢复到原来的样子。如果页面上有多个文件输入元素，您仍然可以通过将范围限定到仅包含一个文件输入元素的页面可见区域来使用它。

using selenium to attach a file to a file field made by knockout.js