[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 测试、页面访问自动化等。

附录说明:


0x01 应用安装

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

Windows

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

1
2
3
$systempath = [System.Environment]::GetEnvironmentVariable("PATH","Machine")
$systempath = $systempath + ";" + "D:\WeiyiGeek\PhantomJS\bin"
[System.Environment]::setEnvironmentVariable("PATH",$systempath,"Machine")

下载操作PS:

1
2
3
4
5
6
$InstallPath="F:\WeiyiGeek\Tools"
$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

命令执行如下:

1
2
3
4
5
6
7
8
9
10
11
12
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 自定义脚本

1
2
3
4
5
6
7
8
9
10
11
12
操作界面中的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来延迟截图

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

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

1
2
3
4
5
6
7
8

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


casper.exit();


});

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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设置一个比截图高度的矮,通过比较生产图片的高度来判断截取图片的结果