selenium webdriver 實現Canvas畫布自動化測試

https://blog.csdn.net/xiaoguanyusb/article/details/80324210 

 

由借鑑意義, 轉過來

 

 

canvas 是一個畫布，定位元素時只能定位到畫布上，以下乳所示，網頁上有一張相似於下圖的eChart報表圖片。selenium的基本定位方式只能定位到該畫布上，畫布上的子元素經過selenium的基礎定位方式是定位不到的， 此時就須要使用selenium的js注入的方式，經過插入js腳本的方式獲取索要操做的元素座標。 再使用action對應的方法去執行對應的操做。

1： 建立注入js方法。用於獲取canvas畫布上的具體元素消息

window.T={
	getCanvasId:function (id){ 
	var cache = *****.echartCache; 
	var instances = [];
	for (var key in cache){
		//alert(key);
		if (key.indexOf(id) != -1){
		instances.push(key);
		}
	}
	return instances 
	} 
}

　　

2： 經過以下js.executeScript方法將js腳本注入頁面。

String jsCode=getText("e:/jsb.js");
Object a=js.executeScript(jsCode);

　　

3： 經過再次注入js腳本的方式調用剛剛注入的js方法，獲取元素在canvas上的元素座標。

String script = "return window.T.getCanvasId(\"" + keys + "\")";
 Object object = js.executeScript(script);
 logger.info(object);

　　

static String  getText(String path) {
        File file=new File(path);
        String out=null;
        StringBuilder result=new StringBuilder();
        try{
            BufferedReader br = new BufferedReader(new FileReader(file));//構造一個BufferedReader類來讀取文件
            String s = null;
            while((s = br.readLine())!=null){//使用readLine方法，一次讀一行
                result.append(s+"\n");
            }
            br.close();
        }catch(Exception e){
            e.printStackTrace();
        }
        out=result.toString();
        return out;
    }

　　

4： 而後，使用action相關方法更具js獲取到的x、y座標進行操做。

/**
	 *左鍵點擊元素上的具體座標位置
	 * @param driver
	 * @param abnormElement  須要點擊的元素
	 * @param x 須要點擊的元素上的點的X座標
	 * @param y 須要點擊的元素上的點的Y座標
	 */
	public static void mouseClick(WebDriver driver, WebElement abnormElement, int x, int y) {
		Actions actions = new Actions(driver);    
		actions.release();
		actions.moveToElement(abnormElement, x, y).click().build().perform();
	}
   
	/**
	 *右鍵點擊元素上的具體座標位置
	 * @param driver
	 * @param abnormElement  須要點擊的元素
	 * @param x 須要點擊的元素上的點的X座標
	 * @param y 須要點擊的元素上的點的Y座標
	 */
	public static void mouseRightClick(WebDriver driver, WebElement abnormElement, int x, int y) {
		Actions actions = new Actions(driver);    
		actions.release();
	    actions.moveToElement(abnormElement, x, y).contextClick().build().perform();
	}
	
	
	/**
	 *拖拽元素上的具體座標位置
	 * @param driver
	 * @param abnormElement  須要點擊的元素
	 * @param x 須要點擊的元素上的點的X座標
	 * @param y 須要點擊的元素上的點的Y座標
	 */
	public static void mouseMoveto(WebDriver driver, WebElement abnormElement, int x, int y){
		Actions actions = new Actions(driver);    
		actions.release();
	    actions.moveToElement(abnormElement, x, y).clickAndHold().release().build().perform();
	}
	
	/**
	 * 拖拽元素上的具體座標位置
	 * @param driver
	 * @param abnormElement  須要點擊的元素
	 * @param x 須要拖拽元素點的X座標
	 * @param y 須要拖拽元素點的Y座標
	 * @param to_x 拖拽元素點目標位置的X座標
	 * @param to_y 拖拽元素點目標位置的Y座標
	 */
	public static void mouseDragAndDrop(WebDriver driver, WebElement abnormElement, int x, int y,int to_x,int to_y){
		Actions actions = new Actions(driver);    
		actions.release();
	    actions.moveToElement(abnormElement, x, y).clickAndHold().moveByOffset(to_x,to_y).release().build().perform();    
	}

　　

 

問 :你好做者， 我在PC瀏覽器的console 執行下面代碼報錯， 1.請問 ***** 是什麼: var cache = *****.echartCache 2.下面的keys 又是什麼？ "return window.T.getCanvasId(\"" + keys + "\")"; 期待博主的回覆~

答:你好， 我這個是有點筆記的形式寫的。 其實**** 是你canvas的固定路徑。 若是你canvas圖片的id是固定的話， 是不須要那個方法的。 我這邊是由於canvas圖片的id是動態的。 全部我須要根據靜態的路徑去獲取動態的canvas畫布id。 若是你canvas的圖片id原本就是靜態的話。 就不必使用上面的那個方法了。 直接跟開發交流獲取圖片的JS信息就夠了