Selenium如何向动态生成的非DOM输入元素传入文件路径？

问题描述 #

点击页面可见按钮后，页面通过JavaScript动态创建type="file"的input元素（初始DOM中不存在该元素），导致常规的find_element定位+send_keys方法无法完成文件上传，比如Facebook Creator Studio中点击“Create new”按钮触发的文件选择场景。

示例场景代码：

HTML结构

<button id="visible-btn">visible button</button>
<p>selected file is: <span id="selected-file"></span></p>

背后的JavaScript逻辑

document.getElementById('visible-btn').addEventListener('click', function(e){
    const ele = document.createElement('input');
    ele.type = 'file';
    ele.accept = '*';

    ele.onchange = function (e){
        document.getElementById('selected-file').innerText = e.path[0].files[0].name;
    }

    ele.click(); // 触发系统文件选择对话框
})

原无效代码

file_path = '/path/to/file'
driver.find_element(By.XPATH, '//input').send_keys(file_path)

执行上述代码会抛出NoSuchElementException，因为初始DOM中没有目标input元素。

解决方案 #

方案1：拦截动态创建的input元素，跳过系统对话框

核心思路是在点击可见按钮前，注入JavaScript代码监听DOM变化，捕获动态生成的file input，直接给它传入文件路径，同时阻止原生的文件选择对话框弹出。

Python代码实现：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

file_path = '/path/to/your/file'
driver = webdriver.Chrome()
driver.get("目标页面URL")

# 注入JS，监听file input的创建并阻止原生点击
inject_js = """
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const fileInput = Array.from(mutation.addedNodes).find(node => node.tagName === 'INPUT' && node.type === 'file');
      if (fileInput) {
        fileInput.addEventListener('click', (e) => e.preventDefault());
        fileInput.value = arguments[0];
        fileInput.dispatchEvent(new Event('change'));
        observer.disconnect();
      }
    }
  });
});
observer.observe(document.body, { childList: true, subtree: true });
"""
driver.execute_script(inject_js, file_path)

# 点击可见按钮
visible_btn = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, 'visible-btn')))
visible_btn.click()

方案2：绕过可见按钮，直接用JS创建并操作file input

如果方案1的DOM监听不稳定，也可以直接跳过点击按钮的步骤，用JavaScript手动创建file input元素，设置文件路径后触发onchange事件，模拟完整的文件选择流程。

Python代码实现：

from selenium import webdriver
from selenium.webdriver.common.by import By

file_path = '/path/to/your/file'
driver = webdriver.Chrome()
driver.get("目标页面URL")

# 注入JS直接创建file input并完成上传
upload_js = """
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '*';
fileInput.value = arguments[0];

fileInput.onchange = function(e) {
  document.getElementById('selected-file').innerText = e.target.files[0].name;
};

fileInput.dispatchEvent(new Event('change'));
"""
driver.execute_script(upload_js, file_path)

针对Facebook Creator Studio的注意事项 #

1. 元素定位调整：将代码中By.ID, 'visible-btn'替换为“Create new”按钮的实际定位器，示例：

   create_btn = WebDriverWait(driver, 15).until(EC.element_to_be_clickable((By.XPATH, "//*[text()='Create new']")))
   

2. 页面加载与登录：确保已登录Facebook账号，且页面完全加载后再执行操作，可增加等待核心元素的逻辑。
3. 匹配accept属性：根据上传内容调整accept值，比如上传短视频可设为'video/*'。

内容的提问来源于stack exchange，提问作者Gayan Jeewantha