整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML DOM 允許 JavaScript 對(duì) HTML 事件作出反應(yīng)。
實(shí)例
Mouse Over Me
Click Me
HTML DOM 使 JavaScript 有能力對(duì) HTML 事件做出反應(yīng)。
實(shí)例
Mouse Over Me
Click Me
對(duì)事件做出反應(yīng)
我們可以在事件發(fā)生時(shí)執(zhí)行 JavaScript，比如當(dāng)用戶在 HTML 元素上點(diǎn)擊時(shí)。
如需在用戶點(diǎn)擊某個(gè)元素時(shí)執(zhí)行代碼，請(qǐng)向一個(gè) HTML 事件屬性添加 JavaScript 代碼：
onclick=JavaScript
HTML 事件的例子：
當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
當(dāng)網(wǎng)頁已加載時(shí)
當(dāng)圖像已加載時(shí)
當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
當(dāng)輸入字段被改變時(shí)
當(dāng)提交 HTML 表單時(shí)
當(dāng)用戶觸發(fā)按鍵時(shí)
在本例中，當(dāng)用戶在 <h1> 元素上點(diǎn)擊時(shí)，會(huì)改變其內(nèi)容：
實(shí)例
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">點(diǎn)擊文本!</h1>
</body>
</html>
本例從事件處理器調(diào)用一個(gè)函數(shù)：
實(shí)例
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點(diǎn)擊文本!</h1>
</body>
</html>
HTML 事件屬性
如需向 HTML 元素分配 事件，您可以使用事件屬性。
實(shí)例
向 button 元素分配 onclick 事件：
<button onclick="displayDate()">點(diǎn)這里</button>
在上面的例子中，名為 displayDate 的函數(shù)將在按鈕被點(diǎn)擊時(shí)執(zhí)行。
使用 HTML DOM 來分配事件
HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：
實(shí)例
向 button 元素分配 onclick 事件：
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
在上面的例子中，名為 displayDate 的函數(shù)被分配給 id=myButn" 的 HTML 元素。
按鈕點(diǎn)擊時(shí)Javascript函數(shù)將會(huì)被執(zhí)行。
onload 和 onunload 事件
onload 和 onunload 事件會(huì)在用戶進(jìn)入或離開頁面時(shí)被觸發(fā)。
onload 事件可用于檢測(cè)訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網(wǎng)頁的正確版本。
onload 和 onunload 事件可用于處理 cookie。
實(shí)例
<body onload="checkCookies()">
onchange 事件
onchange 事件常結(jié)合對(duì)輸入字段的驗(yàn)證來使用。
下面是一個(gè)如何使用 onchange 的例子。當(dāng)用戶改變輸入字段的內(nèi)容時(shí)，會(huì)調(diào)用 upperCase() 函數(shù)。
實(shí)例
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時(shí)觸發(fā)函數(shù)。
實(shí)例
一個(gè)簡(jiǎn)單的 onmouseover-onmouseout 實(shí)例：
Mouse Over Me
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmousedown 事件，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件，最后，當(dāng)完成鼠標(biāo)點(diǎn)擊時(shí)，會(huì)觸發(fā) onclick 事件。
實(shí)例
一個(gè)簡(jiǎn)單的 onmousedown-onmouseup 實(shí)例：
Thank You
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039我們一起飛！
文章出自【碼同學(xué)軟件測(cè)試】
碼同學(xué)公眾號(hào)：自動(dòng)化軟件測(cè)試
碼同學(xué)抖音號(hào)：小碼哥聊軟件測(cè)試
在UI自動(dòng)化中，我們經(jīng)常會(huì)遇到上傳文件操作。處理上傳事件是一個(gè)比較麻煩的操作，因?yàn)辄c(diǎn)擊上傳控件會(huì)彈出Windows窗口供用戶選擇文件，但是Windows窗口是瀏覽器之外的組件，所以selenium本身無法處理這個(gè)windows窗口。這里給大家?guī)讉€(gè)處理思路，我們先看一下下面這個(gè)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++ 打開，將它存成一個(gè) autotest.html文件，打開之后，只有一個(gè)上傳按鈕，我們來看一下怎么處理上傳事件。
1
直接調(diào)用selenium自帶的sendkeys進(jìn)行操作，將需要上傳的文件路徑直接傳遞進(jìn)上傳控件。
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");
// 等待看到結(jié)果
Thread.sleep(10000);
//關(guān)閉webdriver
driver.quit();
}
}
這種方案可以解決大部分的上傳操作，可是對(duì)于一些上傳框禁止輸入的就無法操作了，這時(shí)候我們就要考慮其他方案。
免費(fèi)領(lǐng)取 碼同學(xué)軟件測(cè)試 課程筆記+超多學(xué)習(xí)資料+完整視頻+最新面試題，可以轉(zhuǎn)發(fā)文章 + 私信「碼同學(xué)666」獲取資料哦
2
針對(duì)無法輸入的，我們可以考慮采用AutoIT來進(jìn)行上傳。
AutoIt目前最新是v3版本，這是一個(gè)使用類似BASIC腳本語言的免費(fèi)軟件,它設(shè)計(jì)用于Windows GUI(圖形用戶界面)中進(jìn)行自動(dòng)化操作。它利用模擬鍵盤按鍵，鼠標(biāo)移動(dòng)和窗口/控件的組合來實(shí)現(xiàn)自動(dòng)化任務(wù)。
官方網(wǎng)站：https://www.autoitscript.com/site/
從網(wǎng)站上下載AutoIt并安裝，安裝完成在菜單中會(huì)看到下圖的目錄：
AutoIt Windows Info 用于幫助我們識(shí)Windows控件信息。
Compile Script to.exe 用于將AutoIt生成 exe 執(zhí)行文件。
Run Script 用于執(zhí)行AutoIt腳本。
SciTE Script Editor 用于編寫AutoIt腳本。
我們打開html 網(wǎng)頁，然后點(diǎn)擊一下上傳按鈕:
下面我們看一下怎么用autoIT來處理這個(gè)上傳。
? 打開AutoIT Window Info，然后點(diǎn)擊Finder Tool，不松開左鍵，等鼠標(biāo)變成瞄準(zhǔn)器類型時(shí)，將鼠標(biāo)挪動(dòng)到文件上傳框需要識(shí)別的控件上松開左鍵。
識(shí)別出對(duì)象之后所有的信息會(huì)顯示在AutoIT windows info里
經(jīng)過識(shí)別窗口的title為“Open”，標(biāo)題的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, 來查看一下文件是否可以上傳。
確認(rèn)腳本運(yùn)行正常， 我們將這個(gè)腳本保存成Script.au3, 然后打開Compile Script to.exe，將Script.au3文件轉(zhuǎn)換為Script.exe:
這個(gè)時(shí)候，我們打開上傳文件控件，雙擊Script.exe文件，可以看到文件上傳事件已經(jīng)處理成功。
免費(fèi)領(lǐng)取 碼同學(xué)軟件測(cè)試 課程筆記+超多學(xué)習(xí)資料+完整視頻+最新面試題，可以轉(zhuǎn)發(fā)文章 + 私信「碼同學(xué)666」獲取資料哦
接下來，就是使用java來調(diào)用該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");
// 點(diǎn)擊選擇文件按鈕
driver.findElement(By.name("file")).click();
// 設(shè)置等待3秒
Thread.sleep(3000);
// Java 的Runtime 模塊的getruntime.exec()方法可以調(diào)用exe 程序并執(zhí)行。
Runtime exe = Runtime.getRuntime();
try {
String str = "D://Script.exe";
// 運(yùn)行指定位置的.exe文件
exe.exec(str);
} catch (IOException e) {
System.out.println("Error to run the exe");
e.printStackTrace();
}
// 等待看到結(jié)果
Thread.sleep(10000);
//關(guān)閉webdriver
driver.quit();
}
}
借助AutoIT也有自己的限制，比如只能在Windows系統(tǒng)中進(jìn)行，如果要移植到其他系統(tǒng)，就得參考其他方式。
3
如果想在非Windows系統(tǒng)中處理上傳，我們可以用純Java的形式處理，這時(shí)候，我們就要用到Robot這個(gè)類，在該過程中流程表現(xiàn)為：打開上傳文件的控件->將文件在磁盤上的路徑，通過robot copy pasty進(jìn)去（需要文件輸入框默認(rèn)是光標(biāo)聚焦）->按下回車，觸發(fā)彈窗確定按鈕，完成文件上傳過程
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");
// 把圖片文件路徑復(fù)制到剪貼板
Toolkit.getDefaultToolkit().getSystemClipboard().setContents(sel,null);
System.out.println("selection" +sel);
// 點(diǎn)擊上傳按鈕
driver.findElement(By.name("file")).click();
// 新建一個(gè)Robot類的對(duì)象
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);
// 點(diǎn)擊回車 Enter
robot.keyPress(KeyEvent.VK_ENTER);
robot.keyRelease(KeyEvent.VK_ENTER);
// 等待看到結(jié)果
Thread.sleep(10000);
//關(guān)閉webdriver
driver.quit();
}
}
上傳文件咱們就先處理到這里，希望可以給大家開闊思路，大家下次見。
END
免費(fèi)領(lǐng)取碼同學(xué)軟件測(cè)試課程筆記+超多學(xué)習(xí)資料+學(xué)習(xí)完整視頻，可以關(guān)注我們公眾號(hào)哦：自動(dòng)化軟件測(cè)試
本文著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
