1.简介
按照计划宏哥今天将介绍java+ selenium自动化测试截图操作实现的第三种截图方法，也就是截图的第三剑客 - 截取某个元素（或者目标区域）的图片。在测试的过程中，有时候不需要截取整个屏幕，只需要截取某个元素（或者目标区域）的图片，今天宏哥就来讲解和分享这些内容。
2. 截取某个元素（或者目标区域）的图片
特点：可截取指定元素及目标区域大小截图。
3.测试场景
具体步骤就是：
（1）访问百度首页
（2）点击“设置”中的“搜索设置”
（3）调用截图类截图搜索设置页面
（3）保存截图（搜索设置页面）
4.自动化实战
4.1代码设计
4.2参考代码
package lessons;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.Point;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;
/**
* @author 北京-宏哥
*
* @公众号:北京宏哥
*
* @《手把手教你》系列技巧篇（六十一）-java+ selenium自动化测试 - 截图三剑客 -下篇（详细教程）
*
* @2022年01月18日
*/
public class ElementScreenShot {
private static WebDriver driver;
public static void main(String[] args) throws Exception {
System.setProperty("webdriver.chrome.driver", ".\\Tools\\chromedriver.exe");
driver = new ChromeDriver();
driver.get("http://www.baidu.com");
driver.manage().window().maximize();
Thread.sleep(2000);
WebElement setting = driver.findElement(By.id("s-usersetting-top"));
Actions actions = new Actions(driver);
actions.clickAndHold(setting).perform();
driver.findElement(By.linkText("搜索设置")).click();
Thread.sleep(1000);
WebElement xuanxiang = driver.findElement(By.xpath("/html/body/div[1]/div[6]/div"));
File src = ((ChromeDriver) driver).getScreenshotAs(OutputType.FILE);
try {
FileUtils.copyFile(src, new File("D:\\screenshoot\\result.png"));
FileUtils.copyFile(ElementScreenShot.captureElement(src, xuanxiang), new File("D:\\screenshoot\\test.png"));
Thread.sleep(2000);
System.out.println("browser will be close");
driver.quit();
} catch (IOException e) {
e.printStackTrace();
}
}
public static File captureElement(File screenshot, WebElement element){
try {
BufferedImage img = ImageIO.read(screenshot);
int width = element.getSize().getWidth();
int height = element.getSize().getHeight();
//获取指定元素的坐标
Point point = element.getLocation();
//从元素左上角坐标开始，按照元素的高宽对img进行裁剪为符合需要的图片
BufferedImage dest = img.getSubimage(point.getX(), point.getY(), width, height);
ImageIO.write(dest, "png", screenshot);
} catch (IOException e) {
e.printStackTrace();
}
return screenshot;
}
}
4.3运行代码
1.运行代码，右键Run AS->Java Appliance，控制台输出，如下图所示：
2.文件保存结果及预览，如下图所示：
result图片预览 
test图片预览 
3.运行代码后电脑端的浏览器的动作，如下小视频所示：
5.小结
这种方法无论你建没有建那个文件夹，如果有会将截图放在文件夹下，如果没有，也会自动创建你代码中的文件夹，然后将截图放入。
每天学习一点，今后必成大神-
往期推荐（由于跳转参数丢失了，所有建议选中要访问的右键，在新标签页中打开链接即可访问）:
Appium自动化系列，耗时80天打造的从搭建环境到实际应用精品教程测试
Python接口自动化测试教程，熬夜87天整理出这一份上万字的超全学习指南
Python+Selenium自动化系列，通宵700天从无到有搭建一个自动化测试框架
Java+Selenium自动化系列，仿照Python趁热打铁呕心沥血317天搭建价值好几K的自动化测试框架
Jmeter工具从基础->进阶->高级，费时2年多整理出这一份全网超详细的入门到精通教程
