pyzheng
- 浏览: 3431827 次
- 性别:
- 来自: 珠海
-
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸：
你好博主，这个不是很理解，能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站：
写得不错，可以看这里，和这里的这篇文章一起看，有 ...
jquery 遍历对象、数组、集合 -
xue88ming：
很有用，谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC：
厉害，困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意，用$而不是# -
TopLongMan：
非常好，很实用啊。。
PostgreSQL递归查询实现树状结构查询
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/
分享到：
发表评论
-
TimeDifference.js获取时间差插件
2016-06-06 16:46 1175http://www.oschina.net/p/timedi ... -
日期时间插件Date-Utils
2016-05-28 23:16 1349原文 https://segmentfault.com/a/1 ... -
Riot v2.4.1 发布，JavaScript 的 MVP 框架
2016-05-23 13:14 982http://www.oschina.net/news/736 ... -
个最实用的JavaScript开发工具
2016-05-21 10:22 858http://my.oschina.net/u/2421687 ... -
zepto tap “点透”的解决
2016-05-20 15:44 1042http://my.oschina.net/u/2497925 ... -
Date.js
2016-04-20 17:09 1000原文 http://my.oschina.net/hnqing ... -
你真的了解图片的预加载吗
2016-04-14 10:26 1132http://my.oschina.net/HerrySun/ ... -
JavaScript之立即执行函数
2016-03-30 11:42 1243http://blog.csdn.net/qq83841923 ... -
JavaScript迭代
2016-03-27 01:44 755http://my.oschina.net/u/2346786 ... -
zepto(移动简化版jQuery)，的 API 分类
2016-03-24 09:22 1739http://my.oschina.net/leejun200 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 1021[HTML5]Notification桌面提醒功能 http: ... -
js中浮点型运算
2015-12-14 11:12 1331http://www.cnblogs.com/wangkong ... -
JavaScript 文件拖拽上传插件 dropzone.js 介绍
2015-12-04 23:12 1842JavaScript 文件拖拽上传插件 dropzone.js ... -
jqgrid保存或者删除成功后调用自定义方法的解决方法
2015-11-19 23:53 6008参考: http://www.debugease.com/ja ... -
Java执行js脚本
2015-11-14 23:40 1040http://my.oschina.net/sniperLi/ ... -
YUI Compressor压缩JS
2015-11-06 17:12 1103过程心得记录 http://www.cnblogs.com/t ... -
如何使用js、html5在浏览器直接打开pdf文档
2015-11-03 22:32 8681http://q.cnblogs.com/q/48507/ ... -
js获取 本周,本月,本季度,本年,上月,上周,上季度,去年
2015-11-03 00:01 2952/** * 针对Ext的工具类 */ var ... -
正则表达式
2015-10-10 09:27 911http://my.oschina.net/robortly/ ... -
jquery垮页面事件传递
2015-08-25 21:18 1078http://my.oschina.net/u/157514/ ...
相关推荐
PhantomJS是一个基于Webkit的无头浏览器，它主要用于自动化测试、网页截屏、网络监控以及Web爬虫等领域。在Go语言中，我们有时需要利用PhantomJS的功能，这时就需要一个Go客户端来与PhantomJS进行交互。"Go-...
它是一个无头WebKit浏览器，意味着它可以在没有用户界面的情况下运行，这对于自动化测试、网页抓取以及生成PDF等任务非常有用。"phantomjs-prebuilt-macbre"是PhantomJS针对Mac OS平台的预构建版本，特别为开发者...
本文将深入探讨如何利用`meteor-karma-phantomjs-launcher`这一插件，将Meteor与Karma以及PhantomJS结合起来，构建一个高效的自动化测试环境。 `meteor-karma-phantomjs-launcher`是专门为Meteor框架定制的Karma...
使用运行客户端测试 库的简单包装 警告 该项目不再维护。 安装 节点 $ npm install gulp-mocha-phantomjs --save-dev 用法 <!DOCTYPE html > < html > < head > < title > Mocha </ ...
PhantomJS是一个开源的Webkit库，用于头less浏览器测试和网页抓取。...如果你是开发者，可以利用PhantomJS进行无界面的网页自动化，如自动化测试框架，或者在不需要用户交互的情况下生成网页的PDF。
总结起来，`mocha-phantomjs-bamboo-reporter`是一个连接Mocha、PhantomJS和Atlassian Bamboo的桥梁，它简化了自动化测试和持续集成的过程，使得前端测试更加高效和透明。通过理解和利用这个工具，你可以提升你的...
另外，对于grunt-contrib-qunit插件，了解被加载到PhantomJS中的页面不知道它将被加载到PhantomJS中非常重要，因此在其中没有任何PhantomJS-> Grunt代码。它。 该通信代码，又名。 动态地 。 内联示例 如果Grunt...
PhantomJS是一款无头浏览器，常用于自动化Web页面的渲染和处理，而Laravel作为一个流行的PHP框架，其强大的测试功能是开发者们钟爱的原因之一。将PhantomJS与Laravel的测试工具相结合，可以为前端呈现的测试提供强...
它非常适合测试需要javascript支持并且还支持屏幕捕获的网站。 功能列表 通过PhantomJS无头浏览器加载网页 查看详细的响应数据，包括页面内容，标题，状态代码等。 处理重定向 查看JavaScript控制台错误 查看详细...
go-phantomjs 一个很小的phantomjs包装器 用法 import ( "github.com/urturn/go-phantomjs" // exported package is phantomjs ) func main () { p , err := phantomjs . Start () if err != nil { panic ( ...
SERPS-PhantomJS客户端 这是针对的PhantomJS Client实现 安装 使用包通过安装它： composer require 'serps/http-client-phantomjs' 文献资料
这种特性使得它成为自动化测试和网页数据抓取的理想工具。例如，如果你需要对一个网站进行功能测试，PhantomJS可以模拟用户点击、滚动页面，甚至处理JavaScript异步操作，确保所有元素都能正常工作。 在Web性能优化...
是一个受mocha-phantomjs启发的项目，因此迁移应该很容易，并且您将在50％的用户实际使用的浏览器上运行测试！ 我强烈推荐它。 我仍然会接受拉取请求，但是我自己不会回答问题或进行功能工作。 概括 是在节点和...
解析cookie-phantomjs 解析cookie以在PhantomJS中使用 接受一个cookie字符串，并返回一个准备好传递给 。 安装 $ npm install --save parse-cookie-phantomjs 用法 var parseCookiePhantomjs = require ( 'parse-...
"coffeebreak-phantomjs-runner" 是一个基于JavaScript的项目，主要目的是为了简化在PhantomJS环境下执行...对于JavaScript开发者来说，这个工具可以帮助他们更高效地利用PhantomJS进行自动化测试和数据抓取等工作。
初步测试表明，PhantomJS项目本身提供的一些运行良好，但这并不意味着它将适用于所有用例。 :warning: 用法 docker run -ti --rm fgrehm/phantomjs2 --help 在本地构建 git clone ...
nagios-phantomjs-domcomplete 如何安装 安装 Node.js 和 npm 跑步： git clone https://github.com/branneman/nagios-phantomjs-domcomplete.git cd nagios-phantomjs-domcomplete npm install 怎么跑 node ...
用法 - hosts: servers vars: phantomjs_version: "1.9.2" phantomjs_url: "https://phantomjs.googlecode.com/files/phantomjs-1.9.2-linux-x86_64.tar.bz2" roles: - nicolai86.ansible-phantomjs
PhantomJS是一款基于Webkit内核的无头浏览器，它被广泛用于自动化测试、网页截屏、网络监控等场景。这个“phantomjs自动化测试demo”是一个实例，展示了如何使用PhantomJS进行自动化测试。 首先，我们需要理解...
5. ** headless 测试**：PhantomJS作为一个无头浏览器，常用于前端JavaScript库和应用的自动化测试，特别是在持续集成环境中，因为它不需要真正的图形界面。 "phantomjs-prebuilt"包解决了npm安装过程中可能出现的...