Java中如何利用Selenium获取元素分析网页内容

本文首先探讨了编写 Selenium 脚本时的两种最简单、经常使用的截图方法，接着重点介绍了在难以利用普通截图方法获取到截图时，如何利用 Selenium 获取到的元素分析网页内容，进而绘制出所须要的图像的方法。

翻译验证测试 (Translation Verification Test) 是全球化测试的重要组成部分。在翻译验证测试准备阶段，翻译验证测试技术支持人员常常须要截取大量的图片给各个国家的测试人员。为了节省时间，实现自动化 截图已经是大势所趋。通常状况下，咱们直接使用 Selenium 的 getScreenshotAs() 方法就能够知足多数状况下的须要。然而，该方法对不少悬浮框和下拉菜单的处理却不尽人意。接下来让咱们一块儿来看看在实际应用中咱们均可以选择哪些方法。

1、利用 Selenium 的 getScreenshotAs() 方法

利用 TakesScreenshot 接口提供的 getScreenshotAs() 方法捕捉屏幕，是咱们在开发 Selenium 脚本时最经常使用的方法。getScreenshotAs() 函数能够返回 BASE6四、BYTES 或 FILE 类型的数据。当指定返回类型为 BASE64 的时候 ，会返回一个 base64 编码字符串；当指定返回类型为 BYTES 的时候，会返回一个 bytes 数组； 当指定返回类型为 FILE 的时候，会将获取到的截图存放到一个临时文件中，以供复制到指定的文件。该方法能够知足最基本的需求。如清单 1 所示， captureScreen() 方法会将整个屏幕截下来，并将图片保存为 jpg 文件。

清单 1. 利用 Selenium 自带的方法截图

public static void captureScreen(WebDriver driver,String screenName) throws IOException{
	//判断是否存在screenpath目录
	if(!(new File(screenpath).isDirectory())){  
        new File(screenpath).mkdir();  
    }
	File screenShotFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);  
    FileUtils.copyFile(screenShotFile, new File(screenpath+screenName+".jpg"));	    
}

Selenium 的 getScreenshotAs() 方法并不能处理一些更为复杂的问题，如对某些悬浮框、下拉菜单选项进行截图时，该方法返回的图片中并不包含悬浮框、下拉菜单部分。此时，能够选择采用 Robot 类的 createScreenCapture() 方法。

2、利用 Robot 类的 createScreenCapture() 方法

利用 Java 的 Robot 类能够完成一些与操做系统有关的底层输入，经过 Robot 类的 createScreenCapture() 方法能够截取到和 PrtSc 按键相同效果的图片。该方法简单易用，且功能强大，基本能够知足大部分需求。

清单 2. 利用 Robot 截图

public static void captureScreen(String screenName, int x, int y,
		int width, int height) {
	try {
		BufferedImage capture = null;
		Rectangle area = new Rectangle(x, y, width, height);
		Robot robot = new Robot();
		capture = robot.createScreenCapture(area);
		String fn = screenpath + screenName + ".jpg";
		FileOutputStream out = new FileOutputStream(fn);
		JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
		encoder.encode(capture);
		out.flush();
		out.close();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

对于某些气泡悬浮框，如 title 属性值，须要将鼠标悬浮在元素上才能够显示出来。采用 Selenium 的 Actions 类去模拟鼠标操做，能够解决一些经过 javascript、css 控制的鼠标移动、悬浮操做 ，可是对于 title 这样的气泡悬浮框却无能为力，由于 Actions 方法只是模拟鼠标操做，而 title 属性值须要在真实的鼠标悬浮在元素上时才会显示出来。此时，能够先使用 Robot 类的 mouseMove() 方法将鼠标移到指定屏幕位置，再进行截图。

清单 3. 在 Robot 类的 mouseMove() 方法中应用 Selenium 获取到的点坐标

Robot robot = newRobot(); 
Point point = element.getLocation(); 
robot.mouseMove(point.x+55, point.y+90);

mouseMove() 中的点坐标为 Selenium 获取到的元素的屏幕坐标，而经过 getLocation() 方法得到的元素坐标为元素相对于浏览器内的 document 对象的坐标，因此须要进行微调。

因为 Robot 类操做的是一些操做系统事件，因此在某些系统（如 X-Window 系统）中若是 Robot 类访问鼠标、键盘的操做须要特定权限，那么可能会抛出 AWTException。然而，在多平台上实现截图并非咱们在本文中须要考虑的内容。利用 Robot 类的截图方法能够截取指定区域的屏幕，相比第一种方法更加灵活，功能也更增强大。

3、解析网页页面，动态生成图片

对于页面中某些气泡悬浮框（如图 1 中的“到百度首 页”字符串），如 title 和 alt 属性值，虽然使用 Robot 能够截取到，可是须要调节坐标位置。在咱们实际应用中，因为咱们通常都是经过 Remote Desktop Connection Manager 链接多台远程虚拟机，屏幕的大小有时会发生改变，于是元素的坐标位置也常常须要调节。

图 1. 气泡悬浮框示例

实现思路

因此对于此类状况，咱们能够经过另一种方式解决，即解析网页页面，取出 title 属性值，并根据 title 信息绘制成图片，最后将绘制好的图片添加到原来的图中并返回整张图片。从理论上讲，全部的页面元素，咱们均可以经过此方法实现截图。实现方法如清单 4 所示。

清单 4. 抓取完整的屏幕截图

public static void captureFlyover(WebDriver driver,String xpath,String screenName) throws Exception{
    BufferedImage img;
    BufferedImage img1;
    //img1为抓取的不包含tooltip的屏幕截图
    img1 = gsscScreenshotImage(driver);
    //img为将悬浮框添加到img1后返回的屏幕截图
	img = gsscAddTooltip(driver.findElement(By.xpath(xpath)), img1);
	ImageIO.write(img, "png", new File(screenpath+screenName+".jpg"));
}

其中， gsscScreenshotImage() 方法调用的是第一种方式中的 getScreenshotAs() 方法。接着，咱们来看一下 gsscAddTooltip() 的实现方式。咱们首先在 gsscCreateTooltip() 建立了 tooltip 图像。根据传入的 Selenium 获取到的 element 对象，咱们能够获取到元素的 title 和 font-family 等属性值以及元素的坐标位置。根据这些信息，咱们建立出一个 img 图像。咱们将图像的背景色设置为 #F5FCDE。但为了更加逼真，咱们还能够经过 getCssValue() 方法获取到更多和元素有关的信息，如 background、border、padding 等等。