之前有写过两篇博文讲述了 WebUI 自动化测试脚本中常用的截图方法，敬请参阅如下所示链接：
那么当需要截取的区域不在浏览器显示窗口范围之内时，之前的方法显然无法满足，那么该如何操作呢？
- 刷新页面，相当于页面归位操作
- 判断要截取的区域范围与当前浏览器显示区域大小关系，若截取范围大于显示区域，则重置浏览器窗口大小
- 模拟鼠标操作滚动屏幕，使需要截取的区域显示到浏览器窗口
- 重新计算截取起始位置相对于当前显示区域的坐标
- 调用之前的截图方法截图
下面就以获取易迅网首页中 aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGUAAAAdCAIAAAA8bzU0AAABCElEQVRoge3UQQ4DIQgF0Fn2/nfsDdzbXUOKfMHiSNNvWLSOEXwycz2vB8MZrbXreBE/FPSiF73qBL3oRa86Qa8bvXrvKUXgfeRT/8pNNce8dLJh+i6G/jvcARwDePXZSCcL91foDj8sMLfneNoLX5tHdq8XSB/18nerxxQrZPXat997fELLy/KVj4bKeDJ6E9u9oh0xfR8985rGM1PCSycYCuJhsVrpht1nrfS/sHh9mhdIb0FYLnIeHAD0jpUdlISvf5cXzrfg5UxhpZt2TdQlzcs681mvhSLv8HLeW7X+OuYF6ntXKRVk6fr3dJ/pGs8tJmItev1z0Ite9KoT9KIXveoEvcJeL+l25IWPfl38AAAAAElFTkSuQmCC" alt="" /> 这个截图为例演示。对应的概要操作流为：
- 启动 Chrome 浏览器
- 最大化浏览器
- 打开 易迅网
- 截图，并保存
区域截图 snapshotPartial_P 专业版方法源码如下所示：
/**
* Get ultimate snapshot for expected area of display screen area after scroll left,top
*
* @author Aaron.ffp
* @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java snapshotPartial_P, 2015-7-28 01:03:35 Exp $
*
* @param filename : store png file name
* @param left : left distance
* @param top : top distance
* @param width : width distance
* @param height : height distance
*
* @return boolean
*/
public boolean snapshotPartial_P(String filename, int left, int top, int width, int height){
boolean success = false; try {
// refresh page
this.webdriver.navigate().refresh(); Thread.sleep(5000); // get body size
int[] bodySize = this.getBrowserBodySize(); // Get size of browser
int browser_window_width = this.getBrowserPositionAndSize()[2];
int browser_window_height = this.getBrowserPositionAndSize()[3]; // get width and height about display screen
int[] display_screen_area = this.getBrowserDisplayAreaSize(); System.out.println("Capture area : " + left + "\t" + top + "\t" + width + "\t" + height); // set display screen to the width and height if expected size bigger than display
if (width > display_screen_area[0] || (height > display_screen_area[1])) {
this.setBrowserScreenSize(width, height);
display_screen_area[0] = width;
display_screen_area[1] = height;
} // move screen display to the expected location
this.scrollScreen(left, top); int[] pos = this.getExpectedPositionOfScreenAfterScroll(left, top);
System.out.println("getExpectedPositionOfScreenAfterScroll : " + pos[0] + "\t" + pos[1] + "\t" + width + "\t" + height); // set capture size, set size to browser size if the size bigger than the display's
if (width > display_screen_area[0]) {
width = display_screen_area[0];
System.out.println("Warnning : The expected display not completely because The screen is too small.");
} if (height > display_screen_area[1]) {
height = display_screen_area[1];
System.out.println("Warnning : The expected display not completely because The screen is too small.");
} // set left distance
if ((left + display_screen_area[0]) > bodySize[0]) {
left = display_screen_area[0] - (bodySize[0] - left) - (browser_window_width - display_screen_area[0]);
} else {
left = 0;
} // set top distance
if ((top + browser_window_height) > bodySize[1]) {
top = display_screen_area[1] - (bodySize[1] - top) - (browser_window_height - display_screen_area[1]);
} else {
top = 0;
} System.out.println("Body area : " + bodySize[0] + "\t" + bodySize[1]);
System.out.println("Browser area : " + browser_window_width + "\t" + browser_window_height);
System.out.println("Adjust area : " + left + "\t" + top + "\t" + width + "\t" + height); this.snapshotPartial(filename, left, top, width, height); success = true;
} catch (Exception e) {
e.printStackTrace();
} return success;
}
上述方法中调用的方法，请参阅下列所示的链接：
调用的获取浏览器 body 大小的方法 getBrowserBodySize，请参阅： WebUI自动化实战实例-032-获取页面 body 大小
调用的获取浏览器位置和大小的方法 getBrowserPositionAndSize，请参阅： WebUI自动化实战实例-018-获取浏览器窗口位置大小
调用的获取浏览器显示区域大小的方法 getBrowserDisplayAreaSize，请参阅： WebUI自动化实战实例-021-获取浏览器显示区域大小，通过 WebDriver 截图功能
模拟鼠标操作浏览器滚动条的方法 scrollScreen，请参阅： WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）
调用的截取浏览器指定区域快照的方法 snapshotPartial，请参阅：WebUI自动化实战实例-031-页面快照截图应用之二 -- 区域截图
获取期望位置相对于当前显示区域的位置方法 getExpectedPositionOfScreenAfterScroll 的源码如下所示：
/**
* Get expected or element position of display screen area by jquery, and return integer Array [left, top]
*
* @author Aaron.ffp
* @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java getExpectedPositionOfScreenAfterScroll, 2015-7-28 15:55:51 Exp $
*
* @param left : left distance of expected or element
* @param top : top distance of expected of element
*
* @return int[left,top]
*/
public int[] getExpectedPositionOfScreenAfterScroll(int left, int top){
// store element position
int[] positionOfScreen = new int[2]; // get window left top width height
int[] browserSize = this.getBrowserPositionAndSize(); // get display width and height
int[] displaySize = this.getBrowserDisplayAreaSizeByJS(); // get body left,top,width,height
int[] bodySize = this.getElementPositionAndSize(By.tagName("body")); // set offset to left relative the display screen
if ((left + displaySize[0]) > bodySize[2]) {
positionOfScreen[0] = displaySize[0] - (bodySize[2] - left) - (browserSize[2] - displaySize[0]);
} else {
positionOfScreen[0] = 0;
} // set offset to top relative the display screen
if ((top + displaySize[1]) > bodySize[3]) {
positionOfScreen[1] = displaySize[1] - (bodySize[3] - top) - (browserSize[3] - displaySize[1]);
} else {
positionOfScreen[1] = 0;
} return positionOfScreen;
}
测试 snapshotPartial_P 方法的测试脚本 test_snapshotPartial_P 源码如下所示：
/**
* Aaron.ffp Inc.
* Copyright (c) 2004-2015 All Rights Reserved.
*/
package main.aaron.demo.javascript; import main.aaron.sele.core.SeleniumCore; import org.openqa.selenium.By;
import org.openqa.selenium.Dimension;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test; /**
*
* @author Aaron.ffp
* @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java, 2015-7-27 13:31:31 Exp $
*/
public class JQuery extends SeleniumCore{
String baseUrl = "http://www.yixun.com/";
final String PROJECTHOME = System.getProperty("user.dir") + System.getProperty("file.separator") + "capture" + System.getProperty("file.separator"); @BeforeClass
public void beforeClass() throws InterruptedException{
this.webdriver = new ChromeDriver();
this.webdriver.manage().window().maximize();
this.webdriver.get(baseUrl);
Thread.sleep(5000);
} @AfterClass
public void afterClass(){
this.webdriver.close();
this.webdriver.quit();
} /**
* Get capture
*
* @author Aaron.ffp
* @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java test_snapshotPartial_U, 2015-8-8 15:56:06 Exp $
*
* @throws InterruptedException
*/
@Test
public void test_snapshotPartial_P() throws InterruptedException{
this.webdriver.manage().window().setSize(new Dimension(500,800)); this.webdriver.navigate().refresh(); String filename = this.PROJECTHOME + "test_snapshotPartial_U.png"; int[] ele_rcc = this.getElementPositionAndSize(By.cssSelector(".btn-cor-1")); System.out.println("\nStart test_snapshotPartial_U ...");
System.out.println("element : " + ele_rcc[0] + "\t" + ele_rcc[1] + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]);
System.out.println("capture : " + ele_rcc[0] + "\t" + ele_rcc[1] + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]); if (this.snapshotPartial_P(filename, ele_rcc[0], ele_rcc[1], ele_rcc[2], ele_rcc[3])) {
System.out.println("Partial screen snap successed, the image path is : " + filename);
}
}
}
执行结果如下所示：
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 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^