Selenium操作remove.bg上传时无可见<input type='file'>元素如何处理？

大部分美化过的上传组件都会隐藏原生<input type="file">元素，Selenium 默认禁止对不可见/尺寸为0的元素执行交互操作，所以直接定位后调用方法会触发元素不可交互的报错。

解决步骤 #

• 首先定位到隐藏的input[type="file"]元素
• 通过Selenium执行JS代码，修改该元素的样式属性，将其设置为可见状态且有足够的交互尺寸
• 直接调用send_keys传入本地图片的绝对路径即可完成上传，不需要点击页面自定义的上传按钮

修改后可运行代码 #

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

driver = webdriver.Firefox()
driver.get("https://www.remove.bg/upload")

# 显式等待输入框加载完成，比硬等待稳定性更高
upload_input = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.XPATH, '//input[@type="file"]'))
)

# 执行JS修改元素可见性
driver.execute_script("""
arguments[0].style.display = 'block';
arguments[0].style.opacity = 1;
arguments[0].style.visibility = 'visible';
arguments[0].style.width = '100px';
arguments[0].style.height = '100px';
""", upload_input)

# 替换为你本地图片的绝对路径
upload_input.send_keys("C:/Users/xxx/Desktop/test.png")

注意事项 #

• 必须传入图片的绝对路径，使用相对路径大概率会触发文件找不到的报错
• 该方法适用于所有隐藏原生file输入框的上传场景，不局限于remove.bg站点
• 上传触发后可以继续加等待逻辑，等待页面返回处理后的结果

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