phantomjs试玩

　　简单来说，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
//http://www.cnblogs.com/xinzhyu/p/4214669.html
//http://www.cnblogs.com/ziyunfei/archive/2012/09/27/2706254.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);
});*/