Selenium2学习-033-WebUI自动化实战实例-031-页面快照截图应用之二 -- 区域截图

我在之前的文章中曾给出浏览器显示区域截图的方法，具体请参阅 。或许，有些小主已经想到了，每次都获取整个显示区域的截图存储，那么经过一段时间后，所使用的图片服务器的容量将会受到极大的挑战，尤其是在产品需要获取页面样式截图或断言失败截图比较多的情况下。解决此问题有两种途径，一是定期清理过期的样式截图；二是不需要获取整个显示区域的样式截图（即指定区域范围截图）。此文给出的方法即是区域范围截图，敬请各位小主参阅。若有不足之处，敬请指正，不胜感激！

不唠叨了，直接上码了。。。

    /**
     * Get basic snapshot for expected area of display screen area
     * 
     * @author Aaron.ffp
     * @version V1.0.0: autoSeleniumDemo main.aaron.sele.core SeleniumCore.java snapshotPartial, 2015-7-28 01:41:12 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(String filename, int left, int top, int width, int height){
        boolean success = false;
        
        try {
            // Get byte data of full screen capture
            byte[] byte_screen_capture = ((TakesScreenshot) this.webdriver).getScreenshotAs(OutputType.BYTES);
            
            // create full screen capture
            BufferedImage img_screen_catpture = ImageIO.read(new ByteArrayInputStream(byte_screen_capture));
            
            // get partial image by location and size
            BufferedImage partial_screen_capture = img_screen_catpture.getSubimage(left, top, width, height);
            
            File f = new File(filename);
            
            if (f.isFile() && f.exists()) {
                f.delete();
            }
            
            // store partial image
            ImageIO.write(partial_screen_capture, "png", f);
            
            success = true;
        } catch (IOException ioe_sci) {
            ioe_sci.printStackTrace();
        } catch (RasterFormatException rfe) {
            rfe.printStackTrace();
        }
        
        return success;
    }

下面就以获取易迅网首页中 这个截图为例演示。

测试 test_snapshotPartial_full 为浏览器最大化下的截图操作，操作步骤为：

1. 启动 Chrome 浏览器
2. 最大化浏览器
3. 打开 易迅网
4. 截图，并保存

测试 test_snapshotPartial_cal 为浏览器非最大化下的截图操作，操作步骤与上类似，只是此时非全屏。

测试源码如下所示：

/**
 * 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.JavascriptExecutor;
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 jq = "webelement = $('.btn-cor-1')[0]; " + 
                "return webelement.offsetTop + ';' + webelement.offsetLeft + ';' + " + 
                "       webelement.offsetHeight + ';' + webelement.offsetWidth";
    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 under full screen
     * 
     * @author Aaron.ffp
     * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java test_snapshotPartial_full, 2015-8-8 15:54:53 Exp $
     *
     */
    @Test
    public void test_snapshotPartial_full(){
        String filename = this.PROJECTHOME + "test_snapshotPartial_full.png";
        
        // set browser maximize
        this.webdriver.manage().window().maximize();
        
        // open yixun
        this.webdriver.get(baseUrl);
        
        // get element rcc
        int[] ele_rcc = this.getElementPositionAndSize(By.cssSelector(".btn-cor-1"));
        
        System.out.println("\nStart test_snapshotPartial_full ...");
        System.out.println("position : Top --> " + ele_rcc[0] + "\tLeft --> " + ele_rcc[1] + "\tWidth --> " + ele_rcc[2] + "\tHeight --> " + ele_rcc[3]);
        
        // capture
        if (this.snapshotPartial(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 + "\n");
        }
    }
    
    /**
     * Get capture by calculator snapshot area after scroll screen
     * 
     * @author Aaron.ffp
     * @version V1.0.0: autoSeleniumDemo main.aaron.demo.javascript JQuery.java test_snapshotPartial_cal, 2015-8-8 15:52:03 Exp $
     *
     */
    @Test
    public void test_snapshotPartial_cal(){
        String filename = this.PROJECTHOME + "test_snapshotPartial_cal.png";
        
        // set browser size
        this.setBrowserSize(500, 800);
        this.webdriver.navigate().refresh();
        
        // get position and size of rcc
        int[] ele_rcc = this.getElementPositionAndSize(By.cssSelector(".btn-cor-1"));
        
        // scroll screen
        this.scrollScreen(ele_rcc[0], ele_rcc[1]);
        
        // get position and size of browser
        int[] browser_ps = this.getBrowserPositionAndSize();
        
        // get size of body
        int[] bodySize = this.getBrowserBodySize();
        
        System.out.println("\nStart test_snapshotPartial_cal ...");
        System.out.println("Browser : " + browser_ps[0] + "\t" + browser_ps[1] + "\t" + browser_ps[2] + "\t" + browser_ps[3]);
        System.out.println("Body : " + bodySize[0] + "\t" + bodySize[1]);
        System.out.println("element : " + ele_rcc[0] + "\t" + ele_rcc[1] + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]);
        System.out.println("capture : " + 310 + "\t" + 0 + "\t" + ele_rcc[2] + "\t" + ele_rcc[3]);
        
        // capture
        if (this.snapshotPartial(filename, 310, 0, ele_rcc[2], ele_rcc[3])) {
            System.out.println("Partial screen snap successed, the image path is : " + filename);
        }
    }
}

 

至此，WebUI 自动化功能测试脚本第 031-页面快照截图应用之二 -- 区域截图 顺利完结，希望此文能够给初学 Selenium 的您一份参考。

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