web自动化测试图片上传的两种方法

最新推荐文章于 2025-07-07 14:54:04 发布
最新推荐文章于 2025-07-07 14:54:04 发布
阅读量8.4k 收藏 28
点赞数 3
CC 4.0 BY-SA版权
分类专栏： web及M站自动化测试-selenium2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JOJOY_tester/article/details/69921657
本文介绍了Web自动化测试中文件上传的两种方法：通过input标签使用Selenium直接上传及使用AutoIT处理非标准上传。详细讲解了如何利用AutoIT识别控件并编写脚本实现文件上传。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

web自动化测试图片上传的两种方法：

通过input标签的，如：

<!DOCTYPE html> 
<html lang="en"> 
 <head> 
  <title>filetest!</title> 
  <metacharset="utf-8"> 
 </head> 
 <body> 
  <pstyle="color:blue;text-align:left;font-size:30px;">请上传一个文件：</p> 
  <formaction="" method="get" id="myform"> 
   <inputtype="file" name="file" accept=""multiple="multiple"> 
  </form> 
 </body> 
</html>

这类可以通过selenium直接实现：

from selenium import webdriver 
 
driver = webdriver.Firefox() 
driver.get(r"http://192.168.225.137/html5/file.html") 
#通过send_keys()上传 
driver.find_element_by_css_selector("[type='file']").send_keys("C:\\Users\\Administrator\\Desktop\\html5.txt")

selenium借助autoIt工具实现上传

对于不是input框实现的上传怎么办，这种上传千奇百怪，有用a标签的，有用div的，有用button的，有用object的，我们没有办法通过直接在网页上处理掉这些上传，唯一的办法就是打开OS弹框，去处理弹框。

OS弹框涉及的层面已经不是selenium能解决的了，怎么办？很简单，用OS层面的操作去处理呗，利用autoIT工具可以。

autoIT的介绍

AutoIt目前最新是v3版本，这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作。它利用模拟键盘按键，鼠标移动和窗口/控件的组合来实现自动化任务。

处理思路

1.    利用AutoIT编写合适的脚本，然后将脚本编译成可执行文件；

2.    AutoIT脚本编译成可执行文件后，放到本地的某一个目录下；

3.    需要上传图片时，首先定位到【上传】字样文本，点击此按钮，打开os窗口；

4.    执行编辑后的可执行文件，实现文件上传；

备注：编写脚本和编译，需要借助AutoIT提供的工具，但是脚本编译成可执行文件后，可以直接使用，不再需要安装AutoIT。

前端上传文件实例：


#下面是上传图片的
#打开os窗口
driver.find_element_by_xpath(".//*[@id='uploader-demo']/div/div").click()
#上传经过autoIT编译好的exe文件
os.system(r".\files_exe\mrw_pic.exe")
sleep(2)

AutoIT安装

下载并安装AutoIT，下载链接：https://www.autoitscript.com/site/autoit/
AutoIT安装成功后，可以在开始菜单下看到AutoIT的所有工具，如下图所示：


  • AutoIt Windows Info   用于帮助我们识Windows控件信息。
  • Compile Script to.exe 用于将AutoIt生成 exe 执行文件。
  • Run Script            用于执行AutoIt脚本。
  • SciTE Script Editor   用于编写AutoIt脚本。
AutoIt Window Info 

打开此工具，利用此工具来识别Windows控件信息，如输入框、按钮等。

1、首先打开AutoIt Windows Info 工具，鼠标点击Finder Tool，按住鼠标左键拖动到需要识别的控件上。

通过识别可知道：

  • 窗口的title为“文件上传”，标题的Class为“#32770”。
  • 文件名输入框的class 为“Edit”，Instance为“1” ，所以ClassnameNN为“Edit1”。
  • 打开按钮的class 为“Button”，Instance为“1” ，所以ClassnameNN为“Button1”。
SciTE Script Editor 

根据以上所识别的空间信息，利用此编辑器，利用此软件根据AutoIT的语法编写脚本。
附实现文件上传需要的几个方法：  

  • ControlFocus ( "窗口标题", "窗口文本", 控件ID)   设置输入焦点到指定窗口的某个控件上
  • WinWait ( "窗口标题" [, "窗口文本" [, 超时时间]] )  暂停脚本的执行直至指定窗口存在（出现）为止
  • ControlSetText ( "窗口标题", "窗口文本", 控件ID, "新文本" )   修改指定控件的文本
  • Sleep ( 延迟 )   使脚本暂停指定时间段
  • ControlClick ( "窗口标题", "窗口文本", 控件ID [, 按钮] [, 点击次数]] )   向指定控件发送鼠标点击命令
  • 其中，title即AutoIt Window Info识别出的Title字段，controlID即AutoIt Window Info识别出的Class和Instance的拼接，如上图拼接后的结果应为：Button1

;ControlFocus( "窗口标题", "窗口文本", 控件ID) 设置输入焦点到指定窗口的某个控件上
ControlFocus("打开","","Edit1")
;WinWait( "窗口标题" [, "窗口文本" [, 超时时间]] )  暂停脚本的执行直至指定窗口存在（出现）为止
WinWait("打开","",10)
;ControlSetText( "窗口标题", "窗口文本", 控件ID, "新文本" )   修改指定控件的文本
ControlSetText("打开","","Edit1","C:\Users\Administrator\Desktop\工作\测试截图\3.png")
;Sleep( 延迟 )   使脚本暂停指定时间段，这里是以毫秒为单位的
Sleep(1000)
;ControlClick( "窗口标题", "窗口文本", 控件ID [, 按钮] [, 点击次数]])   向指定控件发送鼠标点击命令
ControlClick("打开","","Button1")

 AutoIT脚本编写完成后，保存，可以通过菜单栏“Tools”-->“Go” 或F5运行一下脚本。

注意：运行的时候，上传窗口需处于打开状态。

Compile Script to.exe

 脚本编辑运行无误后，将其保存。然后打开Complie Script to .exe工具，将保存的脚本编译成exe可执行文件。


 通过Python 的os模块的system()方法可以调用exe程序并执行。
了解了上传的实现过程，那么下载也是一样的。

 

【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 6755
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
web自动化测试框架playwright
weixin_42333261的博客
12-15 2327
Playwright是一个由微软开发的自动化测试框架，通过“录制为主，编写为辅”的方式来完成测试脚本。
自动化测试--使用AUTOIT进行图片自动上传等功能
SWL_1994的博客
05-05 2110
一、何为AutoIt及其作用？    AutoIt是一个使用脚本语言的免费软件，本章节我们将AutoIt应用于UI自动化测试中，使用此软件我们可以方便的模拟鼠标，键盘，窗口等操作。    当我们在编写自动化脚本的时候，比如下图中，我们要上传一张图片，我们编写如下脚本定位到选择图片：        driver.findElement(By.id("file")).click();    此时跳转到...
上传图片测试点
热门推荐
morningsun19的博客
05-31 2万+
1.功能测试（1）选择符合要求的图片，上传--------上传成功；（2）上传成功的图片名称显示----------显示正常（根据需求）（3）查看，下载上传成功的图片--------上传的图片可查看或下载（4）删除上传成功的图片-------------可删除（5）替换上传成功的图片-------------可替换（6）上传图片是否支持中文名称--------根据需求而定（7）图片路径是否可手动输...
Web测试中文件上传测试
最新发布
okcross0的博客
07-07 785
​ 　　（1）文件类型正确、大小合适。 　　（2）文件类型正确，大小不合适。 ​
测试上传图片
bbbb
04-24 239
发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。发文助手会检测您的文章标题、错别字、内容质量，助您提升文章质量。 ...
python自动化selenium＋pywinauto实现网页端图片上传功能
lijingxiaov5的博客
04-16 789
python自动化selenium＋pywinauto实现网页端图片上传功能
吐血整理，web自动化测试，POM模式搭建自动化测试框架（超级详细）
m0_70102063的博客
03-09 2681
POM设计模式主要是将每一个页面设计为一个Class，其中包含页面中需要测试的元素（按钮，输入框，标题 等），这样在Selenium测试页面中可以通过调用页面类来获取页面元素，这样巧妙的避免了当页面元素id或者位置变化时，需要改测试页面代码的情况。当页面元素id变化时，只需要更改测试页Class中页面的属性即可。简单来讲，就是将代码以页面为单位进行组织，针对这个页面上的所有信息，相关操作都放到一个类中；从而使具体的测试用例变成了简单的调用和验证操作。POM的优点。
Web自动化测试入门-（Python+Pytest+selenium的基础用法）
m0_67329659的博客
08-16 1346
介绍Web自动化-Python+selenium+pytest的基础用法
selenium&autoIt实现图片上传的自动化
08-31
使用selenium&autoIt实现图片上传的自动化
上传图片测试
无尽的Bug
12-19 594
上传照片测试
qugengting的博客
07-29 343
测试下照片路径可否访问
测试图片上传
sunyet_sen的博客
04-13 210
测试 - 上传图片
qq_40414159的博客
03-09 259
下载问题 下载大的mp4文件无法播放,文件资源大的时候的解析流的时间偏长，导致下载流程提前介入
图片测试上传
weixin_47567263的博客
09-11 187
图片测试上传
【测试用例-上传图片】
weixin_44519559的博客
03-17 2657
上传图片 图片功能测试 图片默认打开位置测试-是否是电脑桌面 选择符合要求的图片上传–上传成功 上传成功的图片名称显示–显示正常（根据需求） 查看，下载上传成功的图片–上传的图片可查看或下载 删除上传成功的图片-- 可删除 替换上传成功的图片-- 可替换 图片格式测试 上传正确格式–上传成功 上传不允许的格式-- 提示不能上传 图片大小测试 符合格式，大小稍小于限制大小的图片–上传成功 符合图片，大小等于限制大小的图片-- 上传成功 符合图片，大小稍大于限制大小的图片-- 在上传初提示附件过大 小为0
测试下图片上传
bbbb
10-12 544
发文助手会对标题提出优化建议，避免出现不恰当文字从而影响文章推荐发文助手会对标题提出优化建议 11111 11111 22222 1111 2222 11111 https://upload-images.jianshu.io/upload_images/2100084-dcdeb03818239d49.png?imageMogr2/auto-orient/strip|imageView2/2/w/788/format/webphttps://...
自动化测试通过js上传一张图片
07-04
<think>我们正在使用JavaScript在自动化测试中模拟上传图片的功能。根据引用内容，我们知道自动化测试可以模拟用户行为，比如在Web应用中上传图片。通常，上传图片是通过<input type="file">元素实现的。在自动化测试中，我们需要定位到这个元素并设置其值（即文件路径）。但是，由于安全限制，我们通常不能直接设置文件输入框的值。不过，在自动化测试环境中（如使用SeleniumWebDriver），我们可以通过特殊的方式来实现。然而，用户要求使用JavaScript实现。这里需要注意：在浏览器中，普通的JavaScript由于安全原因不能直接设置文件输入框的值。但是，在自动化测试框架中（例如通过Selenium执行JavaScript），我们可以通过一些技巧来实现。但是，根据引用[3]和[5]，Selenium可以直接操作浏览器，那么我们可以使用Selenium的WebDriver配合JavaScript来完成。不过，用户的问题是用JavaScript实现，所以我们考虑在WebDriver的上下文中执行JavaScript代码。实际上，更常见的做法是使用Selenium提供的方法（如sendKeys）来设置文件路径，但如果我们必须用JavaScript，我们可以尝试以下方法：思路：通过JavaScript代码创建一个带有文件数据的DataTransfer对象，然后触发一个change事件。但是，这种方法可能受到浏览器安全策略的限制，不一定在所有环境中都有效。另一种思路：在自动化测试环境中，我们可以通过JavaScript设置文件输入框的value属性，但通常这是被禁止的。不过，我们可以尝试使用以下方式：但是，根据WebDriver的标准做法，我们通常不直接通过JavaScript设置文件输入框的值，而是使用WebElement的sendKeys方法。然而，如果用户坚持使用JavaScript，我们可以尝试以下方法（但请注意，这种方法可能在某些浏览器中无效）：我们可以这样：1.定位到文件输入元素。2.使用JavaScript执行器，将文件路径直接设置到元素的value属性上。但是，由于浏览器的安全限制，直接设置value通常不会生效。因此，我们可能需要结合其他方法。然而，在Selenium中，我们其实可以通过执行JavaScript来设置文件输入框的值，但需要满足一定的条件：在自动化测试环境下，浏览器被配置为允许此类操作（通常是通过WebDriver启动的浏览器会有一个标志表明处于自动化测试状态，从而允许一些通常被禁止的操作）。但是，根据Selenium官方文档，不推荐使用JavaScript来设置文件输入框，而是推荐使用sendKeys。所以，如果用户要求用JavaScript，我们可能需要考虑其他方式。实际上，在Selenium中，我们可以使用以下JavaScript代码来设置文件输入框的值（尽管不保证所有浏览器都支持）： ```javascriptvarelement =document.querySelector('input[type="file"]');element.value= "C:\\path\\to\\file.jpg"; ```然后触发一个change事件。但是，这种方法在大多数现代浏览器中会被阻止。因此，更可靠的方法是使用WebDriver的sendKeys方法。但是，如果用户坚持使用JavaScript，我们可以尝试以下方法（在Selenium中执行JavaScript代码）：步骤：1.使用WebDriver找到文件输入元素。2.使用WebDriver的executeScript方法执行JavaScript代码，将文件路径设置为元素的value属性，并触发change事件。示例代码（Java）： ```javaWebElementfileInput =driver.findElement(By.cssSelector("input[type='file']"));((JavascriptExecutor) driver).executeScript("arguments[0].value ='"+filePath+"'; arguments[0].dispatchEvent(new Event('change', {bubbles:true }));",fileInput); ```但是，用户要求的是JavaScript，所以我们只关注JavaScript部分。在自动化测试脚本中，我们可以将上述JavaScript代码通过executeScript执行。然而，在纯JavaScript环境下（没有WebDriver）是无法模拟文件上传的，因为安全限制。所以，我们必须依赖自动化测试框架（如Selenium）提供的环境。因此，结论是：在纯浏览器JavaScript中，我们无法通过脚本设置文件输入框的值，但在自动化测试框架（如Selenium）中，我们可以通过执行JavaScript代码来尝试设置，但这种方法并不总是可靠，推荐使用框架提供的sendKeys方法。但是，用户的问题是“使用JavaScript在自动化测试中模拟上传图片”，所以我们可以理解为在自动化测试框架中执行JavaScript代码。那么，我们可以尝试以下JavaScript代码（在Selenium的executeScript中执行）：```javascript//假设我们已经获取了文件输入元素，并作为参数传入varfileInput =arguments[0];var filePath =arguments[1];//创建一个DataTransfer对象并设置文件var dataTransfer =new DataTransfer();dataTransfer.items.add(new File([],filePath)); //注意：这里我们创建了一个空的File对象，但实际上我们需要完整的文件路径，但这样并不完全正确//实际上，我们无法通过JavaScript直接访问本地文件系统来创建File对象，除非文件已经通过用户选择（但自动化测试中并没有用户交互） //所以，更直接的方法还是设置value属性，然后触发change事件（尽管有安全限制，但在自动化测试环境中可能被允许）fileInput.value =filePath;//触发change事件var event= newEvent('change',{'bubbles':true,'cancelable': true});fileInput.dispatchEvent(event); ```但是，上述代码中，我们无法通过JavaScript创建包含指定路径的File对象（因为安全原因，不允许访问本地路径）。所以，设置value属性并触发事件可能是唯一的选择，但这种方法在非自动化环境中无效，在自动化环境中也可能被浏览器阻止。因此，在自动化测试中，更可靠的方法是使用WebDriver的sendKeys方法，而不是JavaScript。但是，如果用户因为某些原因必须使用JavaScript，我们可以尝试设置value属性并触发事件，并期望在自动化测试环境中能够成功。另外，还有一种方法是使用隐藏的文件输入框，然后通过JavaScript使其可见，再设置值，但同样受到安全限制。综上所述，我们给出两种方案：方案一（推荐）：使用WebDriver的sendKeys方法（这不是JavaScript，但属于常规的自动化测试操作）。方案二：使用WebDriver执行JavaScript代码来设置文件输入框的value属性并触发change事件（不保证所有浏览器都支持）。由于用户要求使用JavaScript，我们给出方案二的代码示例（在Selenium中执行JavaScript）：以Python为例（因为引用中有Python代码）：```python#使用Selenium的execute_script方法file_input= driver.find_element_by_css_selector("input[type='file']") file_path ="/path/to/file.jpg"driver.execute_script("arguments[0].value= arguments[1]; arguments[0].dispatchEvent(newEvent('change',{ bubbles: true}));", file_input,file_path) ```但是，请注意，这种方法可能在某些浏览器中不起作用（比如最新版本的Chrome可能阻止设置value）。因此，我们更推荐使用sendKeys： ```pythonfile_input.send_keys(file_path) ```如果用户的问题是在纯JavaScript环境（没有自动化测试框架）下，那么无法实现，因为安全限制。因此，根据用户的问题，我们假设他是在自动化测试框架（如Selenium）中使用JavaScript。那么，我们可以尝试使用execute_script执行上述JavaScript代码。最后，我们总结一下：在自动化测试中，使用JavaScript模拟上传图片，可以通过在自动化测试框架中执行JavaScript代码来设置文件输入框的value属性并触发change事件。但由于安全限制，这种方法可能不可靠，推荐使用框架提供的sendKeys方法。如果用户是在Node.js环境下使用类似Puppeteer的工具，那么Puppeteer提供了专门的方法来上传文件（如elementHandle.uploadFile()），或者使用设置input文件的方式。由于问题中只提到JavaScript，没有指定具体框架，我们给出一个通用的思路，并强调在纯浏览器JavaScript中不可行，在自动化测试框架中可尝试。相关问题：1.在自动化测试中，除了使用JavaScript，还有哪些方法可以模拟文件上传？2.为什么在浏览器中普通JavaScript无法设置文件输入框的值？3.在Selenium中，如何使用sendKeys方法上传文件？4.在使用JavaScript模拟文件上传时，如何确保跨浏览器的兼容性？5.在Puppeteer中如何实现文件上传？</think>### 使用 JavaScript 实现自动化测试中的图片上传功能 在自动化测试中模拟图片上传的核心思路是：**定位文件输入元素 → 设置文件路径 → 触发上传操作**。以下是具体实现方法： #### 方法一：直接设置文件输入框的值（推荐） ```javascript // 定位文件输入元素 const fileInput = await driver.findElement(By.css('input[type="file"]')); // 设置绝对文件路径（需确保测试环境可访问该路径） await fileInput.sendKeys('/absolute/path/to/test-image.jpg'); ``` **原理**： 通过 WebDriver 的 `sendKeys()` 方法直接将文件路径注入到 `<input type="file">` 元素中，模拟用户选择文件的行为[^3][^5]。 #### 方法二：JavaScript 注入（特殊场景备用） ```javascript // 通过 JavaScript 修改文件输入框的值 await driver.executeScript(` const fileInput = document.querySelector('input[type="file"]'); const file = new File([''], 'test-image.jpg', { type: 'image/jpeg' }); const dataTransfer = new DataTransfer(); dataTransfer.items.add(file); fileInput.files = dataTransfer.files; // 触发 change 事件 const event = new Event('change', { bubbles: true }); fileInput.dispatchEvent(event); `); ``` **适用场景**： 当常规方法失效时使用（如某些动态加载的组件），但需注意浏览器安全策略限制[^2]。 --- ### 关键注意事项 1. **文件路径处理** - 使用绝对路径（相对路径可能导致路径解析错误） - 跨平台路径兼容方案： ```javascript const path = require('path'); const imagePath = path.resolve(__dirname, 'test-data/test-image.jpg'); ``` 2. **隐藏元素处理** ```javascript // 显示隐藏的文件输入框 await driver.executeScript("arguments[0].style.display='block'", fileInput); await fileInput.sendKeys(imagePath); ``` 3. **异步等待策略** ```javascript // 等待上传完成 await driver.wait(until.elementLocated(By.css('.upload-success')), 10000); ``` 4. **框架集成示例（Selenium + Node.js） ```javascript const { Builder, By } = require('selenium-webdriver'); (async function uploadTest() { const driver = await new Builder().forBrowser('chrome').build(); try { await driver.get('https://your-upload-page.com'); const fileInput = await driver.findElement(By.id('upload-btn')); await fileInput.sendKeys('/path/to/image.jpg'); // 验证上传结果 const status = await driver.findElement(By.id('upload-status')).getText(); console.assert(status.includes('success'), 'Upload failed!'); } finally { await driver.quit(); } })(); ``` --- ### 常见问题解决方案 | 问题现象 | 解决方案 | |---------|----------| | "Element not interactable" 错误 | 确保元素可见：`await driver.executeScript('arguments[0].scrollIntoView()', element)` | | 动态加载的组件无法定位 | 使用显式等待：`await driver.wait(until.elementLocated(By.css(...)), timeout)` | | 浏览器安全策略阻止操作 | 添加 `--disable-web-security` 启动参数（测试环境专用） | | 上传后无页面刷新 | 手动触发验证逻辑：`await driver.findElement(By.id('submit-btn')).click()` | > **最佳实践**：优先使用原生 WebDriver API（方法一），其稳定性和兼容性优于 JS 注入方案[^3][^5]。对于复杂组件（如拖拽上传），可结合 Selenium 的 `Actions` 类模拟用户操作。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值