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 + "	" + 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 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^