使用 Selenium 将图像上传到网站时遇到问题

Question

我使用 Python 和 Selenium 创建了一个脚本，将图像从本地文件夹上传到此网页。该网站需要 Google 登录才能访问带有上传选项的页面。

登录完成后，网站会自动将我重定向到目标页面。浏览器到达目标页面后，需要点击

Full Remake

。现在，脚本尝试使用

Drag & Drop your image or Browse

按钮上传图像，但它选择了

Browse

按钮并且不执行任何操作。这是我试图在该网站上上传的图像。

import time
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url = 'https://reroom.ai/'

options = webdriver.ChromeOptions()
options.add_argument("--disable-blink-features=AutomationControlled")

driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options)

gmail = ""     #gamil address here
password = ""  #password here

driver.get(url)
original_window = driver.current_window_handle
driver.maximize_window()
try:
    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[@type='button'][contains(.,'Accept')]"))).click()
except Exception as err:
    pass
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button[./img[@alt='google']][contains(.,'Sign in with Google')]"))).click()
time.sleep(5)
WebDriverWait(driver, 20).until(EC.new_window_is_opened)
driver.switch_to.window([window for window in driver.window_handles if window != original_window][0])
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input#identifierId"))).send_keys(gmail)
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "#identifierNext"))).click()
time.sleep(5)
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[name='Passwd']"))).send_keys(password)
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//button/span[.='Next']"))).click()
driver.switch_to.window(original_window)
time.sleep(5)
WebDriverWait(driver, 20).until(EC.presence_of_element_located((By.XPATH, "//span[.='Full Remake']"))).click()
image_path = r'C:\Users\C.L\Desktop\Jonathan\c7OgQ1Qh.jpeg'
WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "img[class='object-contain']")))
time.sleep(5)
file_input = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[@class='filepond--label-action'][.='Browse']")))
time.sleep(5)
file_input.send_keys(image_path)

如何上传该网站上的图片？

Answer 1

使用 Selenium 上传文件有时会很棘手，尤其是在处理使用 JavaScript 进行文件上传的现代 Web 界面时。根据您的描述，您似乎正在尝试通过单击“浏览”按钮间接与文件输入元素交互，由于 Selenium 在直接与本机操作系统对话框交互方面的限制，这可能不会触发文件对话框。

但是，Selenium 可以通过将文件路径发送到输入元素来直接与文件输入元素 (

<input type="file">

) 进行交互。这种方法不需要与文件对话框交互，并且非常适合自动化测试场景。

根据您的场景，让我们专注于查找页面上实际的

<input type="file">

元素并向其发送文件路径。有时，此类输入是隐藏的或不立即可见，因此您可能需要仔细检查页面的 HTML。

这是脚本的调整版本，重点是上传图像：

import time
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url = 'https://reroom.ai/'

options = webdriver.ChromeOptions()
options.add_argument("--disable-blink-features=AutomationControlled")

driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()), options=options)

gmail = ""     # Gmail address here
password = ""  # Password here

driver.get(url)
original_window = driver.current_window_handle
driver.maximize_window()

# Your login steps...

# After successful login and navigation to the target page
WebDriverWait(driver, 20).until(EC.presence_of_element_located((By.XPATH, "//span[.='Full Remake']"))).click()

image_path = r'C:\Users\C.L\Desktop\Jonathan\c7OgQ1Qh.jpeg'

# Wait for the file input element to be clickable and send the file path
file_input = WebDriverWait(driver, 20).until(
    EC.element_to_be_clickable((By.CSS_SELECTOR, "input[type='file']"))
)
time.sleep(5)  # Ensure the element is ready
file_input.send_keys(image_path)

# Continue with any additional steps...

要点：

• 直接交互：此脚本通过发送文件路径直接与

  <input type="file">

  元素交互。对于自动文件上传，此方法通常更可靠。
• CSS 选择器：CSS 选择器

  "input[type='file']"

  针对文件输入元素。您可能需要根据实际的页面结构调整此选择器。如果有多个文件输入，您需要使选择器更加具体。
• 计时：

  time.sleep(5)

  调用是显式等待的占位符。根据页面的行为，您可能需要调整这些或将其替换为更精确的

  WebDriverWait

  条件。

故障排除：

• 如果未找到文件输入，请仔细检查页面。有时输入会动态添加或隐藏 (

  style="display:none"

  )。
• 确保图像路径正确且可由脚本访问。
• 检查浏览器控制台中是否有任何 JavaScript 错误，这些错误可能表明上传过程存在问题。

通过专注于与文件输入元素直接交互，您应该能够更可靠地自动化文件上传过程。