Selenium2学习-035-WebUI自动化实战实例-033-页面快照截图应用之三 -- 区域截图(专业版)
之前有写过两篇博文讲述了 WebUI 自动化测试脚本中常用的截图方法,敬请参阅如下所示链接:
那么当需要截取的区域不在浏览器显示窗口范围之内时,之前的方法显然无法满足,那么该如何操作呢?
- 刷新页面,相当于页面归位操作
- 判断要截取的区域范围与当前浏览器显示区域大小关系,若截取范围大于显示区域,则重置浏览器窗口大小
- 模拟鼠标操作滚动屏幕,使需要截取的区域显示到浏览器窗口
- 重新计算截取起始位置相对于当前显示区域的坐标
- 调用之前的截图方法截图
下面就以获取易迅网首页中 这个截图为例演示。对应的概要操作流为:
- 启动 Chrome 浏览器
- 最大化浏览器
- 打开 易迅网
- 截图,并保存
区域截图 snapshotPartial_P 专业版方法源码如下所示:
1 /** 2 * Get ultimate snapshot for expected area of display screen area after scroll left,top 3 * 4 * @author Aaron.ffp 5 * @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java snapshotPartial_P, 2015-7-28 01:03:35 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_P(String filename, int left, int top, int width, int height){ 16 boolean success = false; 17 18 try { 19 // refresh page 20 this.webdriver.navigate().refresh(); 21 22 Thread.sleep(5000); 23 24 // get body size 25 int[] bodySize = this.getBrowserBodySize(); 26 27 // Get size of browser 28 int browser_window_width = this.getBrowserPositionAndSize()[2]; 29 int browser_window_height = this.getBrowserPositionAndSize()[3]; 30 31 // get width and height about display screen 32 int[] display_screen_area = this.getBrowserDisplayAreaSize(); 33 34 System.out.println("Capture area : " + left + "\t" + top + "\t" + width + "\t" + height); 35 36 // set display screen to the width and height if expected size bigger than display 37 if (width > display_screen_area[0] || (height > display_screen_area[1])) { 38 this.setBrowserScreenSize(width, height); 39 display_screen_area[0] = width; 40 display_screen_area[1] = height; 41 } 42 43 // move screen display to the expected location 44 this.scrollScreen(left, top); 45 46 int[] pos = this.getExpectedPositionOfScreenAfterScroll(left, top); 47 System.out.println("getExpectedPositionOfScreenAfterScroll : " + pos[0] + "\t" + pos[1] + "\t" + width + "\t" + height); 48 49 // set capture size, set size to browser size if the size bigger than the display's 50 if (width > display_screen_area[0]) { 51 width = display_screen_area[0]; 52 System.out.println("Warnning : The expected display not completely because The screen is too small."); 53 } 54 55 if (height > display_screen_area[1]) { 56 height = display_screen_area[1]; 57 System.out.println("Warnning : The expected display not completely because The screen is too small."); 58 } 59 60 // set left distance 61 if ((left + display_screen_area[0]) > bodySize[0]) { 62 left = display_screen_area[0] - (bodySize[0] - left) - (browser_window_width - display_screen_area[0]); 63 } else { 64 left = 0; 65 } 66 67 // set top distance 68 if ((top + browser_window_height) > bodySize[1]) { 69 top = display_screen_area[1] - (bodySize[1] - top) - (browser_window_height - display_screen_area[1]); 70 } else { 71 top = 0; 72 } 73 74 System.out.println("Body area : " + bodySize[0] + "\t" + bodySize[1]); 75 System.out.println("Browser area : " + browser_window_width + "\t" + browser_window_height); 76 System.out.println("Adjust area : " + left + "\t" + top + "\t" + width + "\t" + height); 77 78 this.snapshotPartial(filename, left, top, width, height); 79 80 success = true; 81 } catch (Exception e) { 82 e.printStackTrace(); 83 } 84 85 return success; 86 }
上述方法中调用的方法,请参阅下列所示的链接:
调用的获取浏览器 body 大小的方法 getBrowserBodySize,请参阅: WebUI自动化实战实例-032-获取页面 body 大小
调用的获取浏览器位置和大小的方法 getBrowserPositionAndSize,请参阅: WebUI自动化实战实例-018-获取浏览器窗口位置大小
调用的获取浏览器显示区域大小的方法 getBrowserDisplayAreaSize,请参阅: WebUI自动化实战实例-021-获取浏览器显示区域大小,通过 WebDriver 截图功能
模拟鼠标操作浏览器滚动条的方法 scrollScreen,请参阅: WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三(页面滚屏,模拟鼠标拖动滚动条)
调用的截取浏览器指定区域快照的方法 snapshotPartial,请参阅:WebUI自动化实战实例-031-页面快照截图应用之二 -- 区域截图
获取期望位置相对于当前显示区域的位置方法 getExpectedPositionOfScreenAfterScroll 的源码如下所示:
1 /** 2 * Get expected or element position of display screen area by jquery, and return integer Array [left, top] 3 * 4 * @author Aaron.ffp 5 * @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java getExpectedPositionOfScreenAfterScroll, 2015-7-28 15:55:51 Exp $ 6 * 7 * @param left : left distance of expected or element 8 * @param top : top distance of expected of element 9 * 10 * @return int[left,top] 11 */ 12 public int[] getExpectedPositionOfScreenAfterScroll(int left, int top){ 13 // store element position 14 int[] positionOfScreen = new int[2]; 15 16 // get window left top width height 17 int[] browserSize = this.getBrowserPositionAndSize(); 18 19 // get display width and height 20 int[] displaySize = this.getBrowserDisplayAreaSizeByJS(); 21 22 // get body left,top,width,height 23 int[] bodySize = this.getElementPositionAndSize(By.tagName("body")); 24 25 // set offset to left relative the display screen 26 if ((left + displaySize[0]) > bodySize[2]) { 27 positionOfScreen[0] = displaySize[0] - (bodySize[2] - left) - (browserSize[2] - displaySize[0]); 28 } else { 29 positionOfScreen[0] = 0; 30 } 31 32 // set offset to top relative the display screen 33 if ((top + displaySize[1]) > bodySize[3]) { 34 positionOfScreen[1] = displaySize[1] - (bodySize[3] - top) - (browserSize[3] - displaySize[1]); 35 } else { 36 positionOfScreen[1] = 0; 37 } 38 39 return positionOfScreen; 40 }
测试 snapshotPartial_P 方法的测试脚本 test_snapshotPartial_P 源码如下所示:
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.chrome.ChromeDriver; 12 import org.testng.annotations.AfterClass; 13 import org.testng.annotations.BeforeClass; 14 import org.testng.annotations.Test; 15 16 /** 17 * 18 * @author Aaron.ffp 19 * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java, 2015-7-27 13:31:31 Exp $ 20 */ 21 public class JQuery extends SeleniumCore{ 22 String baseUrl = "http://www.yixun.com/"; 23 final String PROJECTHOME = System.getProperty("user.dir") + System.getProperty("file.separator") + "capture" + System.getProperty("file.separator"); 24 25 @BeforeClass 26 public void beforeClass() throws InterruptedException{ 27 this.webdriver = new ChromeDriver(); 28 this.webdriver.manage().window().maximize(); 29 this.webdriver.get(baseUrl); 30 Thread.sleep(5000); 31 } 32 33 @AfterClass 34 public void afterClass(){ 35 this.webdriver.close(); 36 this.webdriver.quit(); 37 } 38 39 /** 40 * Get capture 41 * 42 * @author Aaron.ffp 43 * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java test_snapshotPartial_U, 2015-8-8 15:56:06 Exp $ 44 * 45 * @throws InterruptedException 46 */ 47 @Test 48 public void test_snapshotPartial_P() throws InterruptedException{ 49 this.webdriver.manage().window().setSize(new Dimension(500,800)); 50 51 this.webdriver.navigate().refresh(); 52 53 String filename = this.PROJECTHOME + "test_snapshotPartial_U.png"; 54 55 int[] ele_rcc = this.getElementPositionAndSize(By.cssSelector(".btn-cor-1")); 56 57 System.out.println("\nStart test_snapshotPartial_U ..."); 58 System.out.println("element : " + ele_rcc[0] + "\t" + ele_rcc[1] + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]); 59 System.out.println("capture : " + ele_rcc[0] + "\t" + ele_rcc[1] + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]); 60 61 if (this.snapshotPartial_P(filename, ele_rcc[0], ele_rcc[1], ele_rcc[2], ele_rcc[3])) { 62 System.out.println("Partial screen snap successed, the image path is : " + filename); 63 } 64 } 65 }
执行结果如下所示:
Start test_snapshotPartial_U ... element : 845 717 100 30 capture : 845 717 100 30 Capture area : 845 717 100 30 getElementPositionOfScreenAfterScroll : 311 0 100 30 Body area : 1002 5188 Browser area : 500 800 Adjust area : 311 0 100 30 Partial screen snap successed, the image path is : I:\CNblogs\sourceCode\autoSeleniumDemo\capture\test_snapshotPartial_U.png
至此,WebUI 自动化功能测试脚本第 033-页面快照截图应用之三 -- 区域截图(专业版) 顺利完结,希望此文能够给初学 Selenium 的您一份参考。
最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^
相关文章
- CSS动画实例:旋转的同心圆
- JS全角与半角转化实例(分享)
- 实例化和设置一个优秀的php对象
- Sql2012如何将远程服务器数据库及表、表结构、表数据导入本地数据库 自定义日志记录功能,按日记录,很方便 C#常量和字段以及各种方法的语法总结 类型,对象,线程栈,托管堆在运行时的关系,以及clr如何调用静态方法,实例方法,和虚方法 asp.net webapi 自定义身份验证
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
- Oracle 远程访问配置 在 Windows Forms 和 WPF 应用中使用 FontAwesome 图标 C#反序列化XML异常:在 XML文档(0, 0)中有一个错误“缺少根元素” C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper Decimal类型截取保留N位小数向上取, Decimal类型截取保留N位小数并且不进行四舍五入操作
- Python isinstance() 函数用法及实例另类高级使用(附带classmethod 修饰符、json.dumps)
- MySQL 触发器简单实例
- 简单而有效的html画线代码“hr”实例!
- 【XCP学习】XCP的趋势和应用实例-3
- 码栈开发手册(六)---实例演练(使用数据面板和数据视图)
- C++中引用(&)的用法和应用实例
- Task.Delay方法的2个应用实例,单元测试等待,限时限次下载远程资源
- 《51单片机应用开发从入门到精通》——2.10 变频报警实例
- 《51单片机应用开发从入门到精通》——2.13 软件陷阱实例
- Selenium2学习-025-WebUI自动化实战实例-023-页面快照截图应用之一 -- 常规截图(全页面)
- Selenium2学习-033-WebUI自动化实战实例-031-页面快照截图应用之二 -- 区域截图
- Selenium2学习-031-WebUI自动化实战实例-029-JavaScript 在 Selenium 自动化中的应用实例之四(获取元素位置和大小)
- ThinkPHP创建应用的一般开发流程及实例
- 《应用时间序列分析:R软件陪同》——3.2 一元时间序列数据实例分析
- Modbus协议栈应用实例之二:Modbus RTU从站应用
- 【Unity3D-UGUI应用篇】使用UGUI的UI预制体进行实例化实操演示
- Silverlight+WCF 新手实例 象棋 回归WCF通讯应用-进入房间(十九)
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 模板消息的应用开发
- Docker Compose安装使用,及搭建nginx+php+mysql基础应用实例
- 引用传递的实例分析
- delphi absolute 应用实例