前端自动化测试利器 - PhantomJS
http://pm163.lofter.com/post/aa404_197d8e
前端自动化测试向来是一件很困难的事情，特别是涉及UI层面的测试时更是爱莫能助，目前还没有很成熟的Web UI层自动化测试方案，我们这时候就必须借助于很多第三方的工具。
PhantomJS便是这么一个为自动化而生的利器，它本质上是一个基于webkit内核的无界面浏览器，并可使用JavaScript或CoffeeScript进行编程。由于没有界面，它的使用就有点像curl, lynx之类的命令行式文本浏览器。但PhantomJS远不是文本浏览器那么简单，由于它是基于webkit内核的，因此拥有的完善的Javascript解析、页面渲染功能，你完全可用它来模拟一个现代浏览器在加载网页时所做的各种事件。
我们来看看PhantomJS能做的事件吧：
不借助于浏览器的前端测试，并支持Jasmine, Capybara, QUnit, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework等诸多单元测试框架
页面操作，通过标准DOM API或借助jQuery库对页面进行修改
页面截图，甚至支持页面中的SVG和Canvas元素，可作为图片导出引擎，支持导出为pdf或png
网络测试，可轻松生成网络测试报告(HAR格式)，用于绘制瀑布图
举例来说，比如我们希望将Canvas绘制的内容导出为png图片，这通过PhantomJS来做就再合适不过了。但首先你得编写Javascript操作脚本，下面是PhantomJS自带的一个demo( colorwheel.js)：
var page =newWebPage;
page.viewportSize ={ width:400, height :400};
page.content ='<html><body><canvas id="surface"></canvas></body></html>';
page.evaluate(function(){
var el = document.getElementById('surface'),
context = el.getContext('2d'),
width = window.innerWidth,
height = window.innerHeight,
cx = width /2,
cy = height /2,
radius = width /2.3,
imageData,
pixels,
hue, sat, value,
i =0, x, y, rx, ry, d,
f, g, p, u, v, w, rgb;
el.width = width;
el.height = height;
imageData = context.createImageData(width, height);
pixels = imageData.data;
for(y =0; y < height; y = y +1){
for(x =0; x < width; x = x +1, i = i +4){
rx = x - cx;
ry = y - cy;
d = rx * rx + ry * ry;
if(d < radius * radius){
hue =6*(Math.atan2(ry, rx)+Math.PI)/(2*Math.PI);
sat =Math.sqrt(d)/ radius;
g =Math.floor(hue);
f = hue - g;
u =255*(1- sat);
v =255*(1- sat * f);
w =255*(1- sat *(1- f));
pixels[i]=[255, v, u, u, w,255,255][g];
pixels[i +1]=[w,255,255, v, u, u, w][g];
pixels[i +2]=[u, u, w,255,255, v, u][g];
pixels[i +3]=255;
}
}
}
context.putImageData(imageData,0,0);
document.body.style.backgroundColor ='white';
document.body.style.margin ='0px';
});
page.render('colorwheel.png');
phantom.exit();
[img]我们只需执行 phantomjs colorwheel.js，便可按自定义的canvas操作得到最终的图片，如下：
http://img2.cache.netease.com/sports/go2012/anytime/img/pm163/0630/colorwheel.png[/img]
如果我们只是想截图，那就更简单了，phantomJS同样提供了一个demo脚本：rasterize.js，我们只要执行：
phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png
便可轻松得到：
再看看怎么做简单的页面测试，比如只想知道一个页面的总加载时间(包括下载所有静态资源、页面渲染)，可简单地使用自带的pagetest.js
phantomjs loadspeed.js http://auto.163.com/special/browserupgrade/
得到结果如下：
Page title is 低版本IE升级提示
Loading time 1147 msec
够简单吧，如果你想进一步做网页性能分析，得到资源加载的详细瀑布图，phantomJS还可以为你生成HAR(HTTP Archive)报表。同样借助一下自带的netsniff.js：
photomjs netsniff.js http://auto.163.com/special/browserupgrade/
将生成的json格式报告放到HAR viewer( http://www.softwareishard.com/har/viewer/ )中，便可轻松得到资源加载瀑布图：
事实上，phantomjs自带的用例就有近40个，好好挖掘一下，你肯定能得到意想不到的惊喜，如果你想要做单元测试，那就更要潜心研究一下了：http://code.google.com/p/phantomjs/
前端自动化测试向来是一件很困难的事情，特别是涉及UI层面的测试时更是爱莫能助，目前还没有很成熟的Web UI层自动化测试方案，我们这时候就必须借助于很多第三方的工具。
PhantomJS便是这么一个为自动化而生的利器，它本质上是一个基于webkit内核的无界面浏览器，并可使用JavaScript或CoffeeScript进行编程。由于没有界面，它的使用就有点像curl, lynx之类的命令行式文本浏览器。但PhantomJS远不是文本浏览器那么简单，由于它是基于webkit内核的，因此拥有的完善的Javascript解析、页面渲染功能，你完全可用它来模拟一个现代浏览器在加载网页时所做的各种事件。
我们来看看PhantomJS能做的事件吧：
不借助于浏览器的前端测试，并支持Jasmine, Capybara, QUnit, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework等诸多单元测试框架
页面操作，通过标准DOM API或借助jQuery库对页面进行修改
页面截图，甚至支持页面中的SVG和Canvas元素，可作为图片导出引擎，支持导出为pdf或png
网络测试，可轻松生成网络测试报告(HAR格式)，用于绘制瀑布图
举例来说，比如我们希望将Canvas绘制的内容导出为png图片，这通过PhantomJS来做就再合适不过了。但首先你得编写Javascript操作脚本，下面是PhantomJS自带的一个demo( colorwheel.js)：
var page =newWebPage;
page.viewportSize ={ width:400, height :400};
page.content ='<html><body><canvas id="surface"></canvas></body></html>';
page.evaluate(function(){
var el = document.getElementById('surface'),
context = el.getContext('2d'),
width = window.innerWidth,
height = window.innerHeight,
cx = width /2,
cy = height /2,
radius = width /2.3,
imageData,
pixels,
hue, sat, value,
i =0, x, y, rx, ry, d,
f, g, p, u, v, w, rgb;
el.width = width;
el.height = height;
imageData = context.createImageData(width, height);
pixels = imageData.data;
for(y =0; y < height; y = y +1){
for(x =0; x < width; x = x +1, i = i +4){
rx = x - cx;
ry = y - cy;
d = rx * rx + ry * ry;
if(d < radius * radius){
hue =6*(Math.atan2(ry, rx)+Math.PI)/(2*Math.PI);
sat =Math.sqrt(d)/ radius;
g =Math.floor(hue);
f = hue - g;
u =255*(1- sat);
v =255*(1- sat * f);
w =255*(1- sat *(1- f));
pixels[i]=[255, v, u, u, w,255,255][g];
pixels[i +1]=[w,255,255, v, u, u, w][g];
pixels[i +2]=[u, u, w,255,255, v, u][g];
pixels[i +3]=255;
}
}
}
context.putImageData(imageData,0,0);
document.body.style.backgroundColor ='white';
document.body.style.margin ='0px';
});
page.render('colorwheel.png');
phantom.exit();
[img]我们只需执行 phantomjs colorwheel.js，便可按自定义的canvas操作得到最终的图片，如下：
http://img2.cache.netease.com/sports/go2012/anytime/img/pm163/0630/colorwheel.png[/img]
如果我们只是想截图，那就更简单了，phantomJS同样提供了一个demo脚本：rasterize.js，我们只要执行：
phantomjs rasterize.js http://raphaeljs.com/polar-clock.html clock.png
便可轻松得到：
再看看怎么做简单的页面测试，比如只想知道一个页面的总加载时间(包括下载所有静态资源、页面渲染)，可简单地使用自带的pagetest.js
phantomjs loadspeed.js http://auto.163.com/special/browserupgrade/
得到结果如下：
Page title is 低版本IE升级提示
Loading time 1147 msec
够简单吧，如果你想进一步做网页性能分析，得到资源加载的详细瀑布图，phantomJS还可以为你生成HAR(HTTP Archive)报表。同样借助一下自带的netsniff.js：
photomjs netsniff.js http://auto.163.com/special/browserupgrade/
将生成的json格式报告放到HAR viewer( http://www.softwareishard.com/har/viewer/ )中，便可轻松得到资源加载瀑布图：
事实上，phantomjs自带的用例就有近40个，好好挖掘一下，你肯定能得到意想不到的惊喜，如果你想要做单元测试，那就更要潜心研究一下了：http://code.google.com/p/phantomjs/