zoukankan      html  css  js  c++  java
  • 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, height: height };
    	
    	page.viewportSize = {
    	   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, height: height };
    
    	page.viewportSize = {
    	   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

  • 相关阅读:
    Can't connect to X11 window server using 的问题,求解
    自动化运维,让你远离背锅侠
    python netmiko实现cisco网络设备配置备份
    如何备份思科、锐捷、Juniper的配置文件
    网络配置备份。
    使用SecureCRT脚本备份网络设备配置的一点感悟
    網管利器!開源管理系統-LibreNMS
    邮件协议与port
    视频播放技术汇总(列表播放,小窗播放,跨界面播放,播放中网络切换提示)
    android插件式开发资料整理
  • 原文地址:https://www.cnblogs.com/pingfan1990/p/4877139.html
Copyright © 2011-2022 走看看