51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 2047|回复: 1
打印 上一主题 下一主题

前端自动化测试利器 - PhantomJS

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2015-8-10 13:05:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
前端自动化测试向来是一件很困难的事情,特别是涉及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/
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

  • TA的每日心情
    开心
    2016-1-29 09:59
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]测试排长

    2#
    发表于 2015-9-23 10:13:21 | 只看该作者
    mark一下,回头研究研究
    回复 支持 反对

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-11-14 17:57 , Processed in 0.066642 second(s), 23 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表