UI 自動化中如何處理上傳文件事件

在UI自動化中,我們經常會遇到上傳文件操作。

處理上傳事件是一個比較麻煩的操作,因為點擊上傳控件會彈出Windows窗口供用戶選擇文件,但是Windows窗口是瀏覽器之外的組件,所以selenium本身無法處理這個windows窗口。這裡給大家幾個處理思路,我們先看一下下面這個HTML。

UI 自動化中如何處理上傳文件事件

<title>test/<title>

function toAlert()

{

alert("hello continue...");

}



用notepad++ 打開,將它存成一個 autotest.html文件,打開之後,只有一個上傳按鈕,我們來看一下怎麼處理上傳事件。

UI 自動化中如何處理上傳文件事件

UI 自動化中如何處理上傳文件事件


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();
}
}


UI 自動化中如何處理上傳文件事件

這種方案可以解決大部分的上傳操作,可是對於一些上傳框禁止輸入的就無法操作了,這時候我們就要考慮其他方案。


UI 自動化中如何處理上傳文件事件


2


針對無法輸入的,我們可以考慮採用AutoIT來進行上傳。

AutoIt目前最新是v3版本,這是一個使用類似BASIC腳本語言的免費軟件,它設計用於Windows GUI(圖形用戶界面)中進行自動化操作。它利用模擬鍵盤按鍵,鼠標移動和窗口/控件的組合來實現自動化任務。

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

從網站上下載AutoIt並安裝,安裝完成在菜單中會看到下圖的目錄:

UI 自動化中如何處理上傳文件事件


AutoIt Windows Info 用於幫助我們識Windows控件信息。

Compile Script to.exe 用於將AutoIt生成 exe 執行文件。

Run Script 用於執行AutoIt腳本。

SciTE Script Editor 用於編寫AutoIt腳本。

我們打開html 網頁,然後點擊一下上傳按鈕:

UI 自動化中如何處理上傳文件事件


下面我們看一下怎麼用autoIT來處理這個上傳。

• 打開AutoIT Window Info,然後點擊Finder Tool,不鬆開左鍵,等鼠標變成瞄準器類型時,將鼠標挪動到文件上傳框需要識別的控件上鬆開左鍵。

UI 自動化中如何處理上傳文件事件

識別出對象之後所有的信息會顯示在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");


UI 自動化中如何處理上傳文件事件

將script在SciTE Script Editor保存之後,打開上傳窗口,在SciTE Script Editor中選擇Tools->go, 來查看一下文件是否可以上傳。

確認腳本運行正常, 我們將這個腳本保存成Script.au3, 然後打開Compile Script to.exe,將Script.au3文件轉換為Script.exe:

UI 自動化中如何處理上傳文件事件

這個時候,我們打開上傳文件控件,雙擊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 自動化中如何處理上傳文件事件


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();
}
}


上傳文件咱們就先處理到這裡,希望可以給大家開闊思路,大家下次見。

作  者:Testfan Chris

出  處:微信公眾號:自動化軟件測試平臺


分享到:


相關文章: