整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML DOM 允许 JavaScript 对 HTML 事件作出反应。
实例
Mouse Over Me
Click Me
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
实例
Mouse Over Me
Click Me
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
在本例中，当用户在 <h1> 元素上点击时，会改变其内容：
实例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
本例从事件处理器调用一个函数：
实例
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
实例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">点这里</button>
在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。
使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<body onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
一个简单的 onmouseover-onmouseout 实例：
Mouse Over Me
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
实例
一个简单的 onmousedown-onmouseup 实例：
Thank You
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039我们一起飞！
文章出自【码同学软件测试】
码同学公众号：自动化软件测试
码同学抖音号：小码哥聊软件测试
在UI自动化中，我们经常会遇到上传文件操作。处理上传事件是一个比较麻烦的操作，因为点击上传控件会弹出Windows窗口供用户选择文件，但是Windows窗口是浏览器之外的组件，所以selenium本身无法处理这个windows窗口。这里给大家几个处理思路，我们先看一下下面这个HTML。
<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文件，打开之后，只有一个上传按钮，我们来看一下怎么处理上传事件。
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:\text.txt");
// 等待看到结果
Thread.sleep(10000);
//关闭webdriver
driver.quit();
}
}
这种方案可以解决大部分的上传操作，可是对于一些上传框禁止输入的就无法操作了，这时候我们就要考虑其他方案。
免费领取 码同学软件测试 课程笔记+超多学习资料+完整视频+最新面试题，可以转发文章 + 私信「码同学666」获取资料哦
2
针对无法输入的，我们可以考虑采用AutoIT来进行上传。
AutoIt目前最新是v3版本，这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作。它利用模拟键盘按键，鼠标移动和窗口/控件的组合来实现自动化任务。
官方网站：https://www.autoitscript.com/site/
从网站上下载AutoIt并安装，安装完成在菜单中会看到下图的目录：
AutoIt Windows Info 用于帮助我们识Windows控件信息。
Compile Script to.exe 用于将AutoIt生成 exe 执行文件。
Run Script 用于执行AutoIt脚本。
SciTE Script Editor 用于编写AutoIt脚本。
我们打开html 网页，然后点击一下上传按钮:
下面我们看一下怎么用autoIT来处理这个上传。
• 打开AutoIT Window Info，然后点击Finder Tool，不松开左键，等鼠标变成瞄准器类型时，将鼠标挪动到文件上传框需要识别的控件上松开左键。
识别出对象之后所有的信息会显示在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-width: 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-width: 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");
将script在SciTE Script Editor保存之后，打开上传窗口，在SciTE Script Editor中选择Tools->go, 来查看一下文件是否可以上传。
确认脚本运行正常， 我们将这个脚本保存成Script.au3, 然后打开Compile Script to.exe，将Script.au3文件转换为Script.exe:
这个时候，我们打开上传文件控件，双击Script.exe文件，可以看到文件上传事件已经处理成功。
免费领取 码同学软件测试 课程笔记+超多学习资料+完整视频+最新面试题，可以转发文章 + 私信「码同学666」获取资料哦
接下来，就是使用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进去（需要文件输入框默认是光标聚焦）->按下回车，触发弹窗确定按钮，完成文件上传过程
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:\test\test1.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();
}
}
上传文件咱们就先处理到这里，希望可以给大家开阔思路，大家下次见。
END
免费领取码同学软件测试课程笔记+超多学习资料+学习完整视频，可以关注我们公众号哦：自动化软件测试
本文著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
*请认真填写需求信息，我们会在24小时内与您取得联系。
