du-hong

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.小结

这种方法无论你建没有建那个文件夹,如果有会将截图放在文件夹下,如果没有,也会自动创建你代码中的文件夹,然后将截图放入。

相关文章: