之前有写过两篇博文讲述了 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 自动化功能测试脚本第 032-页面快照截图应用之三 -- 区域截图（专业版） 顺利完结，希望此文能够给初学 Selenium 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^
时间： 2024-10-29 19:05:50