selenium 对特定元素截图

  这段时间在处理文字验证码问题，需要对文字验证码的图片以及提示的图片合成一块来进行截图，然后识别，分析到这两个都有同一个父类html元素，所以拟定对父类元素进行定位，然后截图。
  项目使用Java开发，实现采用senenim对元素截图。因为没有发现更好的对元素截图的方法，所以采用先对整个屏幕进行截图，然后在对具体元素截取这部分图片。
  先对driver进行类型转换成TakesScreenshot，然后调用他的getScreenshotAs(OutputType.FILE);，这里把截图存储文件类型。
OutputType可以指定为文件类型，字节数组，或者是base64编码后的字符串。

File src = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

  然后我们分析到具体的元素源码，发现这个class属性值为msn的div标签是验证码图片和文字提示的直接父标签，所以我们这里对定位到这个标签。

网页源码.png

验证码图片截图.png

首先通过driver获取到这个元素

WebElement element = driver.findElement(By.xpath("//div[@class='msn']"));

  然后调用这个元素的getRect()方法可以获取到这个元素的区域块信息，包括宽度和高度，以及该元素相对于网页最左上原点的坐标。我们这里获取到这些信息，然后对全屏图片进行截图。

 Rectangle rect = element.getRect();
BufferedImage subImage= ImageIO.read(src).getSubimage(rect.x, rect.y, rect.getWidth(), rect.height);

  这样我们可以对截取后的图片保存到文件，或者其他操作。

ImageIO.write(subImage, "png", src);

  到此已经完成了对该图片的截取了。