java+seleium屏幕截图（全面截图，长截图，元素截图）

一，全面截图

使用调整浏览器窗口大小进行截全面图片
（注：使用 driver.manage().window().maximize()进行截图时需要设设置窗口不隐藏，要弹出窗口应为弹窗窗口才会获得当前windows窗口的大小给浏览器进行赋值最大窗口）

 //配置本地的chromediver.exe谷歌的内核
         System.setProperty("webdriver.gecko.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");
         //设置ChromeOptions打开方式，设置headless：不弹出浏览器
         //设置好使用ChromeDriver使用
         ChromeDriver driver = new ChromeDriver();    
        
         driver.get("https://www.jianshu.com/u/a2b05c68b03b");
        
         //设置浏览器弹窗页面的大小
         driver.manage().window().maximize();
         //使用getScreenshotAs进行截取屏幕
            File srcFile = driver.getScreenshotAs(OutputType.FILE);  
            FileUtils.copyFile(srcFile, new File("G:\\pyChar\\jj.png"));

二，长截图

将浏览器窗口大小调整页面滚动的距离长度并截图从而得到长截图

 //配置本地的chromediver.exe谷歌的内核
         System.setProperty("webdriver.gecko.driver", "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chromedriver.exe");
         //设置ChromeOptions打开方式，设置headless：不弹出浏览器
         ChromeOptions options = new ChromeOptions();
         options.addArguments("headless");
         //设置好使用ChromeDriver使用
         ChromeDriver driver = new ChromeDriver(options);    
         //获取要截图的地址，注：需要先获取地址哦，不然下方获取的宽度高度就会是弹窗的高和宽，而不是页面内容的高宽
         driver.get("https://www.jianshu.com/u/a2b05c68b03b");
         //获取页面高宽使用：return document.documentElement.scrollWidth
         //Long width = (Long)driver.executeScript("return document.documentElement.scrollWidth");
        // Long height =(Long) driver.executeScript("return document.documentElement.scrollHeight");
        Long width = (Long) ((JavascriptExecutor)driver).executeScript("return document.documentElement.scrollWidth");
        Long height = (Long) ((JavascriptExecutor)driver).executeScript("return document.documentElement.scrollHeight");
         //设置浏览器弹窗页面的大小
         driver.manage().window().setSize(new Dimension(width.intValue(), height.intValue()));
         //使用getScreenshotAs进行截取屏幕
            File srcFile = driver.getScreenshotAs(OutputType.FILE);  
            FileUtils.copyFile(srcFile, new File("G:\\pyChar\\jj.png"));

一，全面屏截图效果图：

~(￣▽￣)~*

二，长截屏：

(⊙﹏⊙)

三，元素截图

元素截图使用方法

 WebElement findElementByXPath = ToolDriver.findElement(By.xpath("//*[@id=\"s_lg_img\"]"));
     
     File screenshotAs = findElementByXPath.getScreenshotAs(OutputType.FILE);
     String prName = "src/main/resources/" + "Toolimg" + ".png";
     try {
         FileUtils.copyFile(screenshotAs, new File(prName));
        
     } catch (IOException e) {
         e.printStackTrace();
       
     }

截图出来就是一张element的图片

元素截图的图片

image.png

使用该方法如果你使用的seleniumjava时老版本的可能会出现该错误：

org.openqa.selenium.UnsupportedCommandException: unknown command: unknown command: session/14e6544fc8308aed09a28fd57e480b7b/screenshot/7c3b2de6-15fd-4321-a9ef-1de41122dd1b

使用这个方法时需要注意你的selenium-java包支持W3C的规范

image.png

这里我注意到所有出现UnsupportedCommandException的命令都是session/{session id}/screenshot/{element id}的格式，和规范并不一致。而这个URI是在org.openqa.selenium.remote.http.AbstractHttpCommandCodec中硬编码的，也就是说Selenium-Java提供的URI是错误的。我推测是使用的Selenium-Java的版本太老的原因，当升级到新版本后这个问题就解决了

可以去maven仓库依赖最新的selenium-java

Maven Repository: org.seleniumhq.selenium » selenium-java » 4.0.0-beta-4 (mvnrepository.com)

image.png

三，元素截图

如果你不想解决还想使用元素截图那么只有截全面图然后进行裁剪了：

File src = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
WebElement element = driver.findElement(By.xpath("//div[@class='msn']"));
 Rectangle rect = element.getRect();
BufferedImage subImage= ImageIO.read(src).getSubimage(rect.x, rect.y, rect.getWidth(), rect.height);
ImageIO.write(subImage, "png", src);

最后编辑于：2022.01.01 13:00:21