之前有写过两篇博文讲述了 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 + " " + top + " " + width + " " + 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] + " " + pos[1] + " " + width + " " + 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] + " " + bodySize[1]); 75 System.out.println("Browser area : " + browser_window_width + " " + browser_window_height); 76 System.out.println("Adjust area : " + left + " " + top + " " + width + " " + 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(" Start test_snapshotPartial_U ..."); 58 System.out.println("element : " + ele_rcc[0] + " " + ele_rcc[1] + " " + ele_rcc[2] + " " + ele_rcc[3]); 59 System.out.println("capture : " + ele_rcc[0] + " " + ele_rcc[1] + " " + ele_rcc[2] + " " + 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:CNblogssourceCodeautoSeleniumDemocapture est_snapshotPartial_U.png
至此，WebUI 自动化功能测试脚本第 033-页面快照截图应用之三 -- 区域截图（专业版） 顺利完结，希望此文能够给初学 Selenium 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^