跳转至

最后更新：2026-09-04 01:19

实验29 文件上传模拟

29.1 实验目的

  1. 理解 UI 自动化中文件上传的核心原理（底层 <input type="file"> 标签）；
  2. 掌握用 Selenium 的 send_keys("文件绝对路径") 绕过系统弹窗直接上传文件；
  3. 掌握处理现代文件上传组件（弹窗、拖拽、隐藏 input）的自动化思路；
  4. 掌握 alert 弹窗处理与截图。

29.2 实验环境

  1. 操作系统：Windows 10 / Windows 11；
  2. 工具：PyCharm + Python + Selenium + Chrome + ChromeDriver（实验6 已装好）；
  3. 素材：桌面 <a href="#resources" class="res-link">5.html</a>（现代文件上传组件页面）、upload_test.txt（测试上传文件）。

29.3 实验重难点

重点：核心思路——无论前端多炫酷（拖拽、弹窗），底层一定隐藏一个原生 <input type="file"> 标签；直接定位该标签用 send_keys(绝对路径) 投递文件。

难点：现代上传组件的"伪装"穿透（点开弹窗 → 定位隐藏 input → 注入路径 → 提交 → 处理 alert）；路径拼接用 os.path.join 规避转义。

29.4 实验内容

29.4.1 原理引入：文件上传的底层真相

1. 任务描述 理解文件上传自动化为什么不需要操作系统弹窗。

2. 实验步骤

  • 步骤 1：痛点分析：UI 自动化测试中，文件上传（上传头像、上传凭证、导入 Excel）是极其常见的场景。

  • 步骤 2：核心知识：无论前端页面设计得多炫酷（支持拖拽、支持弹窗），它的底层一定隐藏着一个原生 HTML 标签 <input type="file">。

  • 步骤 3：在 Selenium 中对付这种上传组件，完全不需要理会弹出的系统窗口——只需精准定位到这个 input 标签，使用 send_keys("文件的绝对路径") 方法，即可直接把文件投递过去。

为什么自动化上传不用理会系统弹窗？

底层的 <input type="file"> 像快递柜的投递口：直接把包裹（文件路径）塞进投递口就行，不用去按柜子的屏幕（系统弹窗）——那块屏幕根本不归 Selenium 管。

常见错误与排错

  • 试图用 Selenium 去点 Windows 系统弹窗会失败：弹窗属于操作系统，Selenium 只能操作网页元素；
  • 正确思路是定位隐藏的 input 标签后 send_keys(绝对路径)。

29.4.2 页面准备

1. 任务描述 准备本地测试页面与测试文件。

2. 实验步骤

  • 步骤 1：在桌面上新建一个文本文件，重命名为 5.html，把现代文件上传组件的完整源码复制进去（含触发按钮 open-modal-btn、上传弹窗 upload-modal、隐藏的原生 input file-input、提交按钮 submit-btn，支持拖拽、文件列表、alert 提示）。

  • 步骤 2：在桌面上手动新建用于测试上传的文本文件，命名为 upload_test.txt。

常见错误与排错

  • 两个文件都要放桌面且命名一致（5.html、upload_test.txt）：代码按桌面路径拼接，放别处会报找不到文件；
  • 5.html 保存时注意扩展名是 .html 而不是 .html.txt（资源管理器需开启"显示文件扩展名"）。

29.4.3 实战：自动化核心代码

1. 任务描述 编写 Selenium 脚本完成"唤起弹窗→注入文件→提交→关 alert"完整闭环。

2. 实验步骤

  • 步骤 1：思路讲解（四步走）：

    1. 先点击 id="open-modal-btn" 唤起现代上传弹窗；
    2. 绕过页面伪装，直接定位隐藏的 id="file-input" 真实标签，向其注入桌面测试文件的绝对路径；
    3. 点击 id="submit-btn" 触发提交，让业务流转完成成功闭环；
    4. 处理系统 Alert 提示框。

  • 步骤 2：代码实现：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import time
import os
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By

# --- 基础配置 ---
desktop_path = os.path.join(os.path.expanduser("~"), "Desktop")  # 桌面路径
html_path = os.path.join(desktop_path, "5.html")                  # 本地页面
target_file_path = os.path.join(desktop_path, "upload_test.txt")  # 测试上传文件

chrome_exe_path = os.path.join(desktop_path, "chrome-win64", "chrome-win64", "chrome.exe")
chrome_options = Options()
chrome_options.binary_location = chrome_exe_path
chrome_options.add_experimental_option('excludeSwitches', ['enable-logging'])
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument("--disable-dev-shm-usage")
chrome_options.add_argument("--disable-gpu")

driver_path = os.path.join(desktop_path, "chromedriver-win64", "chromedriver-win64", "chromedriver.exe")
service = Service(driver_path)
driver = webdriver.Chrome(service=service, options=chrome_options)

try:
    print("正在打开桌面 5.html 现代文件上传页面...")
    driver.get(f"file://{html_path}")
    driver.maximize_window()
    time.sleep(2)

    # 动作1：点击【上传文件】按钮唤起模块弹窗
    driver.find_element(By.ID, "open-modal-btn").click()
    time.sleep(1.5)

    # 动作2：穿透伪装，直接向隐藏的 input 标签投递文件路径（核心）
    hidden_input = driver.find_element(By.ID, "file-input")
    hidden_input.send_keys(target_file_path)
    time.sleep(2)

    # 动作3：点击【确定上传】提交按钮
    driver.find_element(By.ID, "submit-btn").click()
    time.sleep(1)

    # 动作4：自动处理并关闭网页弹出的 Alert 确认提示
    alert = driver.switch_to.alert
    print(f"捕获提示框内容为: {alert.text}")
    alert.accept()  # 点击确定
    time.sleep(2)

    print("✅ 随堂文件上传测试成功")
except Exception as e:
    print(f"运行错误：{e}")
finally:
    driver.quit()

为什么用 os.path.join 拼路径？

手写路径里的 \ 会和 \t、\n 等转义字符打架，os.path.join 像一个自动对接员，按系统规则帮你把路径接对，省心不踩坑。

常见错误与排错

  • 运行报找不到 chrome/chromedriver：确认桌面下 chrome-win64、chromedriver-win64 文件夹层级与代码中 os.path.join 的路径一致；
  • 别删代码里的 time.sleep 等待：弹窗动画没播完就定位元素，会直接报错。

29.4.4 随堂练习

1. 任务描述 完整跑通文件上传自动化并截图。

2. 实验步骤

  • 步骤 1：将 5.html 代码保存至电脑桌面；

  • 步骤 2：在电脑桌面手动创建一个表示你姓名的文本文档（如 张三.txt）；

  • 步骤 3：执行程序，要求流程通畅：自动唤起弹窗 → 自动添加文件 → 自动点击上传 → 自动关闭 Alert 提示框；

  • 步骤 4：确保控制台无任何红字报错，完整输出"✅ 随堂文件上传测试成功"字样；

  • 步骤 5：截取控制台输出成功界面、浏览器 Alert 弹窗界面各 1 张截图。

踩坑提醒

  • send_keys 必须传文件的绝对路径（用 os.path.join 自动规避斜杠转义）；
  • 定位的是隐藏的 input 标签（id=file-input），不是外层 div 容器（drop-zone）；
  • Alert 弹窗要先 switch_to.alert 再 accept()。

29.5 实验总结

本次实验完成了文件上传自动化的核心训练：掌握"无论前端多炫酷，底层必有 <input type="file">"的第一性原理，学会用 send_keys(绝对路径) 绕过系统弹窗直接投递文件，并完整跑通"唤起弹窗 → 注入文件 → 提交 → 关闭 Alert"的业务闭环。这是 Selenium 自动化（实验15 已学的文件上传）在现代前端组件场景下的进阶实战，也是国赛和实际项目的高频考点。

29.6 作业提交

  1. 提交地点：吾爱作业网
  2. 提交资料：
  3. 控制台输出"随堂文件上传测试成功"界面截图；
  4. 浏览器 Alert 弹窗界面截图。
  5. 不会做时填写"心得感悟"（1~50 字）。

29.7 知识检测

  • [ ] （填空）无论前端多炫酷，文件上传的底层一定隐藏着一个原生 input 标签，它的 type 属性值是 file。
  • [ ] （填空）在 Selenium 中向该 input 标签投递文件，使用的方法是 send_keys("文件的绝对路径")。
  • [ ] （选择）自动化处理网页 Alert 弹窗的正确顺序是（ ）。
  • A. 直接 accept()　B. 先 switch_to.alert 再 accept()　C. 先 accept() 再 switch_to.alert　D. 刷新页面
查看解析

正确答案：B。要先切换到弹窗上下文，才能对它点击确定。

  • [ ] （填空）拼接桌面路径、规避斜杠转义，使用 os.path.join。
  • [ ] （选择）向隐藏 input 注入文件路径时，定位对象应是（ ）。
  • A. 外层 div 容器（drop-zone）　B. 隐藏的原生 input（id="file-input"）　C. 提交按钮　D. 弹窗标题
查看解析

正确答案：B。send_keys 必须作用于原生 input 标签（file-input），定位外层容器无效。

本课相关资源

序号 资源名称 类型 说明
1 实验15-文件上传模拟.docx 讲义 页面源码 + 核心代码 + 练习
2 5.html 素材 现代文件上传组件页面

实验素材下载

点击下方链接获取本节课全部资源（含课件、任务清单、安装包等）： 🔗 夸克网盘

本站总访问 次 | 访客 人 | 本页阅读 次