您的位置：首页 > Web前端 > JavaScript

phantomjs试玩

2015-10-14 12:47 609 查看
　　简单来说，phantomjs就是一个运行在node上的webkit内核，支持DOM渲染，css选择器，Canvas，SVG等，在浏览器上能做的事情，理论上，phantomjs 都能模拟做到。

　　phantomjs 使用场景：　　

　　页面自动化测试： 无需浏览器的情况下进行快速的Web测试，且支持很多测试框架，如YUI Test、Jasmine、WebDriver、Capybara、QUnit、Mocha等。 网页监控： 定期打开页面，检查网站是否正常加载，加载结果是否符合预期等 页面截图：以编程方式抓起CSS、SVG和Canvas等页面内容 网络爬虫：抓取网络页面

　　phantomjs 安装：

npm install  phantomjs  -g


　　phantomjs 事件就是精确插入点

　　为了能够在精确的时间点注入测试脚本，我们需要了解下 phantomjs 在请求资源时会发生哪些事件，毕竟它也是一个事件驱动模型。

　　　　onInitialized 类似于我们发送 ajax 请求，状态为 0 的时候
　　　　onLoadStarted 准备加载网页，此时页面的 page.content 是存在的，内容为 <html><body></body></html>
　　　　onLoadFinished 页面加载完成，是 DOMContentLoaded 还是 window.onload，我稍微测试了下，感觉应该是后者
　　　　onResourceRequested 请求资源，如 css、js 等
　　　　onResourceReceived 请求的资源已到达
　　　　onClosing 关闭页面
　　　　onConsoleMessage 沙箱内的 console 内容是不会出现到外层的，通过这个函数可以输出

　　还有很多，具体可以翻阅文档: http://phantomjs.org/api/webpage/。

　　以下是我写的部分demo，仅供参考phcaTest.js：

//http://javascript.ruanyifeng.com/tool/phantomjs.html
//http://div.io/topic/1366
//http://imweb.io/topic/556c287879878a3b386dd026
///article/5051088.html
///article/4811634.html
//http://wiki.jikexueyuan.com/project/node-lessons/mocha-chai-phantomjs.html

var webPage = require('webpage');

var files = [
{url:"http://pingfan1990.sinaapp.com/html5/pfgame/index.html",name:"game"},
{url:"http://pingfan1990.sinaapp.com/festival/index.html",name:"festival"},
{url:"http://pingfan1990.sinaapp.com/html5/travel/index.html",name:"travel"},
{url:"http://pingfan1990.sinaapp.com/html5/StackBlur/index.html",name:"blur"},
{url:"http://pingfan1990.sinaapp.com/html5/ScratchGirls/index.html",name:"scratch"},
{url:"http://wq.111.com/fd/promote/201509/s11/mainvenue.html",name:"main"}
];

files.forEach(function(item,index){
//console.log(index);
//createPic(item.url,item.name);
eventCreatePic(item.url,item.name,480,2000);
});

var count = 0;

function createPic(url,picname,width,height){
var page = webPage.create();

//设置截图放大系数，尺寸
page.zoomFactor = 1;

page.clipRect = { top: 0, left: 0, width: width, height: height };

page.viewportSize = {
width: width,
height: height
};

page.settings = {
javascriptEnabled: true,
loadImages: true,
userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.31 (KHTML, like Gecko) PhantomJS/19.0'
};

page.open(url,function(status){

//evaluate在页面中执行JavaScript代码
var title = page.evaluate(function() {
return document.title;
});

//includeJs方法用于页面加载外部脚本，加载结束后就调用指定的回调函数
/*page.includeJs("http://path/to/jquery.min.js", function() {
console.log(111);
});*/

if (status === 'fail') {
console.log('open page fail!');
} else {
page.render('./phantom/'+picname+".jpg", {format: 'jpeg', quality: '100'});
console.log('Page title is ' + title);
}
count++;
if(count === files.length){
console.log("截图生成完毕，phantomjs退出运行！");
phantom.exit();
}
page.close();
//phantom.exit();
});
}

function eventCreatePic(url,picname,width,height){
var page = webPage.create();

page.clipRect = { top: 0, left: 0, width: width, height: height };

page.viewportSize = {
width: width,
height: height
};
page.onLoadStarted = function(){
//console.log("开始进入页面");
}
page.onLoadFinished = function(){
page.render('./phantom/'+picname+".jpg", {format: 'jpeg', quality: '100'});
page.close();
count++;
if(count === files.length){
console.log("截图生成完毕，phantomjs退出运行！");
phantom.exit();
}
};

page.open(url,function(status){
//evaluate在页面中执行JavaScript代码
var title = page.evaluate(function() {
return document.title;
});
if (status === 'fail') {console.log('open page fail!');}
console.log('Page title is '+title);
});
}


　　结合node进程：

var fs = require("fs"),
child_process  = require("child_process"),
http = require("http");

console.log("看是配合node+phantomjs玩法开始！");

var phan = child_process.exec("phantomjs phcatest.js",function (error, stdout, stderr) {
if (error) {
console.log(error.stack);
console.log('Error code: ' + error.code);
}
console.log('Child Process STDOUT: ' + stdout);
});

/*var phan = child_process.spawn("phantomjs",["phcatest.js"]);
phan.stdout.on('data', function (data) {
console.log('stdout: ' + data);
});

phan.stderr.on('data', function (data) {
console.log('stderr: ' + data);
});

phan.on('close', function (code) {
console.log('child process exited with code ' + code);
});*/


注意按照phantomjs的问题，由于phantomjs资源包被墙的限制，按照时建议大家采用淘宝镜像源：

ios下推荐通过brew install phantomjs安装。

资料来源：

　　phantomjs小试

　　phantomjs 基础

　　浏览器端测试：mocha，chai，phantomjs

　　CasperJS,基于PhantomJS的工具包

　　casperjs.org

　　PhantomJS bridge for NodeJS

　　阮老师PhantomJS

　　利用nodejs+phantomjs+casperjs采集淘宝商品的价格

　　前端自动化测试工具：SlimerJS、phantomJS 和 CasperJS
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航