selenium webdriver 实现Canvas画布自动化测试

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