|
前端自动化测试向来是一件很困难的事情,特别是涉及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=[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();
我们只需执行 phantomjs colorwheel.js,便可按自定义的canvas操作得到最终的图片,如下:
如果我们只是想截图,那就更简单了,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/ |
|