UI 自动化中如何处理上传文件事件

摘要:
在UI自动化中,我们经常遇到上载文件的操作。处理上载事件是一个麻烦的操作,因为单击上载控件将弹出一个Windows窗口供用户选择文件,但Windows窗口是浏览器之外的一个组件,因此selenium本身无法处理此Windows窗口。1.直接调用selenium提供的sendkey进行操作,并将要上传的文件路径直接传输到上传控件。AutoIt的最新版本是v3,这是一个使用BASIC脚本语言的自由软件。它是为Windows GUI中的自动操作而设计的。编译脚本到。exe用于从AutoIt生成exe执行文件。

在UI自动化中,我们经常会遇到上传文件操作。处理上传事件是一个比较麻烦的操作,因为点击上传控件会弹出Windows窗口供用户选择文件,但是Windows窗口是浏览器之外的组件,所以selenium本身无法处理这个windows窗口。这里给大家几个处理思路,我们先看一下下面这个HTML。

UI 自动化中如何处理上传文件事件第1张

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>test</title>

<script language="javaScript">

function toAlert()

{

alert("hello continue...");

}

</script>

</head>

<body>

<form>

<table >

<tr>

<td>

<input name="file" type="file"/>

</td>

</tr>

</table>

</form>

</body>

</html>

用notepad++ 打开,将它存成一个 autotest.html文件,打开之后,只有一个上传按钮,我们来看一下怎么处理上传事件。

UI 自动化中如何处理上传文件事件第2张

 

UI 自动化中如何处理上传文件事件第3张

 

1

直接调用selenium自带的sendkeys进行操作,将需要上传的文件路径直接传递进上传控件。

2.import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
/**
* Description:
* Author: ChrisMa
* Date: 2019-05-15
*/
public class testupload2 {
public static void main(String ags[]) throws InterruptedException {
//初始化webdriver
WebDriver driver = new ChromeDriver();
//打开本地html
driver.get("file:///D:/UI/autotest1.html");
// 将文件所在路径传递给上传文件控件
driver.findElement(By.name("file")).sendKeys("D: ext.txt");
// 等待看到结果
Thread.sleep(10000);
//关闭webdriver
driver.quit();
}
}

UI 自动化中如何处理上传文件事件第4张

 

这种方案可以解决大部分的上传操作,可是对于一些上传框禁止输入的就无法操作了,这时候我们就要考虑其他方案。

UI 自动化中如何处理上传文件事件第3张

 

2

针对无法输入的,我们可以考虑采用AutoIT来进行上传。

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

官方网站:https://www.autoitscript.com/site/

从网站上下载AutoIt并安装,安装完成在菜单中会看到下图的目录:

UI 自动化中如何处理上传文件事件第6张

 

AutoIt Windows Info 用于帮助我们识Windows控件信息。

Compile Script to.exe 用于将AutoIt生成 exe 执行文件。

Run Script 用于执行AutoIt脚本。

SciTE Script Editor 用于编写AutoIt脚本。

我们打开html 网页,然后点击一下上传按钮:

UI 自动化中如何处理上传文件事件第7张

 

下面我们看一下怎么用autoIT来处理这个上传。

• 打开AutoIT Window Info,然后点击Finder Tool,不松开左键,等鼠标变成瞄准器类型时,将鼠标挪动到文件上传框需要识别的控件上松开左键。

UI 自动化中如何处理上传文件事件第8张

 

识别出对象之后所有的信息会显示在AutoIT windows info里

经过识别窗口的title为“Open”,标题的Class为“#32770”。

文件名输入框的class 为“Edit”,Instance为“1” ,所以ClassnameNN为“Edit1”。

打开按钮的class 为“Button”,Instance为“1” ,所以ClassnameNN为“Button1”。

我们打开SciTE Script Editor,然后将下列代码填入:

;ControlFocus("title","text",controlID) Edit1=Edit instance 1

ControlFocus("Open", "","Edit1")

; Wait 10 seconds for the Upload window to appear

WinWait("[CLASS:#32770]","",10)

; Set the File name textmargin: 0px; padding: 0px; max- 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system-font, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: left; text-indent: 39pt;">

ControlSetText("Open", "", "Edit1", "D: est.txt")

Sleep(2000)

; Clickmargin: 0px; padding: 0px; max- 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; clear: both; min-height: 1em; color: rgb(51, 51, 51); font-family: -apple-system-font, system-ui, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; letter-spacing: 0.544px; text-align: left; text-indent: 39pt;">

ControlClick("Open", "","Button1");

UI 自动化中如何处理上传文件事件第9张

 

将script在SciTE Script Editor保存之后,打开上传窗口,在SciTE Script Editor中选择Tools->go, 来查看一下文件是否可以上传。

确认脚本运行正常, 我们将这个脚本保存成Script.au3, 然后打开Compile Script to.exe,将Script.au3文件转换为Script.exe:

UI 自动化中如何处理上传文件事件第10张

 

这个时候,我们打开上传文件控件,双击Script.exe文件,可以看到文件上传事件已经处理成功。

接下来,就是使用java来调用该EXE文件:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.IOException;
/**
* Description:
* Author: ChrisMa
* Date: 2019-05-15
*/
public class testupload2 {
public static void main(String ags[]) throws InterruptedException {
//初始化webdriver
WebDriver driver = new ChromeDriver();
//打开本地html
driver.get("file:///D:/ UI/autotest.html");
// 点击选择文件按钮
driver.findElement(By.name("file")).click();
// 设置等待3秒
Thread.sleep(3000);
// Java 的Runtime 模块的getruntime.exec()方法可以调用exe 程序并执行。
Runtime exe = Runtime.getRuntime();
try {
String str = "D://Script.exe";
// 运行指定位置的.exe文件
exe.exec(str);
} catch (IOException e) {
System.out.println("Error to run the exe");
e.printStackTrace();
}
// 等待看到结果
Thread.sleep(10000);
//关闭webdriver
driver.quit();

}
}

借助AutoIT也有自己的限制,比如只能在Windows系统中进行,如果要移植到其他系统,就得参考其他方式。

3

如果想在非Windows系统中处理上传,我们可以用纯Java的形式处理,这时候,我们就要用到Robot这个类,在该过程中流程表现为:打开上传文件的控件->将文件在磁盘上的路径,通过robot copy pasty进去(需要文件输入框默认是光标聚焦)->按下回车,触发弹窗确定按钮,完成文件上传过程

UI 自动化中如何处理上传文件事件第11张

 

4

代码如下:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import java.awt.*;
import java.awt.datatransfer.StringSelection;
import java.awt.event.KeyEvent;
/**
* Description:
* Author: ChrisMa
* Date: 2019-05-15
*/
public class testupload {
public static void main(String ags[]) throws InterruptedException, AWTException {
//初始化webdriver
WebDriver driver = new ChromeDriver();
//打开本地html
driver.get("file:///D:/ UI/autotest.html");
// 指定上传文件的路径
StringSelection sel = new StringSelection("D: est est1.txt");
// 把图片文件路径复制到剪贴板
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(sel,null);
System.out.println("selection" +sel);
// 点击上传按钮
driver.findElement(By.name("file")).click();
// 新建一个Robot类的对象
Robot robot = new Robot();
Thread.sleep(1000);
// 按下回车
robot.keyPress(KeyEvent.VK_ENTER);
// 释放回车
robot.keyRelease(KeyEvent.VK_ENTER);
// 按下 CTRL+V
robot.keyPress(KeyEvent.VK_CONTROL);
robot.keyPress(KeyEvent.VK_V);
// 释放 CTRL+V
robot.keyRelease(KeyEvent.VK_CONTROL);
robot.keyRelease(KeyEvent.VK_V);
Thread.sleep(1000);
// 点击回车 Enter
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER);
// 等待看到结果
Thread.sleep(10000);
//关闭webdriver
driver.quit();
}
}

上传文件咱们就先处理到这里,希望可以给大家开阔思路,大家下次见。

作  者:Testfan Chris

出  处:微信公众号:自动化软件测试平台

版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出文章链接

 

免责声明:文章转载自《UI 自动化中如何处理上传文件事件》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇青蛙学Linux—进程管理Python+Appium寻找蓝牙/wifi匹配下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Retrofit 2.0 上传文件

1.用MultipartBody.Part的方式上传文件(单文件上传)(表单方式) @Multipart @POST("xxx/xxx") Call<ResponseBody> upload(@Part MultipartBody.Part part); 其中的“photos”是与服务器端预定的文件参数名 2.用RequestBod...

利用WCF实现上传下载文件服务

使用WCF上传文件 在WCF没出现之前,我一直使用用WebService来上传文件,我不知道别人为什么要这么做,因为我们的文件服务器和网站后台和网站前台都不在同一个机器,操作人员觉得用FTP传文件太麻烦,我就做一个专门用来上传文件的WebService,把这个WebService部署在文件服务器上,然后在网站后台调用这个WebService,把网站后台页...

JavaWeb 之文件上传

1. 文件上传的要求 1.1 上传对表单的限制 method="post"; enctype="multipart/form-data"; 表单中需要添加文件表单项: <input type="file" name="xxx"/>. 1.2 上传对 Servlet 的限制 request.getParameter("xxx") 方法...

Web上传文件的原理及实现[转]

   现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload、还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2在底层也使用了Commons FileUpload)。在asp.net中也有相应的上传文件的控件。虽然现在有很多上传组件可以利用,但是了解Web上传文件...

从零开始的野路子React/Node(9)Antd + multer实现文件上传

最近心血来潮,打算自己捣腾个web app来练练手(虽然大概率会半路弃坑……),其中有一部分是关于文件上传的,在实现的过程中遇到了一些坑,于是打算把血泪教训都记录下来。 前端的部分采用了Antd,不得不说真是香,至少比我司内部的前端库香了1000倍……事半功倍。后端部分则主要通过multer来实现,目测应该是一种比较通用的做法? 1、捯饬前端 首先我们新建...

RN 上传文件到以及上传文件到七牛云(初步)

本文将介绍: 如何使用原生 Javascript 上传文件 如何使用七牛云 SDK 上传文件到七牛云 在 App 中文件上传是一个非常重要的需求,但是翻遍 React Naitve 的官方文档没有发现有详细介绍文件上传的文章,在 github上 搜索一下倒是发现了不少 repo 在做这样的事情 遗憾的是这项项目都是基于 native code 实现的...