Phantomjs网页前端自动化测试之利器

[TOC]

0x00 前言基础

描述:Phantomjs /ˈfæntəm/js是一个基于webkit的JavaScript API实现网页前端自动化测试。它使用QtWebKit作为它核心浏览器的功能，使用webkit来编译解释执行JavaScript代码。任何你可以在基于webkit浏览器做的事情它都能做到，可以使用js编写业务脚本来请求、浏览和操作页面，可以将它看做一个是一个无界面浏览器。

它不仅是个隐形的浏览器，提供了诸如CSS选择器、支持Web标准、DOM操作、JSON、HTML5、Canvas、SVG等，同时也提供了处理文件I/O的操作，从而使你可以向操作系统读写文件等.

PhantomJS的用处可谓非常广泛，诸如网络监测、网页截屏、无需浏览器的 Web 测试、页面访问自动化等。

附录说明:

官方地址:http://phantomjs.org/
PhantomJS GitHub：https://github.com/ariya/phantomjs/
PhantomJS官方API：http://phantomjs.org/api/
PhantomJS官方示例：http://phantomjs.org/examples/

0x01 应用安装

描述:下面会根据使用场景从而不同的应用系统发行版本里安装Phantomjs流程:

Windows

描述:首先我们需要在下载PhantomJS，选择Windows运行的版本进行下载，然后放在一个指定目录中（建议加上环境变量）；

$systempath = [System.Environment]::GetEnvironmentVariable("PATH","Machine")
$systempath = $systempath + ";" + "D:WeiyiGeekPhantomJSbin"
[System.Environment]::setEnvironmentVariable("PATH",$systempath,"Machine")

下载操作PS:

$InstallPath="F:WeiyiGeekTools"
$InstallUrl="https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-windows.zip"
mkdir $InstallPath
$down=New-Object "System.Net.WebClient"
$down.DownloadFile($InstallUrl,"${InstallPath}phantomjs-2.1.1-windows.zip")
Expand-Archive -Path "${InstallPath}/phantomjs-2.1.1-windows.zip" -DestinationPath $InstallPath -Force

CentOS7

命令执行如下:

wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-2.1.1-linux-x86_64.tar.bz2
yum install bzip2 # 安装bzip2
tar -jxvf phantomjs-2.1.1-linux-x86_64.tar.bz2
mv phantomjs-2.1.1-linux-x86_64/ /usr/local/src/phantomjs
ln -sf /usr/local/src/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
phantomjs -v # 测试版本号

#安装中文字体
yum install fontconfig freetype2 -y
yum install bitmap-fonts bitmap-fonts-cjk -y
yum groupinstall "fonts" -y # 安装字体相关的依赖包
fc-cache # 刷新字体缓存

0x02 使用入门

hantomjs 使用 PhantomJS 基础示例参考目录:/usr/local/src/phantomjs/examples/

0x03 自定义脚本

操作界面中的DOM树主要使用使用


evaluate(function, arg1, arg2, ...) {object}  

//完整截图几种方式
//方式1:设置viewPortSize
page.viewportSize = {width: 4800,height: 8000};

//方式2:通过BOM方法操作滚动条
window.scrollTo(0,10000);
window.document.body.scrollTop = document.body.scrollHeight; #适应的高度

如何延迟截图，页面请求的资源，如图片、异步cgi、js等，返回的时间以及执行的长短都是不确定的，如果截图过早，可能很多空白区域，因此需要定时截图，在打开页面后，使用setTimeout来延迟截图

window.setTimeout(function () {  
        page.render("test.png");  
        phantom.exit();  
 }, 1000);

phantomjs - phantomjs CasperJS: 如何退出脚本执行？


casper.test.begin('Exit', function suite(test) {


 casper.exit();


});

这里附上java操作phantomjs的代码：

package com.newsTest.weixin;  
  
import java.io.BufferedReader;  
import java.io.IOException;  
import java.io.InputStream;  
import java.io.InputStreamReader;  
  
/** 
 * 类名： DownLoad 
 * 包名： com.newsTest.weixin 
 * 作者： zhouyh 
 * 时间： 2014-9-10 下午04:19:46 
 * 描述： TODO(这里用一句话描述这个类的作用)  
 */  
public class DynamicDownLoad {  
    /** 
     *  
     * 方法名：getSrcContent 
     * 作者：zhouyh 
     * 创建时间：2014-9-10 下午06:57:32 
     * 描述：根据传入的url，调用phantomjs进行下载，并返回源码信息 
     * @param url 
     * @return 
     */  
    public static String getSrcContent(String url){  
        //windows下phantomjs位置  
        String path = "D:/phantomjs-1.9.7-windows/";  
        Runtime rt = Runtime.getRuntime();  
        Process process = null;  
        try {  
            process = rt.exec(path + "phantomjs.exe D:/phantomjs-1.9.7-windows/test.js " + url.trim());  
        } catch (IOException e) {  
            // TODO 这里写异常处理的代码  
            e.printStackTrace();  
        }  
        InputStream is = process.getInputStream();  
        BufferedReader br = new BufferedReader(new InputStreamReader(is));  
        StringBuffer sbf = new StringBuffer();  
        String tmp = "";  
        try {  
            while((tmp = br.readLine())!=null){    
                sbf.append(tmp);    
            }  
        } catch (IOException e) {  
            // TODO 这里写异常处理的代码  
            e.printStackTrace();  
        }  
          
        return sbf.toString();  
    }  
      
      
      
    /** 
     * 方法名：main 
     * 作者：zhouyh 
     * 创建时间：2014-9-10 下午04:19:46 
     * 描述：TODO(这里用一句话描述这个方法的作用) 
     * @param args 
     * @throws IOException  
     */  
    public static void main(String[] args){  
        // TODO Auto-generated method stub  
        String src = DynamicDownLoad.getSrcContent("http://weixin.sogou.com/gzh?openid=oIWsFt9MmzCvfJgaVxEUevPcuUCg");  
        System.out.println(src);  
    }  
  
}

补充：对于延迟截图，还是有个问题，就是无法监听ajax或者资源是否完整加载导致页面不全；解决方案，viewport设置一个比截图高度的矮，通过比较生产图片的高度来判断截取图片的结果