Selenium2学习-033-WebUI自动化实战实例-031-页面快照截图应用之二 -- 区域截图
我在之前的文章中曾给出浏览器显示区域截图的方法,具体请参阅 。或许,有些小主已经想到了,每次都获取整个显示区域的截图存储,那么经过一段时间后,所使用的图片服务器的容量将会受到极大的挑战,尤其是在产品需要获取页面样式截图或断言失败截图比较多的情况下。解决此问题有两种途径,一是定期清理过期的样式截图;二是不需要获取整个显示区域的样式截图(即指定区域范围截图)。此文给出的方法即是区域范围截图,敬请各位小主参阅。若有不足之处,敬请指正,不胜感激!
不唠叨了,直接上码了。。。
1 /** 2 * Get basic snapshot for expected area of display screen area 3 * 4 * @author Aaron.ffp 5 * @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java snapshotPartial, 2015-7-28 01:41:12 Exp $ 6 * 7 * @param filename : store png file name 8 * @param left : left distance 9 * @param top : top distance 10 * @param width : width distance 11 * @param height : height distance 12 * 13 * @return boolean 14 */ 15 public boolean snapshotPartial(String filename, int left, int top, int width, int height){ 16 boolean success = false; 17 18 try { 19 // Get byte data of full screen capture 20 byte[] byte_screen_capture = ((TakesScreenshot) this.webdriver).getScreenshotAs(OutputType.BYTES); 21 22 // create full screen capture 23 BufferedImage img_screen_catpture = ImageIO.read(new ByteArrayInputStream(byte_screen_capture)); 24 25 // get partial image by location and size 26 BufferedImage partial_screen_capture = img_screen_catpture.getSubimage(left, top, width, height); 27 28 File f = new File(filename); 29 30 if (f.isFile() && f.exists()) { 31 f.delete(); 32 } 33 34 // store partial image 35 ImageIO.write(partial_screen_capture, "png", f); 36 37 success = true; 38 } catch (IOException ioe_sci) { 39 ioe_sci.printStackTrace(); 40 } catch (RasterFormatException rfe) { 41 rfe.printStackTrace(); 42 } 43 44 return success; 45 }
下面就以获取易迅网首页中 这个截图为例演示。
测试 test_snapshotPartial_full 为浏览器最大化下的截图操作,操作步骤为:
- 启动 Chrome 浏览器
- 最大化浏览器
- 打开 易迅网
- 截图,并保存
测试 test_snapshotPartial_cal 为浏览器非最大化下的截图操作,操作步骤与上类似,只是此时非全屏。
测试源码如下所示:
1 /** 2 * Aaron.ffp Inc. 3 * Copyright (c) 2004-2015 All Rights Reserved. 4 */ 5 package main.aaron.demo.javascript; 6 7 import main.aaron.sele.core.SeleniumCore; 8 9 import org.openqa.selenium.By; 10 import org.openqa.selenium.Dimension; 11 import org.openqa.selenium.JavascriptExecutor; 12 import org.openqa.selenium.chrome.ChromeDriver; 13 import org.testng.annotations.AfterClass; 14 import org.testng.annotations.BeforeClass; 15 import org.testng.annotations.Test; 16 17 /** 18 * 19 * @author Aaron.ffp 20 * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java, 2015-7-27 13:31:31 Exp $ 21 */ 22 public class JQuery extends SeleniumCore{ 23 String jq = "webelement = $('.btn-cor-1')[0]; " + 24 "return webelement.offsetTop + ';' + webelement.offsetLeft + ';' + " + 25 " webelement.offsetHeight + ';' + webelement.offsetWidth"; 26 String baseUrl = "http://www.yixun.com/"; 27 final String PROJECTHOME = System.getProperty("user.dir") + System.getProperty("file.separator") + "capture" + System.getProperty("file.separator"); 28 29 @BeforeClass 30 public void beforeClass() throws InterruptedException{ 31 this.webdriver = new ChromeDriver(); 32 this.webdriver.manage().window().maximize(); 33 this.webdriver.get(baseUrl); 34 Thread.sleep(5000); 35 } 36 37 @AfterClass 38 public void afterClass(){ 39 this.webdriver.close(); 40 this.webdriver.quit(); 41 } 42 43 /** 44 * Get capture under full screen 45 * 46 * @author Aaron.ffp 47 * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java test_snapshotPartial_full, 2015-8-8 15:54:53 Exp $ 48 * 49 */ 50 @Test 51 public void test_snapshotPartial_full(){ 52 String filename = this.PROJECTHOME + "test_snapshotPartial_full.png"; 53 54 // set browser maximize 55 this.webdriver.manage().window().maximize(); 56 57 // open yixun 58 this.webdriver.get(baseUrl); 59 60 // get element rcc 61 int[] ele_rcc = this.getElementPositionAndSize(By.cssSelector(".btn-cor-1")); 62 63 System.out.println("\nStart test_snapshotPartial_full ..."); 64 System.out.println("position : Top --> " + ele_rcc[0] + "\tLeft --> " + ele_rcc[1] + "\tWidth --> " + ele_rcc[2] + "\tHeight --> " + ele_rcc[3]); 65 66 // capture 67 if (this.snapshotPartial(filename, ele_rcc[0], ele_rcc[1], ele_rcc[2], ele_rcc[3])) { 68 System.out.println("Partial screen snap successed, the image path is : " + filename + "\n"); 69 } 70 } 71 72 /** 73 * Get capture by calculator snapshot area after scroll screen 74 * 75 * @author Aaron.ffp 76 * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java test_snapshotPartial_cal, 2015-8-8 15:52:03 Exp $ 77 * 78 */ 79 @Test 80 public void test_snapshotPartial_cal(){ 81 String filename = this.PROJECTHOME + "test_snapshotPartial_cal.png"; 82 83 // set browser size 84 this.setBrowserSize(500, 800); 85 this.webdriver.navigate().refresh(); 86 87 // get position and size of rcc 88 int[] ele_rcc = this.getElementPositionAndSize(By.cssSelector(".btn-cor-1")); 89 90 // scroll screen 91 this.scrollScreen(ele_rcc[0], ele_rcc[1]); 92 93 // get position and size of browser 94 int[] browser_ps = this.getBrowserPositionAndSize(); 95 96 // get size of body 97 int[] bodySize = this.getBrowserBodySize(); 98 99 System.out.println("\nStart test_snapshotPartial_cal ..."); 100 System.out.println("Browser : " + browser_ps[0] + "\t" + browser_ps[1] + "\t" + browser_ps[2] + "\t" + browser_ps[3]); 101 System.out.println("Body : " + bodySize[0] + "\t" + bodySize[1]); 102 System.out.println("element : " + ele_rcc[0] + "\t" + ele_rcc[1] + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]); 103 System.out.println("capture : " + 310 + "\t" + 0 + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]); 104 105 // capture 106 if (this.snapshotPartial(filename, 310, 0, ele_rcc[2], ele_rcc[3])) { 107 System.out.println("Partial screen snap successed, the image path is : " + filename); 108 } 109 } 110 }
至此,WebUI 自动化功能测试脚本第 031-页面快照截图应用之二 -- 区域截图 顺利完结,希望此文能够给初学 Selenium 的您一份参考。
最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^
欢迎 【 留言 || 关注 || 打赏 】 。您的每一份心意都是对我的鼓励和支持!非常感谢!欢迎互加,相互交流学习!
作者:范丰平,本文链接:https://www.cnblogs.com/fengpingfan/p/4712962.html
Copyright @范丰平 版权所有,如需转载请标明本文原始链接出处,严禁商业用途! 我的个人博客链接地址:http://www.cnblogs.com/fengpingfan