作者:

PhantomJS-前端自动化测试 – 网易用户产品&前端群博客

前端自动化测试向来是一件很困难的事情,特别是涉及UI层面的测试时更是爱莫能助,目前还没有很成熟的Web UI层自动化测试方案,我们这时候就必须借助于很多第三方的工具。

PhantomJS便是这么一个为自动化而生的利器,它本质上是一个基于webkit内核的无界面浏览器,并可使用JavaScript或CoffeeScript进行编程。由于没有界面,它的使用就有点像curl, lynx之类的命令行式文本浏览器。但PhantomJS远不是文本浏览器那么简单,由于它是基于webkit内核的,因此拥有的完善的Javascript解析、页面渲染功能,你完全可用它来模拟一个现代浏览器在加载网页时所做的各种事件。

我们来看看PhantomJS能做的事件吧:

  1. 不借助于浏览器的前端测试,并支持Jasmine, Capybara, QUnit, WebDriver, YUI Test, BusterJS, FuncUnit, Robot Framework等诸多单元测试框架

  2. 页面操作,通过标准DOM API或借助jQuery库对页面进行修改

  3. 页面截图,甚至支持页面中的SVG和Canvas元素,可作为图片导出引擎,支持导出为pdf或png

  4. 网络测试,可轻松生成网络测试报告(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();

我们只需执行 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/

发表评论

评论